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)
结果:
很明显它是对象中的属性且是一个对象,但我们发现:对象中没有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)
输出:
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之间的关系
-
js的__proto__,prototype、constructor属性
-
深入理解__proto__ 、constructor和prototype的关系
-
js中__proto__和prototype的区别和关系?
-
js prototype和__proto__的关系是什么
-
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
-
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
-
js prototype和__proto__的关系是什么
-
vue.js基础练习之挂载点 实例 模板之间的关系
-
JS 中的 __proto__ 、prototype、constructor