(四)、JavaScript原型、原型对象、原型链之间的作用关系

为感谢大家的支持，特发福利红包（支F宝口令红包），点击前往领取：Gitee

JavaScript中的原型、原型对象和原型链是密不可分的概念，它们之间构成了对象继承的基础。下面我将详细介绍它们之间的作用关系：

原型对象是原型的实体

原型对象是一个实际存在的对象，用于存储属性和方法。当创建一个函数时，系统会自动创建一个原型对象并赋值给函数的prototype属性。

原型是指向原型对象的引用

原型是函数的一个属性，它指向原型对象的引用。通过原型，我们可以访问原型对象中的属性和方法。当调用函数中未定义的属性时，JavaScript会沿着原型链逐级查找，直到找到该属性或者查找到Object.prototype为止。

原型链是原型对象之间的连接

原型链是原型对象之间的连接，每个原型对象都有一个指向父级原型对象的指针，即Prototype属性。当查找某个属性时，如果当前原型对象上不存在该属性，JavaScript会沿着原型链往上查找，直到找到该属性或者查找到Object.prototype为止。这种查找方式就构成了原型链。

原型链实现了对象的继承

通过原型链，我们可以实现对象的继承。当我们创建一个子类时，它的原型对象指向父类的实例，从而实现了父类的属性和方法的继承。

下面是一个简单的示例，展示了原型、原型对象和原型链之间的关系：

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

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name + ", and I'm " + this.age + " years old.");
};

var john = new Person("John", 30);

john.sayHello(); // 输出：Hello, I'm John, and I'm 30 years old.

console.log(john.hasOwnProperty("name")); // 输出：true
console.log(john.hasOwnProperty("sayHello")); // 输出：false

console.log(Object.getPrototypeOf(john) === Person.prototype); // 输出：true
console.log(Object.getPrototypeOf(Person.prototype) === Object.prototype); // 输出：true
console.log(Object.getPrototypeOf(Object.prototype) === null); // 输出：true

在这个示例中，我们创建了一个 Person 函数作为构造函数，并在它的原型对象上添加了一个方法 sayHello。然后我们通过 new 操作符创建了一个 john 对象，并调用了它的 sayHello 方法。在访问 john 对象的属性时，它会先查找自身是否有该属性，然后会沿着原型链查找 Person.prototype 对象，最终查找到了 Object.prototype 对象。同时，我们也可以使用 Object.getPrototypeOf 方法来查看对象的原型是否正确。

总之，原型、原型对象和原型链是JavaScript中非常重要的概念，它们构成了对象继承的基础。了解它们之间的作用关系，对于深入理解JavaScript的面向对象编程非常有帮助。

为方便广大前端技术爱好者，整合了前端技术相关知识和资源，且有很多福利可以领取：Gitee

如有转载需求，请联系：Gitee