JavaScript: 原型和原型链-再谈

[leslie1943]

JavaScript: 原型和原型链

• prototype: 每个函数都会有这个属性, 这里强调, 是函数, 普通对象没有这个属性.(为什么说是普通对象呢,JS中,一切皆为对象,所以这里的普通对象不包括函数对象). prototype是构造函数的原型对象
• __proto__: 每个对象都有这个属性, 这里强调, 是对象, 同样函数也是对象, 所有函数也有这个属性. 它指向构造函数(创建实例的类)的原型对象 <也就是说对象的 __proto__ 指向创建这个对象的类的原型对象prototype>
• constructor: 原型对象(prototype)上的一个指向构造函数的属性, 就是说 类的原型对象上constructor指向类本身(Class.prototype.constructor===Class)
• 构造函数(function ClassName)和构造方法(constructor)

var webName = 'long'
function Pig(name, age){
    this.name = name
    this.age = age
}

var Peppa = new Pig('Peppa', 5)
console.info(Peppa.__proto__ === Pig.prototype) // 详细见 🚀解析 - 1

console.info(Pig.__proto__ === Function.prototype) // 详细见 🚀解析 - 2
console.info(Pig.prototype.constructor  === Pig) // 详细见 🚀解析 - 3

🚀 解析 - 1

• 在实例化的时候, 类的 prototype 上的属性 会作为 原型对象 赋值给 实例 ,
• 也就是说, Peppa的原型(__proto__) 就是从 Pig的原型对象(prototype)继承而来的
• 所以 Peppa.__proto__ == Pig.prototype

🚀 解析 - 2

• Pig 是一个函数对象, 它是 Function对象的一个实例, 所以 Pig.__proto__ === Function.prototype

🚀 解析 - 3

• 关于constructor这个属性, 它位于原型对象上并且指向构造函数
• 所以 Pig.prototype.constructor === Pig

console.info(Pig.prototype)
/*
    {
        constructor: function Pig(name, age){},
    }
*/

• .__proto__ 是往上找构造函数的原型对象, Peppa.__proto__ => Pig.prototype