JavaScript 原型链详解

JavaScript 原型链详解

JavaScript的原型链是实现对象继承的一种机制。每个对象都有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链。

以下是对原型链的详细解释，附带代码示例：

1. 对象原型

每个JavaScript对象都有一个指向其原型对象的内部链接。

let obj = {};
console.log(obj.__proto__ === Object.prototype); // true

2. 构造函数、原型对象和实例之间的关系

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

Person.prototype.sayHello = function() {
    console.log("Hello, I'm " + this.name);
};

let person1 = new Person("Alice");
let person2 = new Person("Bob");

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true

person1.sayHello(); // "Hello, I'm Alice"
person2.sayHello(); // "Hello, I'm Bob"

3. 原型链

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

Animal.prototype.makeSound = function() {
    console.log("Some generic animal sound");
};

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

// 设置Dog的原型为Animal的一个实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

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

let myDog = new Dog("Buddy");

myDog.makeSound(); // "Some generic animal sound"
myDog.bark(); // "Woof!"

console.log(myDog instanceof Dog); // true
console.log(myDog instanceof Animal); // true
console.log(myDog instanceof Object); // true

4. 属性查找过程

当我们试图访问一个对象的属性时，JavaScript 会首先在对象自身上查找该属性。如果没找到，就会继续在该对象的原型上查找，然后是原型的原型，以此类推，直到找到一个名字匹配的属性或到达原型链的末尾。

function Grandparent() {
    this.grandproperty = "Grandparent's property";
}

function Parent() {
    this.parentproperty = "Parent's property";
}

Parent.prototype = new Grandparent();

function Child() {
    this.childproperty = "Child's property";
}

Child.prototype = new Parent();

let child = new Child();

console.log(child.childproperty); // "Child's property"
console.log(child.parentproperty); // "Parent's property"
console.log(child.grandproperty); // "Grandparent's property"

5. 使用 Object.create() 创建对象

let animal = {
    makeSound: function() {
        console.log("The animal makes a sound");
    }
};

let dog = Object.create(animal);
dog.bark = function() {
    console.log("Woof!");
};

dog.makeSound(); // "The animal makes a sound"
dog.bark(); // "Woof!"

理解原型链对于深入理解 JavaScript 的对象系统和继承机制非常重要。它是 JavaScript 实现面向对象编程的核心机制之一。