JavaScript中的原型和原型链解释

前言

在学习原型和原型链之前，需要先掌握什么是构造函数和实例对象：

• 构造函数：在JavaScript中，每个对象都有一个原型（prototype），它是一个对象，其中包含对象的属性和方法。构造函数是用来创建新对象的函数，每个构造函数都有一个原型对象。

  • 构造函数创建新对象的过程：
    • 创建一个新的空对象
    • 将新对象的原型设置为构造函数的原型对象（即将新对象的 __proto__ 属性指向构造函数的 prototype 属性）
    • 将构造函数中的 this 指向新对象
    • 执行构造函数中的代码，初始化新对象的属性和方法
    • 返回新对象

• 实例对象：由构造函数创建的对象被称为实例对象。

  代码示例：

  // 定义一个名为 Person 的构造函数
  function Person(name, age) {
    // 将 this 指向新对象，并初始化属性 name 和 age
    this.name = name;
    this.age = age;
  }
  
  // 向 Person 的原型对象中添加一个名为 sayHello 的方法
  Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
  }
  
  // 创建一个名为 person1 的新对象，通过构造函数 Person 实例化
  const person1 = new Person('Alice', 25);
  
  // 调用 person1 对象原型链上的 sayHello 方法，输出 "Hello, my name is Alice"
  person1.sayHello();
  

原型对象

• 定义：

  原型对象是包含共享属性和方法的对象，它是由构造函数创建的，并且所有实例对象都可以访问原型对象中的属性和方法。可以使用 Object.create() 方法来创建一个新的对象并将其原型设置为另一个对象(通俗来说就是继承)。

  • 代码演示

// 定义一个 Animal 构造函数
function Animal(name) {
  this.name = name;
}

// 给 Animal 的原型对象添加 eat 方法
Animal.prototype.eat = function(food) {
  console.log(`${this.name}吃${food}`);
}
const cat = new Animal('小花')
// 使用 Object.create() 方法创建一个新对象，并将其原型设置为 Animal 的原型对象
const dog = Object.create(Animal.prototype);
// 设置新对象的属性值
dog.name = "小黄";
cat.eat('猫粮'); // 输出 "小花吃猫粮"
// 调用新对象继承自原型对象的方法
dog.eat("狗粮"); // 输出 "小黄吃狗粮"

原型链

• 定义：

  当访问一个对象的属性或方法时，JavaScript引擎会首先查找对象本身是否具有该属性或方法。如果对象没有该属性或方法，则它会在对象的原型上查找，如果还是找不到，则继续在原型的原型上查找，直到找到该属性或方法或到达原型链的末尾Object.prototype。（Object.prototype.__proto__指向的是null。）

• __proto__和prototype有什么区别:

  • prototype主要用于函数定义和实例继承, __proto__主要用于对象原型的访问和继承。简单来说就是prototype用于函数使用，__proto__用于对象使用。
  • __proto__ 属性并不是标准的 JavaScript 属性，它是一种非标准的方式，仅在部分浏览器中得到支持。在实际开发中，建议使用标准的 Object.getPrototypeOf() 方法来获取对象的原型。

• 代码示例：

  // 定义 Person 构造函数
  function Person(name) {
    this.name = name;
  }
  
  // 定义 Person 原型对象
  Person.prototype.sayHello = function() {
    console.log(`你好啊！我的名字是 ${this.name}`);
  };
  
  // 定义 Student 构造函数
  function Student(name, major) {
    // 使用 call 方法继承 Person，将 this 指向 Student
    Person.call(this, name);
    this.major = major;
  }
  
  // 使用 Object.create 方法继承 Person 的原型对象
  Student.prototype = Object.create(Person.prototype);
  
  // 重置 Student 的构造函数
  Student.prototype.constructor = Student;
  
  // 定义 Student 原型对象
  Student.prototype.sayMajor = function() {
    console.log(`我学的专业是 ${this.major}`);
  };
  
  // 创建 Student 实例
  const s = new Student('小明', '计算机科学');
  s.sayHello(); // 输出 "你好啊！我的名字是小明"
  s.sayMajor(); // 输出 "我学的专业是计算机科学"