原型和原型链傻傻分不清？一篇搞定！

前端

2023-03-30 11:35:52

原型与原型链：JavaScript 面向对象编程的基础

JavaScript 语言中两个至关重要的概念原型和原型链，它们赋予了 JavaScript 面向对象编程的强大功能。

什么是原型？

原型就是一个包含可供其他对象继承的属性和方法的对象。每个 JavaScript 对象都拥有一个原型，可以是另一个对象或 null。

想象一下原型的作用就像一个模具：它定义了对象的基本特性，可以被其他对象复用和修改。

什么是原型链？

原型链就是通过原型的引用而形成的链接。它允许对象访问其父对象（原型）以及祖先对象中的属性和方法。

就好比一个对象家族树：每个对象都可以追溯到它的父对象，直至根源。通过原型链，对象可以继承自其父类和祖先类的功能。

创建原型的两种方式

在 JavaScript 中，创建原型的有两种常用方式：

使用构造函数： 构造函数是一个用来创建新对象的特殊函数。它创建的对象的原型就是构造函数的 prototype 属性。
使用 Object.create() 方法： 这个方法接收一个原型对象，并创建一个新对象，其原型就是指定的原型对象。

代码示例

// 使用构造函数创建原型
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 给 Person 原型添加方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 使用构造函数创建新对象
const john = new Person('John Doe', 30);
john.sayHello(); // 输出: "Hello, my name is John Doe and I am 30 years old."

// 使用 Object.create() 创建原型
const person = {
  name: 'John Doe',
  age: 30
};

const student = Object.create(person);
student.school = 'Harvard University';

console.log(student.name); // 输出: "John Doe"
console.log(student.age); // 输出: "30"
console.log(student.school); // 输出: "Harvard University"