【每日一个知识点二】原型链

爱吃栗子的小单

已于 2023-07-26 16:17:27 修改

阅读量693

点赞数

文章标签： javascript 原型原型链

于 2023-07-26 16:17:10 首次发布

本文链接：https://blog.csdn.net/weixin_40820061/article/details/131936345

版权

我都是想到啥写啥，丝毫没有规律。前面聊到箭头函数没有原型，就想到了再整理一篇原型链的。

原型

原型是JavaScript中对象的一个属性，它指向另一个对象，用于实现继承关系。每个对象都有一个原型属性__proto__，它指向它的原型对象。

隐式原型

在JavaScript中，每个对象（引用类型）都有一个原型属性 __proto__，也称为隐式原型。隐式原型指向创建该对象的构造函数的原型对象。当我们访问一个对象的属性或方法时，如果对象不存在该属性或方法，JavaScript会通过隐式原型链向上查找。

显式原型

每个函数对象都有一个属性 prototype，也称为显式原型。显式原型是一个普通的对象，它被用作创建新对象的原型。当我们使用 new 关键字来调用一个函数对象时，会创建一个新的对象，并将新对象的隐式原型指向函数对象的显式原型。

举个例子，我们定义一个构造函数 Person，并在其原型对象上添加一个方法 sayHello：

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

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

var person = new Person("Alice");
person.sayHello();  // 输出 "Hello, my name is Alice"

我们创建了一个 Person 对象，并调用了 sayHello 方法。当我们创建 person 对象时，它的隐式原型指向 Person 对象的原型对象（即 Person.prototype）。因此，person 对象可以访问和调用 sayHello 方法。

简而言之，隐式原型指向对象的构造函数的原型对象，而显式原型指向函数对象的原型对象。

原型的作用

在JavaScript中，原型主要用于实现对象的属性和方法的继承。通过原型，我们可以将一些通用的属性和方法定义在原型对象中，从而实现多个对象共享这些属性和方法的目的。

一般情况下，我们在以下场景会需要用到原型：

提高性能：原型对象中的方法是可以被所有实例共享的，而不是每个实例都重新创建一次方法。这样可以减少内存占用，提高性能。
实现继承：通过原型链的机制，我们可以实现对象之间的继承关系。子对象的原型对象可以指向父对象，从而继承父对象的属性和方法。
扩展对象：通过原型，我们可以动态地给一个对象添加属性和方法。这样可以在不修改对象本身的情况下，给对象增加新的功能。

举个例子，当处理日期和时间的时候，我们经常会使用Date对象进行操作。但是Date对象提供的方法并不总是满足我们的需求，此时我们可以利用原型来扩展Date对象的功能。

例如，我们想要获取当前日期是一周中的第几天。Date对象本身没有提供这样的方法，但我们可以通过修改Date对象的原型来添加该功能：

Date.prototype.getWeekday = function() {
  var weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  return weekdays[this.getDay()];
};

var currentDate = new Date();
console.log(currentDate.getWeekday());  // 输出当天是星期几

在这个例子中，我们通过修改Date对象的原型，在原型上添加了一个getWeekday方法。这个方法将返回当前日期对应的星期几。这样，我们就可以通过任何一个Date对象上调用getWeekday方法，得到对应的结果。

原型链

JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……

如果一层层地上溯，所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性。也就是说，所有对象都继承了Object.prototype的属性。这就是所有对象都有valueOf和toString方法的原因，因为这是从Object.prototype继承的。

那么，Object.prototype对象有没有它的原型呢？回答是Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。

Object.getPrototypeOf(Object.prototype)  // null

原型链的作用

实现属性和方法的继承：原型链使得对象可以继承其原型对象上的属性和方法，避免了重复定义和维护相同的代码。
共享属性和方法：原型对象上的属性和方法可以被多个对象共享，节省了内存空间。
动态性：在原型链上添加、修改或删除属性和方法，会影响到所有继承了该原型链的对象，可以方便地对所有对象进行统一的修改。

举例

一个常见的业务场景是创建一个基础的对象，然后通过原型链继承该对象来创建更特定的对象，以实现代码的重用和简化。

假设我们在一个电商网站中，有多种类型的商品，如衣服、鞋子和电子产品等。每个商品都有一些共同的属性，比如名称、价格和库存，同时也有一些特定的属性。

我们可以创建一个基础的商品对象 Product，它包含共同的属性和方法，比如价格计算和库存更新。然后，我们通过原型链继承 Product 来创建不同类型的商品对象，每个对象额外拥有自己特定的属性和方法。

// 基础的商品对象
var Product = {
  name: "",
  price: 0,
  stock: 0,
  calculatePrice: function() {
    // 计算价格的逻辑
    return this.price * this.stock;
  },
  updateStock: function(quantity) {
    // 更新库存的逻辑
    this.stock += quantity;
  }
};

// 衣服对象
var Clothes = Object.create(Product);
Clothes.brand = "";
Clothes.size = "";

// 鞋子对象
var Shoes = Object.create(Product);
Shoes.color = "";
Shoes.style = "";

// 电子产品对象
var Electronics = Object.create(Product);
Electronics.type = "";
Electronics.warranty = "";

// 使用示例
var tShirt = Object.create(Clothes);
tShirt.name = "T-Shirt";
tShirt.price = 20;
tShirt.stock = 100;
tShirt.brand = "Nike";
tShirt.size = "M";

console.log(tShirt.calculatePrice());  // 输出 2000

tShirt.updateStock(-10);
console.log(tShirt.stock);  // 输出 90

在这个例子中，我们通过原型链实现了商品对象的继承。基础的 Product 对象定义了共同的属性和方法，然后通过 Object.create() 方法基于 Product 对象创建了衣服、鞋子和电子产品等不同类型的对象。每个对象都可以设置自己特定的属性，同时也可以调用来自 Product 对象的共享方法。

通过原型链继承，我们可以减少重复的代码，实现代码的重用和简化。同时，当 Product 对象的属性或方法需要修改时，只需要在原型对象上进行修改，继承了该原型链的所有对象都会受到影响。这样可以确保代码的一致性和易维护性。