返回

深入理解 JavaScript 原型机制

前端

认识原型对象

JavaScript 中的每个对象都有一个原型对象。原型对象是一个特殊的对象,它包含着该对象的所有属性和方法。当我们访问一个对象的属性或方法时,JavaScript 引擎会首先在该对象中查找,如果找不到,就会沿着原型链向上查找,直到找到该属性或方法为止。

原型链是一个由对象和原型对象组成的链条,它从一个对象开始,一直延伸到原型对象。原型对象是原型链的最后一个对象,它通常是 Object 对象。

创建原型对象

我们可以使用 Object.create() 方法来创建原型对象。例如,我们可以创建一个 Cat 对象的原型对象如下:

const Cat = {
  name: 'Cat',
  age: 0,
  meow: function() {
    console.log('喵喵喵');
  }
};

这个原型对象包含了 Cat 对象的所有属性和方法。

使用原型对象创建对象

我们可以使用原型对象来创建 Cat 对象。例如,我们可以创建一个名为 c1 的 Cat 对象如下:

const c1 = Object.create(Cat);

这个 c1 对象继承了 Cat 原型对象的所有属性和方法。我们可以通过以下方式访问 c1 对象的属性和方法:

console.log(c1.name); // Cat
console.log(c1.age); // 0
c1.meow(); // 喵喵喵

修改原型对象

我们可以修改原型对象来修改所有继承该原型对象的对象。例如,我们可以修改 Cat 原型对象的 age 属性如下:

Cat.age = 1;

这个修改会影响到所有继承 Cat 原型对象的对象。例如,c1 对象的 age 属性也会变成 1。

console.log(c1.age); // 1

原型链

原型链是 JavaScript 中一个非常重要的概念。它允许对象共享属性和方法,从而实现代码的复用和扩展。原型链从一个对象开始,一直延伸到原型对象。原型对象是原型链的最后一个对象,它通常是 Object 对象。

我们可以使用 Object.getPrototypeOf() 方法来获取一个对象的原型对象。例如,我们可以获取 c1 对象的原型对象如下:

const proto = Object.getPrototypeOf(c1);
console.log(proto); // { name: 'Cat', age: 1, meow: function() { ... } }

这个 proto 对象就是 c1 对象的原型对象。它包含了 Cat 对象的所有属性和方法。

总结

原型是 JavaScript 中一个非常重要的概念。它允许对象共享属性和方法,从而实现代码的复用和扩展。原型链从一个对象开始,一直延伸到原型对象。原型对象是原型链的最后一个对象,它通常是 Object 对象。

我们可以使用 Object.create() 方法来创建原型对象。我们可以使用原型对象来创建对象。我们可以修改原型对象来修改所有继承该原型对象的对象。我们可以使用 Object.getPrototypeOf() 方法来获取一个对象的原型对象。