原型与原型链：理解本质，剖析机制

前端

2023-12-05 06:38:50

认识原型与原型链

在面向对象编程中，原型是对象的行为和属性的集合。它可以被其他对象继承，从而创建新的对象。原型链 是一系列对象，每个对象都有一个指向其原型的指针。当一个对象访问不存在的属性或方法时，它会沿原型链向上查找，直到找到该属性或方法。

原型与类的异同

类是创建对象的模板。它定义了对象的属性和方法。实例是类的具体化。它具有类的所有属性和方法。

原型和类有以下异同：

相同点：
- 原型和类都是用来创建对象的。
- 原型和类都可以包含属性和方法。
不同点：
- 原型是先具体后抽象，而类是先抽象后具体。
- 原型是基于实例创建的，而类是基于原型创建的。
- 原型是通过 “…proto…” 访问的，而类是通过 “new” 创建的。

JavaScript 中的原型与原型链

在 JavaScript 中，每个对象都有一个内部属性 “proto”。这个属性指向该对象的原型。如果一个对象不存在某个属性或方法，它会沿着原型链向上查找，直到找到该属性或方法。

以下代码演示了 JavaScript 中的原型与原型链：

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

var person1 = new Person("John");
person1.sayHello(); // Hello, my name is John

var person2 = new Person("Mary");
person2.sayHello(); // Hello, my name is Mary

在这个例子中，Person 是一个类，它定义了对象的属性和方法。person1 和 person2 是 Person 类的实例。它们都有一个内部属性 “proto”，指向 Person.prototype。当 person1 和 person2 调用 sayHello() 方法时，它们都会沿着原型链向上查找，直到找到该方法。

理解new关键字

在 JavaScript 中，new 关键字用于创建对象。new 关键字会做以下几件事：

创建一个新的对象。
将新对象的原型设置为构造函数的 prototype 属性。
将新对象作为构造函数的 this 参数调用。

以下代码演示了 new 关键字的使用：

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

var person1 = new Person("John");
person1.sayHello(); // Hello, my name is John