当谈到 JavaScript 中的原型链时，我们需要先理解 JavaScript 中的对象和原型的概念。原型链是 JavaScript 中实现继承的一种机制，它允许对象通过继承从其他对象中获取属性和方法。
对象和原型的概念
在 JavaScript 中，几乎所有的东西都是对象。对象是键值对的集合，其中键是字符串或符号，值可以是各种数据类型，包括其他对象。
每个 JavaScript 对象都有一个关联的原型。原型本身也是一个对象，它包含共享的属性和方法。当你访问对象的属性或方法时，如果对象本身没有这个属性或方法，JavaScript 将会去它的原型链中查找。
原型链的构建
让我们从一个简单的例子开始：
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}.`);
};
const person1 = new Person("Alice");
person1.sayHello();
在这个例子中，我们定义了一个构造函数 Person，它有一个属性 name 和一个方法 sayHello。然后，我们使用 new 关键字创建了一个名为 person1 的对象。
在这个例子中，person1 对象的原型链如下：
person1 --> Person.prototype --> Object.prototype --> null
-
person1 本身没有 sayHello 方法，所以它会去 Person.prototype 中查找。 -
Person.prototype 也没有 sayHello 方法，但它有 Object.prototype，所以它会继续查找。 -
Object.prototype 有一些内置的方法，但是也没有 sayHello 方法，最终原型链会到达 null，表示没有更多的原型。
原型链继承
原型链允许对象从其他对象继承属性和方法。例如：
function Student(name, grade) {
this.name = name;
this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.showGrade = function() {
console.log(`My grade is ${this.grade}.`);
};
const student1 = new Student("Bob", 10);
student1.sayHello();
student1.showGrade();
在这个例子中，我们定义了一个构造函数 Student，它继承了 Person.prototype。这意味着 student1 对象继承了 Person 中的 sayHello 方法。同时，我们为 Student.prototype 添加了一个新的方法 showGrade。
student1 对象的原型链如下：
student1 --> Student.prototype --> Person.prototype --> Object.prototype --> null
prototype、__ proto __、constructor
-
prototype 属性：
在函数对象中，存在一个特殊的属性叫做 prototype。这个属性指向一个对象，它包含了该函数构造出来的实例对象共享的属性和方法。这个属性主要在构造函数与实例之间共享方法和属性时使用。
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}.`);
};
-
__proto__ 属性：
__proto__ 是每个 JavaScript 对象都有的一个属性，它指向该对象的原型。通过 __proto__，对象可以访问到原型对象的属性和方法。然而，需要注意的是，虽然 __proto__ 是标准的属性，但它并不是在所有 JavaScript 引擎中都被广泛支持的。
在现代 JavaScript 中，可以使用 Object.getPrototypeOf(obj) 来获取对象的原型，而不直接使用 obj.__proto__。
-
constructor 属性：
constructor 属性是一个指向创建当前对象的构造函数的引用。在默认情况下，所有函数对象的 prototype 上都有一个 constructor 属性，指向创建该对象的构造函数。
举例来说，如果有一个 Person 构造函数，那么 Person.prototype.constructor 将指向 Person 构造函数本身。
function Person(name) {
this.name = name;
}
console.log(Person.prototype.constructor === Person); // true
总结
在 JavaScript 中，prototype 用于设置共享属性和方法，__proto__ 用于访问对象的原型，constructor 用于指向创建对象的构造函数。这三个属性一起构成了原型链的基础，允许对象在继承属性和方法时实现代码的重用和共享。
原文始发于微信公众号（前端大大大）：JavaScript原型链解析
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/174183.html
