📕 重学JavaScript：你理解原型链吗？

📕 重学JavaScript：你理解原型链吗？

嗨，大家好！这里是道长王jj~ 🎩🧙‍♂️

你知道我们常说的JavaScript中的”对象“是什么吗？

我们在编码过程中经常使用存储很多信息📦。比如说，你可以用一个对象来描述一个人，他有什么名字，多大年纪，会做什么事情等等。

在 JavaScript 中，我们整个编码过程都离不开”对象“，这个看起来简单的且基础的东西，却蕴含着着很多的知识点。也是我们理解原型链非常重要的一个辅助工具🔧。

❓ 原型对象和构造函数有何关系？

我们先来举个例子：

function Person(name, age) {
   
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
   
  console.log("Hello, I'm " + this.name + ", and I'm " + this.age + " years old.");
};

var alice = new Person("Alice", 18);

alice.sayHello(); // Hello, I'm Alice, and I'm 18 years old.

var bob = new Person("Bob", 20);

bob.sayHello(); // Hello, I'm Bob, and I'm 20 years old.

// alice.sayHello === bob.sayHello

首先，我们定义了一个构造函数👷‍♂️，叫做 Person。构造函数就是一个特殊的函数，它可以用来创建对象。这个构造函数接受两个参数：name 和 age。当我们用 new 关键字来调用这个构造函数时，它会给新创建的对象设置两个属性：name 和 age。这两个属性的值就是我们传入的参数。

然后，我们在 Person 的原型对象👥上定义了一个方法，叫做 sayHello。原型对象就是一个包含了很多属性和方法的东西，它可以被所有由 Person 构造函数创建的对象所共享。这个方法会打印出对象的名字和年龄，并且说一句你好。我们用 this 关键字来指代当前调用这个方法的对象。

所以，我们首先就得到了这样一组关系：

graph LR;
    A[Person构造函数] --prototype--> B[原型对象];
    B--constructor--> A;

接着，我们用 new 关键字来实例化👶 Person 构造函数，传入两个参数，创建了两个新的对象，分别叫做 Alice 和 bob。new 关键字会让 JavaScript 帮我们做以下几件事情：

• 创建一个空的对象；
• 把这个空对象的原型对象设置为 Person 的原型对象；
• 把这个空对象作为 this 的值传给 Person 构造函数，并执行它；
• 返回这个空对象（如果 Person 构造函数没有返回其他对象的话）。

所以，Alice 和 bob 这两个对象就有了 name 和 age 这两个属性，也有了 sayHello 这个方法。我们可以调用他们各自的 sayHello 方法，让它打印出自己的名字和年龄。注意，他们调用的是同一个方法。

我们就可以完善这一组关系：

graph LR;
    A[Person构造函数] --prototype--> B[原型对象];
    B--constructor--> A;
    A--new-->C[实例对象];
    C--_proto_-->B

这组关系说明，每个函数都有一个特殊的属性，叫做 prototype。这个属性指向了一个对象，叫做函数的原型对象👥。这个原型对象里面有一些属性和方法，它们可以被所有由这个函数创建的对象所共享。

当你用 new 关键字来调用一个函数时，这个函数就变成了一个构造函数👷‍♂️。它会返回一个全新的对象，叫做实例对象👶。这个实例对象有一个隐藏的属性，叫做 _proto_。这个属性指向了构造函数的原型对象。

❓ 什么又是原型链呢？

原型链是 JavaScript 中的一个非常重要的概念，它可以被形象地理解成由一些原型对象连起来的一条链子，用于表示对象之间的继承关系👩‍👧。在 JavaScript 中，每个对象都有一个隐藏的属性，叫做 _proto_。这个属性指向了这个对象的原型对象👥。如果我们在这个对象上找一个属性或方法，而这个对象本身没有这个属性或方法，那么就会沿着原型链向上找，直到找到这个属性或方法为止😊。

让我们来看一个简单的例子吧😉：

classDiagram
    Object <|-- Person
    Person <|-- p1
    Object : +__proto__
    Object : +constructor
    Person : +__proto__
    Person : +constructor
    p1 : +__proto__
    p1 : +constructor
    Object ..> Object: __proto__
    Person ..> Object: __proto__
    p1 ..> Person: __proto__

在这个例子中，Object 是所有对象的老祖宗👴，Person 是 Object 的孩子👶，p1 是 Person 的孩子👶。当我们创建一个 Person 实例时，它会继承 Object 的所有属性和方法。如果我们在 Person 实例上找一个属性或方法，而这个实例本身没有这个属性或方法，那么就会沿着原型链向上找，直到找到这个属性或方法为止。原型链最后会的原型对象是Object，Object最终会指向null 即原型链的终点。

💌 番外：如何判断原型上有没有这个属性

• 对象的 hasOwnProperty() 来检查对象自身中是否含有该属性
• 使用 in 检查对象中是否含有某个属性时，如果对象中没有但是原型链中有，也会返回 true

// 定义一个对象
var obj = {
   
  name: "Bing",
  age: 10
};

// 定义一个构造函数
function Person(name, age) {
   
  this.name = name;
  this.age = age;
}

// 给Person的原型添加一个属性
Person.prototype.gender = "male";

// 创建一个Person的实例
var p = new Person("Tom", 20);

// 使用hasOwnProperty()来检查对象自身中是否含有该属性
console.log(obj.hasOwnProperty("name")); // true
console.log(obj.hasOwnProperty("gender")); // false
console.log(p.hasOwnProperty("name")); // true
console.log(p.hasOwnProperty("gender")); // false

// 使用in检查对象中是否含有某个属性时，如果对象中没有但是原型链中有，也会返回true
console.log("name" in obj); // true
console.log("gender" in obj); // false
console.log("name" in p); // true
console.log("gender" in p); // true

🎉 你觉得怎么样？这篇文章可以给你带来帮助吗？如果你有任何疑问或者想进一步讨论相关话题，请随时发表评论分享您的想法，让其他人从中受益。🚀✨