JavaScript原型和原型链|极客笔记

JavaScript原型和原型链

JavaScript中的原型和原型链是理解JavaScript对象和继承机制的核心概念。在面向对象编程中，每个对象都有一个原型对象，原型对象又有自己的原型对象，以此类推，形成原型链。本文将详细介绍JavaScript中的原型和原型链，帮助读者更好地理解JavaScript的对象和继承机制。

原型

在JavaScript中，每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象。这个对象就是该函数的原型对象。当我们创建一个函数时，系统会自动为这个函数创建一个prototype对象，并为其添加一个constructor属性，指向该函数本身。我们可以通过函数的prototype属性来访问原型对象。

示例1：创建一个函数并查看其原型对象

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

console.log(Person.prototype);

运行上面的代码，可以看到控制台输出该函数的原型对象：

{ constructor: ƒ }

在这个示例中，我们创建了一个Person函数，并查看了其原型对象，原型对象中只有一个constructor属性，指向Person函数本身。

当我们创建一个对象时，该对象都有一个__proto__属性，指向它的构造函数的原型对象。即对象的原型指向创建该对象的函数的原型对象。

示例2：创建一个对象并查看其原型

let person1 = new Person('Alice', 30);
console.log(person1.__proto__);

运行上面的代码，可以看到控制台输出该对象的原型对象：

{ constructor: ƒ }

在这个示例中，我们通过new关键字创建了一个person1对象，并查看了其原型对象，原型对象同样只有一个constructor属性，指向Person函数本身。

原型链

在JavaScript中，每个对象都拥有一个__proto__属性，该属性指向该对象的原型对象。而原型对象本身也是一个对象，同样有自己的__proto__属性，指向它的原型对象，以此类推，就形成了一个原型链。

示例3：演示原型链

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

Animal.prototype.sayName = function() {
    console.log(`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;

let dog = new Dog('Buddy', 'Golden Retriever');
dog.sayName();

运行上面的代码，可以看到控制台输出：

My name is Buddy

在这个示例中，我们创建了一个Animal构造函数和一个Dog构造函数，Dog构造函数继承了Animal构造函数。我们通过Object.create()方法将Dog函数的原型对象指向Animal函数的原型对象，这样就建立了Dog继承Animal的关系。当我们调用dog.sayName()时，实际上是先查找dog对象自身有没有sayName方法，没有的话会沿着原型链寻找，最终在Animal的原型对象找到了sayName方法并执行。