欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js之prototype、__proto__、constructor之间的关系

程序员文章站 2024-03-12 23:17:20
...

想知道三者之间的关系,我们就要了解每一个作用

一:构造函数原型对象 prototype

为何要有prototype这个对象呢?
首先我们创建一个构造函数:

function Person(name, age) {
      this.name = name
      this.age
      this.write = function() {
        console.log('我会写')
      }
    }
var lwl = new Person('小红', 18)
var lll = new Person('小明', 19)
console.log(lwl.write === lll.write)   //false

我们发现:我们创建的两个Person的实例对象的write并不是同一个write函数。
那么如果创建好多个实例的话,这就很浪费空间,因为每个实例都要开辟一个存储函数的格外空间。(注意:函数是一个复杂的数据类型,会额外开辟空间来储存)

因此构造函数就有了一个prototype属性,该属性是一个对象!因此我们也称为原型对象

console.log(typeof Person.prototype)  //object

javascript规定,每一个构造函数都有一个prototype属性,它指向了另一个对象,注意这个prototype就是一个对象,这个对象中的所有属性和方法,都会被构造函数所拥有。

构造函数通过原型分配的函数是所有对象所共享的,(解决了浪费内存的问题)

/*
 该代码会作为该文章代码使用,以下的代码会在此基础上添加
*/
function Person(name, age) {
      this.name = name
      this.age
    }
Person.prototype.sing = function() {
  console.log('我会唱歌!')
}

var lwl = new Person('小红', 18)
var lll = new Person('小明', 19)
console.log(lwl.write === lll.write)  //true  

表明是同一个函数!。

二:对象原型__proto__

__proto__是什么?

console.log(lwl) 

结果:js之prototype、__proto__、constructor之间的关系

很明显它是对象中的属性且是一个对象但我们发现对象中没有prototype属性,为何对象没有该方法却能访问到呢?

我们知道对象有一个__proto__属性,我们展开它发现它与构造函数的原型对象prototype一样。我们来判断一下:

console.log(lwl.__proto__ === Person.prototype) //true

表明

  • __proto__对象原型和原型对象prototype是等价的
  • 只要是对象,它都有一个 __proto__ ,指向原型对象
  • __proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准的属性,因此在实际开发过程中,不可以使用这个属性,它只是内部指向原型对象prototype。

三:constructor 构造函数

对象原型 __proto__和构造函数(prototype)原型对象里面都有一个constructor属性,constructor我们称为构造函数,因为他指回构造函数本身

console.log(lwl.__proto__.constructor) 

输出:
js之prototype、__proto__、constructor之间的关系

console.log(lwl.__proto__.constructor === Person)  // true

它主要目的就是:用于记录该对象引用哪个构造函数,它可以让原型对象重新指向原来的构造函数

当我们用赋值对象的方法来定义构造函数的原型对象时,就会出现问题!它会覆盖原有的prototype

Person.prototype = {
    sing: function() {},
    dance: fucntion() {},
}

//再一次打印Person.prototype
console.log(Person.prototype)  //发现没有constructor

因此我们要重新自己指定一个constructor。

Person.prototype = {
	constructor: Person,
    sing: function() {},
    dance: fucntion() {},
}

综合上述
我使用图解的方法来解释:

js之prototype、__proto__、constructor之间的关系

相关标签: JavaScript