深入理解原型链与继承

JavaScript原型链与继承 - 全面理解#

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8TnOvR9c-1646581166992)(https://my-storage-bucket.oss-cn-hangzhou.aliyuncs.com/FGyVDZIV%2BCDjV%2FUEpg%2FXk%2FLm%2Fcu_R1Ia0lbPwFLJqTVOrSg)]

JavaScript中prototype和__proto__属性之间的区别

prototype：

• prototype属性是构造函数的属性。
• 它是所有实例共享的属性和方法的集合。
• 对prototype属性的修改将影响所有实例。

proto：

• __proto__属性是对象的属性。
• 它指向对象的原型对象。
• 对__proto__属性的修改将影响该对象及其原型链上的所有对象。

构造函数与原型对象之间的关系

构造函数：

• 构造函数是创建对象的函数。
• 构造函数的prototype属性指向原型对象。

原型对象：

• 原型对象是所有实例共享的属性和方法的集合。
• 原型对象是构造函数的prototype属性指向的对象。

函数实例与原型对象之间的关系

函数实例：

• 函数实例是使用构造函数创建的对象。
• 函数实例的__proto__属性指向原型对象。

原型对象：

• 原型对象是所有实例共享的属性和方法的集合。
• 原型对象是构造函数的prototype属性指向的对象。

示例：

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('John', 30);
const person2 = new Person('Jane', 25);

person1.sayHello(); // Hello, my name is John and I am 30 years old.
person2.sayHello(); // Hello, my name is Jane and I am 25 years old.

在这个示例中，Person是构造函数，Person.prototype是原型对象，person1和person2是函数实例。person1和person2的__proto__属性都指向Person.prototype。因此，person1和person2都可以访问Person.prototype中的sayHello()方法。

原型链

原型链是JavaScript中查找属性和方法的链条。当JavaScript引擎试图访问一个对象的属性或方法时，它会从该对象开始，然后沿着原型链向上查找，直到找到该属性或方法。

示例：

const person = {
  name: 'John',
  age: 30
};

person.sayHello(); // TypeError: person.sayHello is not a function

在这个示例中，person对象没有sayHello()方法。然而，Person.prototype对象有sayHello()方法。因此，JavaScript引擎沿着原型链向上查找，找到了Person.prototype对象，并调用了sayHello()方法。

继承

继承是面向对象编程中的一种机制，它允许一个对象获取另一个对象的属性和方法。在JavaScript中，继承可以通过原型链实现。

示例：

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const student1 = new Student('John', 30, 'Harvard University');

student1.sayHello(); // Hello, my name is John and I am 30 years old.
student1.goToSchool(); // I am going to Harvard University.

在这个示例中，Student构造函数继承了Person构造函数。这意味着Student对象具有Person对象的所有属性和方法。此外，Student对象还具有自己的属性和方法，例如school和goToSchool()。

原型链和继承是JavaScript中两个重要的概念。理解这两个概念对于理解JavaScript中的面向对象编程至关重要。