专用网站建设,wordpress 博客程序,网站后台发表文章,牙科医院网站推广方案我都是想到啥写啥#xff0c;丝毫没有规律。前面聊到箭头函数没有原型#xff0c;就想到了再整理一篇原型链的。
原型
原型是JavaScript中对象的一个属性#xff0c;它指向另一个对象#xff0c;用于实现继承关系。每个对象都有一个原型属性__proto__#xff0c;它指向它…我都是想到啥写啥丝毫没有规律。前面聊到箭头函数没有原型就想到了再整理一篇原型链的。
原型
原型是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()); // 输出 2000tShirt.updateStock(-10);
console.log(tShirt.stock); // 输出 90在这个例子中我们通过原型链实现了商品对象的继承。基础的 Product 对象定义了共同的属性和方法然后通过 Object.create() 方法基于 Product 对象创建了衣服、鞋子和电子产品等不同类型的对象。每个对象都可以设置自己特定的属性同时也可以调用来自 Product 对象的共享方法。
通过原型链继承我们可以减少重复的代码实现代码的重用和简化。同时当 Product 对象的属性或方法需要修改时只需要在原型对象上进行修改继承了该原型链的所有对象都会受到影响。这样可以确保代码的一致性和易维护性。
