我都是想到啥写啥,丝毫没有规律。前面聊到箭头函数没有原型,就想到了再整理一篇原型链的。
原型
原型是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
对象的共享方法。文章来源:https://www.toymoban.com/news/detail-611217.html
通过原型链继承,我们可以减少重复的代码,实现代码的重用和简化。同时,当 Product
对象的属性或方法需要修改时,只需要在原型对象上进行修改,继承了该原型链的所有对象都会受到影响。这样可以确保代码的一致性和易维护性。文章来源地址https://www.toymoban.com/news/detail-611217.html
到了这里,关于【每日一个知识点二】原型链的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!