JavaScript中的原型与原型链

什么是原型

在JavaScript中，每个对象都有一个特殊的内部属性[[Prototype]]（在大多数浏览器中可以通过__proto__访问），这个属性指向另一个对象，也就是该对象的"原型"。

当我们试图访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript引擎会沿着原型链向上查找，直到找到该属性或者到达原型链的末端（null）。

// 创建一个简单的对象const animal = {  eats: true};// 以animal为原型创建新对象const rabbit = {  jumps: true,  __proto__: animal  // 设置rabbit的原型为animal};// rabbit可以访问animal的属性console.log(rabbit.eats); // trueconsole.log(rabbit.jumps); // true

构造函数与原型

在JavaScript中，函数也是一种对象。每个函数都有一个prototype属性（注意不是__proto__），这个属性在函数作为构造函数使用时特别重要。

function Person(name) {  this.name = name;}// 在原型上添加方法Person.prototype.sayHello = function() {  console.log(`Hello, my name is ${this.name}`);};const john = new Person('John');john.sayHello(); // Hello, my name is John

当使用new操作符调用函数时，会发生以下事情：

创建一个新对象将新对象的[[Prototype]]指向构造函数的prototype属性将构造函数中的this绑定到新对象执行构造函数中的代码如果构造函数没有返回对象，则返回新对象

原型链

原型链是由对象的[[Prototype]]引用构成的链条，当访问一个属性时，JavaScript会沿着这个链条向上查找。

function Animal(name) {  this.name = name;}Animal.prototype.eat = function() {  console.log(`${this.name} eats.`);};function Dog(name, breed) {  Animal.call(this, name);  this.breed = breed;}// 设置Dog.prototype的原型为Animal.prototypeDog.prototype = Object.create(Animal.prototype);Dog.prototype.constructor = Dog;Dog.prototype.bark = function() {  console.log(`${this.name} barks!`);};const myDog = new Dog('Rex', 'Labrador');myDog.eat();  // Rex eats. (来自Animal.prototype)myDog.bark(); // Rex barks! (来自Dog.prototype)

原型相关方法

JavaScript提供了一些方法来操作和检查原型：

const obj = {};const parent = { foo: 'bar' };// 设置原型Object.setPrototypeOf(obj, parent);// 获取原型console.log(Object.getPrototypeOf(obj) === parent); // true// 检查对象是否在原型链上console.log(parent.isPrototypeOf(obj)); // true// 检查对象自身是否拥有某属性console.log(obj.hasOwnProperty('foo')); // falseconsole.log(parent.hasOwnProperty('foo')); // true

现代JavaScript中的类语法

ES6引入了class语法，但它是基于原型的语法糖：

class Animal {  constructor(name) {    this.name = name;  }  eat() {    console.log(`${this.name} eats.`);  }}class Dog extends Animal {  constructor(name, breed) {    super(name);    this.breed = breed;  }  bark() {    console.log(`${this.name} barks!`);  }}const myDog = new Dog('Rex', 'Labrador');myDog.eat();  // Rex eats.myDog.bark(); // Rex barks!

理解原型和原型链对于掌握JavaScript至关重要，它是JavaScript实现继承和共享属性的核心机制。