JavaScript原型与原型链是什么

在JavaScript中，原型（Prototype）和原型链（Prototype Chain）是两个非常重要的概念，它们构成了JavaScript对象继承的基础。理解原型和原型链对于掌握JavaScript的面向对象编程至关重要。

1. 原型（Prototype）

在JavaScript中，每个对象都有一个原型（Prototype），原型是一个对象，它包含了共享的属性和方法。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法为止。

1.1 原型对象

在JavaScript中，每个函数都有一个prototype属性，这个属性指向一个对象，这个对象就是该函数的原型对象。当我们使用new关键字创建一个实例时，这个实例的__proto__属性会指向构造函数的prototype对象。

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

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

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

在上面的例子中，Person函数的prototype属性指向一个对象，这个对象包含了一个sayHello方法。当我们创建person1实例时，person1的__proto__属性指向Person.prototype，因此person1可以调用sayHello方法。

1.2 原型继承

原型继承是JavaScript中实现继承的一种方式。通过原型继承，子类可以继承父类的属性和方法。

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

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

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} barks.`);
};

const dog1 = new Dog('Rex');
dog1.speak(); // 输出: Rex makes a noise.
dog1.bark();  // 输出: Rex barks.

在这个例子中，Dog继承了Animal的属性和方法。通过Object.create(Animal.prototype)，Dog的原型对象指向了Animal的原型对象，从而实现了继承。

2. 原型链（Prototype Chain）

原型链是JavaScript中对象之间通过原型连接起来的一条链。当我们访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到该属性或方法为止，或者到达原型链的顶端（null）。

2.1 原型链的形成

每个对象都有一个__proto__属性，这个属性指向该对象的原型对象。原型对象本身也是一个对象，因此它也有自己的__proto__属性，指向它的原型对象。这样一层一层地连接起来，就形成了原型链。

const obj = {};
console.log(obj.__proto__ === Object.prototype); // 输出: true
console.log(Object.prototype.__proto__); // 输出: null

在这个例子中，obj是一个空对象，它的__proto__属性指向Object.prototype，而Object.prototype的__proto__属性为null，表示原型链的顶端。

2.2 原型链的查找过程

当我们访问一个对象的属性或方法时，JavaScript引擎会按照以下步骤进行查找：

1. 首先查找对象本身是否有该属性或方法。
2. 如果没有，则查找对象的__proto__属性指向的原型对象。
3. 如果原型对象中也没有，则继续查找原型对象的__proto__属性指向的原型对象。
4. 直到找到该属性或方法，或者到达原型链的顶端（null）。

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

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

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

console.log(person1.hasOwnProperty('name')); // 输出: true
console.log(person1.hasOwnProperty('sayHello')); // 输出: false
console.log(person1.__proto__.hasOwnProperty('sayHello')); // 输出: true

在这个例子中，person1对象本身没有sayHello方法，因此JavaScript引擎会沿着原型链向上查找，最终在Person.prototype中找到了sayHello方法。

3. 总结

原型和原型链是JavaScript中实现对象继承的基础。通过原型，我们可以共享属性和方法，减少内存消耗。通过原型链，我们可以实现属性和方法的继承，使得代码更加简洁和可维护。

理解原型和原型链的工作原理，有助于我们更好地掌握JavaScript的面向对象编程，编写出更加高效和优雅的代码。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>