JavaScript 的原型链机制

最新推荐文章于 2024-08-17 21:05:24 发布

你心里

最新推荐文章于 2024-08-17 21:05:24 发布

阅读量2k

点赞数 34

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_43733543/article/details/139605913

版权

JavaScript 的原型链机制是其继承模型的核心概念，它允许对象通过原型链访问和继承其他对象的属性和方法。原型链机制是实现 JavaScript 面向对象编程的基础。

1. 原型和原型链的基本概念

原型对象（prototype）: 每个 JavaScript 对象（除了 null）都有一个与之关联的对象，这个对象就是原型。当一个对象尝试访问一个属性或方法时，如果这个对象没有该属性或方法，JavaScript 引擎会继续在其原型对象中查找。
__proto__ 属性: 这是每个对象都有的隐式属性（非标准，但大多数浏览器支持），指向其构造函数的原型对象。
构造函数的 prototype 属性: 每个构造函数都有一个 prototype 属性，这个属性是一个对象，包含由该构造函数创建的实例共享的属性和方法。

2. 原型链的构建

当一个对象访问一个属性或方法时，JavaScript 引擎会首先在这个对象自身的属性中查找。如果没有找到，它会继续查找该对象的原型对象，依此类推，直到找到该属性或方法，或达到原型链的顶端（即 Object.prototype），如果仍然没有找到，则返回 undefined。

示例

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

Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
alice.sayHello(); // 输出: Hello, my name is Alice

在这个示例中，当调用 alice.sayHello() 时，JavaScript 引擎会首先检查 alice 对象是否有 sayHello 方法。如果没有，它会继续查找 alice.__proto__，即 Person.prototype，并找到 sayHello 方法。

3. 原型链的顶端

所有对象的原型链最终都会指向 Object.prototype，这是原型链的顶端。Object.prototype 本身的原型是 null。

console.log(Object.prototype.__proto__); // 输出: null

4. 原型链的实际应用

继承

通过原型链，JavaScript 实现了对象的继承。一个对象可以通过原型链继承另一个对象的属性和方法。

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

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

function Dog(name) {
    Animal.call(this, name); // 调用父构造函数
}

Dog.prototype = Object.create(Animal.prototype); // 设置原型链
Dog.prototype.constructor = Dog; // 修正构造函数指向

Dog.prototype.bark = function() {
    console.log(`${this.name} is barking`);
};

const dog = new Dog('Buddy');
dog.move(); // 输出: Buddy is moving
dog.bark(); // 输出: Buddy is barking

方法覆盖

子对象可以覆盖从原型链继承的方法，同时保留对父方法的访问。

Dog.prototype.move = function() {
    Animal.prototype.move.call(this); // 调用父方法
    console.log(`${this.name} is running`);
};

dog.move();
// 输出:
// Buddy is moving
// Buddy is running

5. 原型链和性能

尽管原型链提供了强大的继承和代码复用机制，但在长原型链中查找属性和方法会增加性能开销。因此，应该尽量避免过深的原型链，以提升性能。

6. ES6 类语法

ES6 引入了类语法（class），提供了更清晰、更简洁的方式来定义和继承类，但其底层仍然基于原型链机制。

class Animal {
    constructor(name) {
        this.name = name;
    }
    move() {
        console.log(`${this.name} is moving`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
    }
    bark() {
        console.log(`${this.name} is barking`);
    }
    move() {
        super.move();
        console.log(`${this.name} is running`);
    }
}

const dog = new Dog('Buddy');
dog.move(); // 输出: Buddy is moving \n Buddy is running
dog.bark(); // 输出: Buddy is barking