转行学前端的第 45 天，从显式原型和隐式原型理解 ECMAScript

2024-01-13 02:42:14

在转行前端的第 45 天，我决定深入理解 ECMAScript 中的原型世界。原型是面向对象编程中一个非常重要的概念，它可以帮助我们理解对象是如何继承属性和方法的。

在 ECMAScript 中，每个函数在创建之后都会拥有一个名为 prototype 的属性，这个属性指向函数的原型对象。这个原型对象包含了该函数的所有属性和方法，并且这些属性和方法可以被该函数的所有实例继承。

显式原型和隐式原型是 ECMAScript 中原型的两种形式。显式原型是通过 Function.prototype.bind 方法显式创建的，而隐式原型是通过 new 操作符隐式创建的。

显式原型的使用场景通常是当我们想要创建一个新的对象，并且这个对象需要继承另一个对象的属性和方法时。例如，我们可以通过以下代码显式创建一个新的对象：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person = new Person('John');
person.greet(); // Hello, my name is John

在这个例子中，Person 函数的 prototype 属性指向一个包含 greet 方法的原型对象。当我们通过 new 操作符创建一个新的 Person 对象时，这个对象会自动继承原型对象中的 greet 方法。

隐式原型的使用场景通常是当我们想要创建一个新的函数，并且这个函数需要继承另一个函数的属性和方法时。例如，我们可以通过以下代码隐式创建一个新的函数：

function Parent() {
  this.name = 'Parent';
}

Parent.prototype.greet = function() {
  console.log(`Hello, I am ${this.name}`);
};

function Child() {
  Parent.call(this);
}

Child.prototype = Object.create(Parent.prototype);

const child = new Child();
child.greet(); // Hello, I am Parent