JS原型+原型链轻松掌握

2023-11-06 06:01:17

在JavaScript中，原型和原型链是理解对象行为的重要概念。掌握它们能让你更深入地了解JavaScript的运行机制，编写出更高效、更健壮的代码。

原型的概念

原型是函数的一个属性，它指向一个对象，该对象包含了该函数创建的所有实例的共享属性和方法。换句话说，原型是所有该函数创建的实例的基础。

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

// Person函数的原型是一个对象
Person.prototype = {
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

在这个例子中，Person函数的原型包含一个greet方法，它将打印实例的名字。

原型链

原型链是一个从对象到它原型的链，它允许对象访问其原型中的属性和方法。如果对象中找不到一个属性或方法，它会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的末尾（null）。

const john = new Person('John');

// john.__proto__指向Person.prototype
console.log(john.__proto__ === Person.prototype); // true

// john可以访问Person.prototype中的greet方法
john.greet(); // 输出："Hello, my name is John"

原型继承

原型链允许对象从它们的原型继承属性和方法，这称为原型继承。当创建新对象时，它会自动获得其原型中的所有属性和方法。

const jane = new Person('Jane');

// jane继承了Person.prototype中的greet方法
jane.greet(); // 输出："Hello, my name is Jane"

ES6 Class

ES6中引入了class语法，它提供了一种更简洁的方式来创建对象和定义它们的原型。class本身就是一个函数，其prototype属性指向类的实例的原型。

class Person {
  constructor(name) {
    this.name = name;
  }

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

const john = new Person('John');
john.greet(); // 输出："Hello, my name is John"