JS原型与原型链学习笔记

 一、原型的概念

在JavaScript中，每个对象（除了 null ）都有一个原型（prototype）。原型是一个对象，它包含了共享的属性和方法。当你创建一个对象时，这个对象会自动拥有一个指向原型的内部属性 __proto__。

可以通过以下方法来访问一个对象的原型：

1. Object.getPrototypeOf(obj)：获取一个对象的原型。
2. obj.__proto__：直接访问对象的原型属性。

   function Person(name) {
     this.name = name;
   }
   
   Person.prototype.sayHello = function() {
     console.log("Hello, my name is " + this.name);
   };
   
   var person1 = new Person("Alice");
   person1.sayHello(); // 输出：Hello, my name is Alice
   
   // 此时 person1 的原型是 Person.prototype
   // 如果我们尝试访问一个不存在于 person1 对象上的属性，JavaScript会沿着原型链向上查找
   

二、显式原型与隐式原型的关系

在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性被称为函数的显式原型。

而每个对象都有一个内部属性 __proto__，这个属性被称为对象的隐式原型。

显式原型和隐式原型之间的关系可以用一个简单的等式来表示：

函数的 prototype === 对象的 __proto__

也就是说，一个函数的 prototype 属性指向的对象就是实例化该函数所创建的对象的 __proto__ 属性所指向的对象。这样就建立了显式原型和隐式原型之间的关系。

当你创建一个函数时，它的 prototype 属性会指向一个空对象，这个空对象有一个指向 Object.prototype 的 __proto__。而当你通过这个函数来创建一个新的对象时，这个对象的 __proto__ 就指向了该函数的 prototype。

举个例子来说明显式原型和隐式原型的关系：

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

// Person 函数的 prototype 指向一个空对象
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

var person1 = new Person("Alice");

// person1 的 __proto__ 指向了 Person.prototype
// 这样 person1 就可以继承 Person.prototype 上的方法

在上面的例子中，Person.prototype 是 person1 的隐式原型，当我们创建 person1 对象时，它的 __proto__ 就指向了 Person.prototype。这样 person1 就可以继承 Person.prototype 上的方法。

三、原型链的概念

原型链是 JavaScript 中用来实现对象之间继承和属性共享的一种机制。在 JavaScript 中，每个对象都有一个指向原型的内部属性 __proto__，通过原型链，对象可以沿着原型链向上查找属性和方法，直到找到为止。

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

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

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

// 设置 Student 的原型为 Person 的实例
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

var student1 = new Student("Alice", 10);
student1.sayHello(); // 输出：Hello, my name is Alice

// 此时 student1 继承了 Person.prototype 上的 sayHello 方法
// 当调用 student1.sayHello() 时，JavaScript会沿着原型链向上查找到 sayHello 方法

四、原型和原型链的作用

原型的主要作用是实现对象之间的属性继承和共享。当你访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到为止。这种机制使得 JavaScript 中的对象可以共享原型对象上的属性和方法，从而实现代码的重用和继承。