一篇文章让你搞懂JavaScript 原型和原型链

作为网站的作者，我很高兴为您提供JavaScript原型和原型链的完整攻略。下面是几个关键点，可以帮助您更好地理解原型和原型链：

1. 什么是原型？

JavaScript 中的每个对象都有一个 prototype 属性，该属性指向该对象的原型。原型是一个对象，它包含属性和方法，作为对象的模板。当您创建一个新对象时，它会继承原型中的属性和方法。原型可以理解为对象之间的一种关系，因此对象可以通过这种关系共享属性和方法。

2. 原型链是如何工作的？

JavaScript 中的每个对象都有一个 [[Prototype]] 属性，指向其原型。当您调用一个对象的属性或方法时，如果该对象本身没有这个属性或方法，则会沿着原型链查找，直到找到该属性或方法为止。

原型链是由一个对象的原型所连接而成的链式结构。当您在一个对象上调用属性或方法时，如果该对象没有该属性或方法，则会向上遍历原型链，直到找到该属性或方法为止。如果遍历到了原型链的顶端仍没有找到该属性或方法，则返回 undefined。

3. 如何创建对象的原型？

您可以使用构造函数或对象字面量来定义对象的原型。举个例子，您可以使用构造函数创建一个原型，如下所示：

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

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

var john = new Person('John');
john.sayHello();

在这个例子中，我们创建了一个名为 Person 的构造函数，它包含一个 name 属性和一个 sayHello 方法。我们将 sayHello 方法添加到 Person 的原型上，以便所有通过 Person 构造函数创建的对象都可以访问该方法。

您也可以使用对象字面量来创建原型，如下所示：

var person = {
  name: '',
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
}

var john = Object.create(person);
john.name = 'John';
john.sayHello();

在这个例子中，我们使用对象字面量创建了一个名为 person 的原型，它包含一个 name 属性和一个 sayHello 方法。我们使用 Object.create 方法基于该原型创建了一个新对象 john，并将 name 属性设置为 'John'。我们可以调用 john.sayHello() 方法，它将打印出 Hello, my name is John。

示例说明

为了更好地理解原型和原型链的工作原理，我们可以看一下以下两个示例：

示例 1：函数的原型和实例的原型

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

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

var john = new Person('John');

console.log(john.hasOwnProperty('name'));     // true
console.log(john.hasOwnProperty('sayHello')); // false

在这个示例中，我们创建了一个名为 Person 的构造函数，它包含一个 name 属性和一个 sayHello 方法。我们将 sayHello 方法添加到 Person 的原型上，以便所有通过 Person 构造函数创建的对象都可以访问该方法。我们创建了一个名为 john 的 Person 对象，然后分别使用 hasOwnProperty 方法检查 john 是否具有 name 属性和 sayHello 方法。由于 name 属性是 john 的实例属性，因此它返回 true，而由于 sayHello 方法是 Person 的原型属性，因此它返回 false。

示例 2：原型继承

var person = {
  name: '',
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
}

var student = Object.create(person);
student.studentId = '';

student.study = function() {
  console.log('Studying...');
}

var john = Object.create(student);
john.name = 'John';
john.studentId = '12345';

john.sayHello();
john.study();

在这个示例中，我们使用对象字面量创建了一个名为 person 的原型，它包含一个 name 属性和一个 sayHello 方法。接下来，我们使用 Object.create 方法基于 person 创建了一个新对象 student，并在 student 上添加了一个 studentId 属性和一个 study 方法。最后，我们基于 student 对象创建了一个名为 john 的新对象，并设置了 name 和 studentId 属性。我们可以调用 john.sayHello() 和 john.study() 方法来打印出相关的消息，这些方法是从 person 和 student 原型继承而来的。