在JavaScript中，constructor、prototype和__proto__是与对象创建和继承机制紧密相关的三个概念。理解它们之间的关系对于掌握JavaScript的面向对象编程至关重要。下面将详细介绍这个魔法三角：
1. constructor
-
定义：
constructor是一个函数，它被用来初始化一个新创建的对象实例。当使用new关键字创建一个新的对象时，构造函数会被调用。 -
作用：主要负责为新创建的对象设置初始属性和方法。
-
示例：
function Person(name, age) {
this.name = name;
this.age = age;
}
const Kobe = new Person('Kobe', 24);
2. prototype
-
定义：每个函数都有一个
prototype属性，它是一个对象，用于存储可以被该函数的所有实例共享的方法和属性。 -
作用：通过
prototype属性，可以实现原型链继承，允许子类继承父类的属性和方法。 -
示例：
Person.prototype.greet = function() {
console.log(`my name is ${this.name}.`);
};
const Kobe = new Person('Kobe', 24);
Kobe.greet(); // "my name is kobe."
3. __proto__
-
定义：
__proto__是每个对象的一个内部属性（非标准属性），指向该对象的原型对象。在ES6中，推荐使用Object.getPrototypeOf()或Object.setPrototypeOf()来获取或设置原型。 -
作用：
__proto__是原型链的核心，当尝试访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript引擎会沿着__proto__链向上查找，直到找到该属性或者到达原型链的末端（通常是null）。 -
示例：
const Kobe = new Person('Kobe', 24);
console.log(Kobe.__proto__ === Person.prototype); // true
4. 关系
-
构造函数与
prototype：- 每个构造函数都有一个
prototype属性，这是一个对象，包含所有实例共享的方法和属性。 - 当使用
new关键字创建对象时，新对象的__proto__属性会被设置为构造函数的prototype对象。
- 每个构造函数都有一个
-
__proto__与原型链：__proto__属性使得对象能够访问其构造函数prototype上的方法和属性。- 通过
__proto__，可以形成一个从子对象到父对象的链式结构，即原型链。
-
constructor与prototype：prototype对象上有一个默认的constructor属性，它指向构造函数本身。- 这个
constructor属性可以帮助我们识别一个对象是由哪个构造函数创建的。
5. 图解
6. 示例代码
function Person(name, age) {
this.name = name;
this.age = age;
}
// 在构造函数的原型上添加方法
Person.prototype.greet = function() {
console.log(`my name is ${this.name}.`);
};
const Kobe = new Person('Kobe', 24);
// 查看Kobe的原型
console.log(Kobe.__proto__ === Person.prototype); // true
// 查看Person.prototype的constructor属性
console.log(Person.prototype.constructor === Person); // true
// 使用Kobe调用greet方法
Kobe.greet(); // "my name is Kobe."
// 原型链
console.log(Object.getPrototypeOf(Kobe) === Person.prototype); // true
7. 总结
constructor：构造函数，用于初始化新创建的对象实例。prototype：构造函数的原型对象，用于存储可以被所有实例共享的方法和属性。__proto__：对象的内部属性，指向该对象的原型对象，用于实现原型链继承。
这就是JS的魔法三角吗？看起来并不难吧？