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

这篇具有很好参考价值的文章主要介绍了【每日一个知识点二】原型链。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

原型

原型是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中,原型主要用于实现对象的属性和方法的继承。通过原型,我们可以将一些通用的属性和方法定义在原型对象中,从而实现多个对象共享这些属性和方法的目的。

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

  1. 提高性能:原型对象中的方法是可以被所有实例共享的,而不是每个实例都重新创建一次方法。这样可以减少内存占用,提高性能。

  2. 实现继承:通过原型链的机制,我们可以实现对象之间的继承关系。子对象的原型对象可以指向父对象,从而继承父对象的属性和方法。

  3. 扩展对象:通过原型,我们可以动态地给一个对象添加属性和方法。这样可以在不修改对象本身的情况下,给对象增加新的功能。

举个例子,当处理日期和时间的时候,我们经常会使用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

原型链的作用

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

举例

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

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

我们可以创建一个基础的商品对象 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 对象的属性或方法需要修改时,只需要在原型对象上进行修改,继承了该原型链的所有对象都会受到影响。这样可以确保代码的一致性和易维护性。文章来源地址https://www.toymoban.com/news/detail-611217.html

到了这里,关于【每日一个知识点二】原型链的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包