刨根问底：原型与原型链，一文直达本源
2023-09-30 05:54:42
在软件设计的浩瀚世界中，原型与原型链的概念就像两颗耀眼的星星，指引着程序员们在 JavaScript 的广阔天地里扬帆起航。作为一门基于面向对象思想的语言，JavaScript 将原型作为构建对象的基础，而原型链则为对象之间建立起了千丝万缕的联系，共同构成了 JavaScript 的灵魂。
原型与原型链对于 JavaScript 的重要性，就好比地基之于摩天大厦，缺一不可。它们不仅决定了对象的创建方式，也影响着对象的行为和属性的继承方式。可以说，对原型与原型链的理解程度，直接决定了程序员对 JavaScript 的掌握程度。
call、bind 和 new 这三个关键词，则是 JavaScript 中操作原型与原型链的利器。它们可以改变函数的调用方式，从而实现对象之间的调用和属性的继承。可以说，这三个关键词是打开原型与原型链大门的钥匙，掌握了它们，就掌握了 JavaScript 的核心奥义。
本文将带你从底层出发，深入剖析原型与原型链的概念，并结合 call、bind 和 new 关键词的实际应用，让你对 JavaScript 的理解更上一层楼。
1. 原型与原型链：JavaScript 面向对象的基石
在 JavaScript 的世界里，一切皆对象。函数、数组、字符串，甚至连数字都可以看作对象。而对象与对象之间，就通过原型与原型链建立起了联系，构成了一个错综复杂的网络。
原型 ，简单来说，就是对象的模板。当创建一个对象时，JavaScript 会根据对象的原型来创建该对象。这就好比一个模具，根据模具可以复制出无数个相同形状的物体。
而原型链 ，则是原型与原型之间建立的继承关系。每个对象都有一个原型，而这个原型又可能有自己的原型，如此层层递进，就形成了原型链。沿着原型链向上查找，可以找到对象的祖先，从而继承祖先的属性和方法。
2. call、bind 和 new：操作原型与原型链的利器
call、bind 和 new 这三个关键词，是 JavaScript 中用来操作原型与原型链的利器。它们可以改变函数的调用方式，从而实现对象之间的调用和属性的继承。
call() 方法可以改变函数的调用者，也就是改变 this 的指向。当使用 call() 方法调用函数时，可以指定 this 的值，从而让函数在指定的对象上执行。
bind() 方法与 call() 方法类似，但它不会立即执行函数，而是返回一个新的函数。这个新函数的 this 值已经被绑定为指定的对象，因此当调用这个新函数时，this 就指向了指定的对象。
new 关键词可以创建新的对象，并自动调用构造函数。在构造函数内部，可以对新创建的对象进行初始化，并为其添加属性和方法。
3. 结合实例，深入理解原型与原型链
为了加深对原型与原型链的理解，我们来看一个具体的例子。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
const person1 = new Person('John', 30);
const person2 = new Person('Mary', 25);
person1.sayHello(); // Hello, my name is John and I am 30 years old.
person2.sayHello(); // Hello, my name is Mary and I am 25 years old.
在这个例子中，Person 函数是一个构造函数，它用来创建 Person 对象。Person 对象的原型是一个 Person.prototype 对象，这个对象包含了 sayHello 方法。
当创建一个 Person 对象时，JavaScript 会根据 Person.prototype 来创建该对象。这意味着，Person 对象会继承 Person.prototype 上的所有属性和方法。
在上面的例子中，person1 和 person2 是两个 Person 对象。当调用 person1.sayHello() 和 person2.sayHello() 时，JavaScript 会沿着原型链向上查找，找到 sayHello 方法，并执行该方法。
这个例子很好地展示了原型与原型链的作用。Person.prototype 是 Person 对象的原型，person1 和 person2 继承了 Person.prototype 上的 sayHello 方法，从而可以在对象上调用该方法。
4. 总结
原型与原型链是 JavaScript 中最重要的概念之一，理解了它们，才能更好地理解 JavaScript 这门语言。call、bind 和 new 这三个关键词，是 JavaScript 中用来操作原型与原型链的利器。掌握了它们，就可以灵活地操作对象，实现对象之间的调用和属性的继承。
希望这篇文章能帮助你对原型与原型链、call、bind 和 new 关键词有更深入的了解。如果你还有任何疑问，欢迎留言交流。
