​JavaScript 原型与原型链：深入理解 JavaScript 的核心机制

2023-12-25 19:55:01 浏览数 (1)

前言

JavaScript 是一门非常灵活和强大的编程语言，它的核心机制之一就是原型和原型链。理解 JavaScript 原型和原型链对于成为一名优秀的 JavaScript 开发者是非常重要的。因此在这篇博客中，我将深入探讨 JavaScript 原型和原型链，帮助开发者更好地理解 JavaScript 的核心机制。

正文内容

一、什么是 JavaScript 原型？

JavaScript 原型是一个对象，它包含了一些属性和方法，可以被其他对象继承。每个 JavaScript 对象都有一个原型对象，它是 JavaScript 实现继承的基础。当你创建一个新对象时，它会自动继承它的原型对象的属性和方法。

在 JavaScript 中，原型对象是通过构造函数创建的。当你创建一个函数时，它就有一个原型对象。例如，下面是一个简单的构造函数：

代码语言：js复制
function Person(name, age) {
  this.name = name;
  this.age = age;
}

在这个构造函数中，我们定义了一个名为 Person 的函数，它有两个参数 name 和 age。当你使用 new 运算符创建一个 Person 对象时，它会自动继承 Person 的原型对象。你可以通过 Person.prototype 访问这个原型对象。

代码语言：js复制
let person = new Person('Tom', 20);
console.log(Person.prototype); // 输出 {}
console.log(person.__proto__); // 输出 {}

在这个例子中，我们创建了一个 Person 对象，并打印出了它的原型对象。你会发现它是一个空对象。这是因为我们没有给 Person 的原型对象添加任何属性或方法。

二、什么是JavaScript 原型链？

在 JavaScript 中，每个对象都有一个原型对象。这个原型对象又有自己的原型对象，它们形成了一个原型链。当你访问一个对象的属性或方法时，如果这个对象本身没有这个属性或方法，它会去它的原型对象中查找。如果原型对象中也没有这个属性或方法，它会继续查找原型对象的原型对象，直到找到这个属性或方法或者到达原型链的末尾。

例如，我们可以给 Person 的原型对象添加一个 sayHello 方法：

代码语言：js复制
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}

现在，当你调用 person.sayHello() 时，它会去 person 的原型对象中查找 sayHello 方法。如果找到了，它就会执行这个方法。如果没有找到，它会继续查找原型对象的原型对象，直到找到这个方法或者到达原型链的末尾。

三、JavaScript 原型链的实现方式

在 JavaScript 中，原型链是通过对象的 __proto__ 属性实现的。每个对象都有一个 __proto__ 属性，它指向这个对象的原型对象。例如，我们可以通过 person.__proto__ 访问 person 的原型对象。

当你访问一个对象的属性或方法时，JavaScript 引擎会先查找这个对象本身是否有这个属性或方法。如果有，它就会直接返回。如果没有，它会去这个对象的原型对象中查找。如果原型对象中也没有这个属性或方法，它会继续查找原型对象的原型对象，直到找到这个属性或方法或者到达原型链的末尾。

当你创建一个新对象时，它的原型对象会自动指向它的构造函数的原型对象。例如，当你创建一个 Person 对象时，它的原型对象会自动指向 Person.prototype。

代码语言：js复制
let person = new Person('Tom', 20);
console.log(person.__proto__ === Person.prototype); // 输出 true

当你给一个对象添加一个属性或方法时，它会先查找这个对象本身是否有这个属性或方法。如果有，它就会直接覆盖。如果没有，它会把这个属性或方法添加到这个对象本身。这个过程叫做属性或方法的赋值。赋值后，这个对象就拥有了这个属性或方法。

例如，我们可以给 person 对象添加一个 gender 属性：

代码语言：js复制
person.gender = 'male';
console.log(person.gender); // 输出 male
console.log(Person.prototype.gender); // 输出 undefined

现在，当你访问 person.gender 时，它会先查找 person 本身是否有 gender 属性。由于我们已经给 person 添加了 gender 属性，它会直接返回。如果你访问 Person.prototype.gender，它会返回 undefined，因为我们没有给 Person 的原型对象添加 gender 属性。

四、JavaScript 原型链的应用

JavaScript 原型链有很多应用。其中最常见的应用是继承。在 JavaScript 中，你可以通过原型链来实现继承。例如，你可以创建一个父类和一个子类，让子类继承父类的属性和方法。

下面是一个简单的例子：

代码语言：js复制
function Animal(name) {
  this.name = name;
}

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

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('Woof!');
}

let dog = new Dog('Max', 'Golden Retriever');
dog.sayHello(); // 输出 Hello, my name is Max.
dog.bark(); // 输出 Woof!

在这个例子中，我们定义了一个 Animal 父类和一个 Dog 子类。我们让 Dog 子类继承 Animal 父类的属性和方法。我们通过 Object.create 方法创建了一个新对象，它的原型对象指向 Animal.prototype。然后我们把这个新对象赋值给 Dog.prototype，这样 Dog 子类就可以继承 Animal 父类的属性和方法了。

在 Dog 子类的构造函数中，我们调用了 Animal.call(this, name)，这样 Dog 子类就可以继承 Animal 父类的属性了。然后我们添加了一个 bark 方法，这个方法是 Dog 子类独有的。

五、JavaScript 原型链的注意事项

在使用 JavaScript 原型链时，有一些注意事项需要注意。首先，你应该避免在原型对象中添加可变的数据类型，例如数组和对象。这是因为如果你修改了原型对象中的数组或对象，所有继承这个原型对象的对象都会受到影响。

例如，下面是一个错误的例子：

代码语言：js复制
Person.prototype.hobbies = ['reading', 'swimming'];

let person1 = new Person('Tom', 20);
let person2 = new Person('Jerry', 18);

person1.hobbies.push('running');
console.log(person1.hobbies); // 输出 ['reading', 'swimming', 'running']
console.log(person2.hobbies); // 输出 ['reading', 'swimming', 'running']

在这个例子中，我们给 Person 的原型对象添加了一个 hobbies 属性，它是一个数组。然后我们创建了两个 Person 对象，并修改了其中一个对象的 hobbies 属性。你会发现，另一个对象的 hobbies 属性也被修改了。这是因为它们都继承了 Person 的原型对象，它们共享同一个 hobbies 数组。

为了避免这个问题，你应该在对象本身中定义属性和方法，而不是在原型对象中定义。例如，我们可以把 hobbies 属性放在 Person 对象本身中：

代码语言：js复制
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.hobbies = ['reading', 'swimming'];
}

let person1 = new Person('Tom', 20);
let person2 = new Person('Jerry', 18);

person1.hobbies.push('running');
console.log(person1.hobbies); // 输出 ['reading', 'swimming', 'running']
console.log(person2.hobbies); // 输出 ['reading', 'swimming']

在这个例子中，我们把 hobbies 属性放在 Person 对象本身中，而不是在 Person.prototype 中。这样，每个 Person 对象都有自己的 hobbies 属性，它们不会相互影响。

另一个需要注意的问题是，你应该避免使用 __proto__ 属性。虽然它可以让你直接访问对象的原型对象，但它不是标准的 JavaScript API，不同的浏览器实现可能会有不同的行为。相反，你应该使用 Object.getPrototypeOf 方法来访问对象的原型对象。

例如，下面是一个使用 __proto__ 属性的错误的例子：

代码语言：js复制
let person = new Person('Tom', 20);
console.log(person.__proto__); // 输出 Person {}

在这个例子中，我们使用 __proto__ 属性访问 person 的原型对象。虽然它能够正常工作，但它不是标准的 JavaScript API，不同的浏览器实现可能会有不同的行为。

相反，你应该使用 Object.getPrototypeOf 方法来访问对象的原型对象：

代码语言：js复制
let person = new Person('Tom', 20);
console.log(Object.getPrototypeOf(person)); // 输出 Person {}

在这个例子中，我们使用 Object.getPrototypeOf 方法访问 person 的原型对象。这是标准的 JavaScript API，不同的浏览器实现都会返回相同的结果。

结论

JavaScript 原型和原型链是 JavaScript 的核心机制之一。理解 JavaScript 原型和原型链对于成为一名优秀的 JavaScript 开发者是非常重要的。在以上内容，我们深入探讨了 JavaScript 原型和原型链的概念、实现方式和应用以及注意的问题。希望这篇文章能够帮助你更好地理解 JavaScript 的核心机制。

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！

javascript 2023腾讯·技术创作特训营第四期

0 人点赞