揭秘原型与原型链的JS运作原理

2023-09-09 11:05:43

JS 原型是什么？

在 JavaScript 中，每个对象都有一个原型对象，原型对象是一个特殊的对象，它包含了对象的属性和方法。对象的原型对象可以通过 __proto__ 属性访问，该属性指向了对象的原型对象。

// 创建一个对象
const obj = {};

// 访问对象的原型对象
console.log(obj.__proto__);

输出结果：

[Object: Object]

__proto__ 属性指向了一个 Object 对象，这是所有 JavaScript 对象的默认原型对象。

原型链是什么？

原型链是指对象的原型对象形成的链条，它从对象的原型对象开始，一直向上追溯到 Object 对象。每个对象都有一个原型对象，并且每个原型对象都有自己的原型对象，如此递归下去，直到最终到达 Object 对象。

// 创建一个对象
const obj = {};

// 访问对象的原型对象
console.log(obj.__proto__);

// 访问对象的原型对象的原型对象
console.log(obj.__proto__.__proto__);

输出结果：

[Object: Object]
[Object: null]

可以看出，obj.__proto__.__proto__ 为 null，这表明原型链的末端是 Object 对象。

原型继承

原型继承是一种 JavaScript 的继承机制，它允许一个对象继承另一个对象的属性和方法。原型继承是通过原型链实现的，当一个对象访问一个不存在的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法。

// 创建一个构造函数
function Person(name) {
  this.name = name;
}

// 在构造函数中添加一个方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// 创建一个对象
const person = new Person('John');

// 调用对象的 sayHello 方法
person.sayHello();

输出结果：

Hello, my name is John

在这个例子中，person 对象继承了 Person 构造函数的 sayHello 方法，这是通过原型链实现的。当 person 对象调用 sayHello 方法时，JavaScript 会沿着原型链向上查找，找到 Person 构造函数的 sayHello 方法，并执行该方法。