Javascript 原型与原型链深入详解

2023年6月10日下午5:59 • JavaScript

Javascript 原型与原型链深入详解

原型

在JavaScript中，每一个对象都有一个指向其原型的属性，称之为 __proto__，原型本身也是一个对象。在Javascript中使用函数构造对象时，函数本身也有一个原型属性，称之为 prototype。我们可以使用 Object.getPrototypeOf() 方法实现查找一个对象的原型。比如：

let arr = [1, 2, 3];
let arrProto = Object.getPrototypeOf(arr);
console.log(arrProto); //输出：[object Array]

通过查找到原型，我们可以发现，arr 的原型是一个 Array 对象。

原型链

原型链是基于原型的一个特性。每一个对象都有原型，原型也是对象，也有原型，这样随着原型的递归查找，我们就得到了一个原型链。在Javascript中，我们可以通过以下方式实现查找原型链：

let arr = [1, 2, 3];
let arrProto = Object.getPrototypeOf(arr);
let arrProtoProto = Object.getPrototypeOf(arrProto); //获取原型的原型
console.log(arrProto); // [object Array]
console.log(arrProtoProto); // [object Object], 最终的原型为 Object.prototype

在这个例子中，我们可以看到，arrProto 对象的原型是 Array.prototype，Array.prototype 的原型是 Object.prototype，这就形成了一个原型链。

原型继承

在Javascript中，对象的属性可以继承自它的原型，我们称之为原型继承。在创建一个对象时，我们可以将该对象的原型指向任何一个对象。比如，我们可以通过以下方式实现：

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

let personProto = {
    sayHello:function() {
        console.log(`Hello ${this.name}`);
    }
};

Person.prototype = personProto;

let tom = new Person('Tom');
tom.sayHello(); //输出：Hello Tom

在这个例子中，我们创建了一个 Person 函数以及一个 personProto 对象，然后将 Person.prototype 指向 personProto，这就意味着所有使用 new Person() 创建的对象都将继承 personProto 对象中的属性和方法。

示例说明

示例一

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

Animal.prototype.sayName = function() {
    console.log(`My name is ${this.name}`);
}

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

Dog.prototype = Object.create(Animal.prototype); //继承 Animal的原型
Dog.prototype.constructor = Dog; //重置构造函数为 Dog

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

let dog = new Dog('Buddy', 'Golden');
dog.sayName(); // 输出："My name is Buddy"
dog.bark(); // 输出："Woof!"

在这个例子中，我们创建了一个 Animal 函数，使用 Animal.prototype 创建一个原型，并绑定一个 sayName 方法。然后我们创建了一个 Dog 函数，并调用 Animal.call(this, name) 来实现其属性继承。然后我们使用 Object.create(Animal.prototype) 来创建一个新的 Dog 原型，并继承 Animal.prototype，最后重置构造函数为 Dog。

示例二

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

    sayName() {
        console.log(`My name is ${this.name}`);
    }
}

class Dog extends Animal {
    constructor(name, color) {
        super(name);
        this.color = color;
    }

    bark() {
        console.log('Woof!');
    }
}

let dog = new Dog('Buddy', 'Golden');
dog.sayName(); // 输出："My name is Buddy"
dog.bark(); // 输出："Woof!"

在这个例子中，我们使用ES6的 class 语法创建了一个 Animal 类，和一个 Dog 类，并使用 extends 实现 Dog 对象继承 Animal 类。最后我们创建了一个 Dog 实例并调用其方法。