In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-05 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
这篇文章主要介绍"怎么理解Javascript中原型属性",在日常操作中,相信很多人在怎么理解Javascript中原型属性问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"怎么理解Javascript中原型属性"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
1、 理解指针
要理解JAVASCRIPT中的原型,先理解指针,在C/C++中,会提到指针,其实,指针不应该属于C/C++的专利,上篇文章中,提到的引用类型(也是很多面向对象语言中的数据类型的叫法),就是指针。
C/C++中对指针的解释:指针就是地址。地址为何物?
地址:是计算机对内存每个存储单元的管理方式。在计算机的内存中,存储着若干数据,计算机的CPU是如何读取内存中的数据的?
计算机的每个存储单元都有一个编号,就像到超市存包时,每个存包的格子都有一个编号,这个编号就是地址,内存的地址。超市每个格子为什么要有编号,目的就是为了方便服务员进行查找(根据编号进行查找),计算机每个存储单元为什么会有一个编号,目的也是为了CPU查找内存。
01
如果某个内存中直接存储的是数据,则这种数据是基本类型的数据,如果某个内存中存储的是其它内存的编号(数据),那么这种数据就叫引用类型的数据。
2、 理解原型
a) 原型(属性)的概念
JAVASCRIPT中的函数也是对象(如果不懂函数也是个对象,请百度JAVASCRIPT中函数是功能完整的类),每个函数都有一个原型(prototype)属性,这个属性是指针类型。原型属性是对象类型,所以,也可以叫原型对象,原型就是模子,模型。函数何来原型,其实理解原型(模型)更应该用构造函数来理解会更好。
构造函数是用来构造实例的,每次用new运算符调用构造函数产生一个实例时,模型就会起作用。就像我们要造一个塑料制品(如:杯子,电脑显示器的外壳,打印机的外壳等),都有一个模具,只要是同一个模具做出来的物体,都非常相似。所以,百度上对模具的解释:模具的俗称。常用于比喻具有大量相似点的两个或多个人或者事物。
b) 原型模式创建对象(把构造函数和原型模式合在一起)
用同一个构造函数构造的实例,具有很多的共同点(共同的属性或者函数),这些共同点就是很多书籍描述的"所有实例共享的属性和方法"。这些共同点就是用prototype属性进行维护的。具体的做法就是:所有实例共享的属性和方法用prototype属性进行表示。
如:
function Person(id,name,sex){
//在构造函数里写的是每个实例特有的属性(属性值不一样)
this.id =id;
this.name = name;
this.sex = sex;
}
//所有人的国籍都是中国,国籍属性就用prototype来表示
Person.prototype.country = "中国";
//所有人吃的逻辑都一样。所以,吃的函数也用prototype来表示
Person.Prototype.eat = function(str){
alert(this.name+"在吃"+str+",天在看……");
}
var p1 = new Person("007", "乐乐", "女");
var p2 = new Person("008", "宝宝", "男");
Console.log(p1.country);//中国
Console.log(p2.country); //中国
p1和p2两个实例的country属性值都是中国,因为它们两个是一个构造函数实例化出来的(一个模子"刻"出来的)。
如下是示意图,其中带箭头的线表示指向。
02
图中可以看出:
1)、在Person构造函数的prototype属性中有个constructor属性,指向了构造函数本身。constructor属性到底有何用,大家先把它save到大脑中,后面给大家讲解。
2)、两个实例p1和p2指向了Person构造函数的prototype属性,跟Person构造函数没有直接关系。
3)、两个实例p1和p2都有[[prototype]]属性。实例靠着 [[prototype]]属性找到它所对应构造函数的原型,也是靠它来找到,原型中的属性的。注意, [[prototype]]属性不能直接在代码中使用。
c) 原型(类型的)属性和实例(类型的)属性
每个实例特有的属性和方法存放在实例所在内存区域,也叫实例属性,如以上例中的id,name,sex属性。所有实例共享的属性和方法,都在原型(prototype)对应的内存区域,也叫原型的属性,如上例中的country。
i. 原型(类型的)属性变成实例(类型的)属性
这里有点疑惑,随着时间的推移,有的对象的原型属性的值会发生变化?
如:宝宝年轻时,觉得俄罗斯的美女多,决定定居俄罗斯了。即p2的country(国籍)的值为俄罗斯。那该如何是好,改还是不改?改了会不会影响其它对象的country属性的值。不改,又不能满足需求。看来,JAVASCRIPT在这方面还是考虑到了。可以改,而且不会影响其它对象的属性值。
还有,如果出现了实例属性和原型属性重名的情况,用实例来访问该属性时,到底访问的是实例属性还是原型属性。这个JAVASCRIPT中解决了。
如何解决上面的问题的。在JAVASCRIPT中,当给原型属性赋值时,在对应实例中会增加了一个同名的实例属性,然后把值赋给实例属性,而原型属性的值不受影响。当访问该属性时,先在实例属性中寻找,如果找不到,再在原型属性中找。
如以下代码:
P2.country = "俄罗斯";
执行时,内存会变成如下:
03
在p2的实例中增加一个country实例属性,内容为"俄罗斯"(图中红色的框里)。这样,代码p1.country依然去找实例属性的值"中国"。而p2.country先在实例属性中找country,找到了,就不用去原型属性中去找了。即,当实例访问属性时,会先在实例的内存中去寻找,如果找不到就会到原型的内存中去寻找。
ii. 删除实例(类型的)属性
随着宝宝年龄的增长,对美女没有了兴趣,而且觉得还是在自己的国家好,又想回来。即p2.country的值为"中国",这时候是可以利用原型里的属性值,怎么办?没事,使用delete p2.country就会把p2的实例属性country删除掉。
放心吧,delete是不能删除掉原型的属性的。
3、 继承时原型的理解(原型链)
原型链是ECMAScript中实现继承的一种方式。如果不懂继承,请先百度,理解继承的概念。
原型继承的基本思想是让原型属性(对象)指向另外一个类型的的实例。
如:
父对象:人
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
}
Person.prototype.eat = function(str){
alert(this.name+"在吃"+str);
}
子对象:程序员
function Programmer(languages){
this.languages = languages;
}
//此句话使用原型实现了继承,子对象Programmer的原型属性指向了父对象Person的实例。
Programmer.prototype = new Person("008", "宝宝", "20");
Programmer.prototype.writeCode=function(){
alert(this.name+"一边努力地写着代码,一边想着'多写代码,多挣钱'");
}
从图中可以看出,子对象Programmer拥有了父对象的属性(id,name,age)和方法(eat)。自己特有的属性languages和方法writeCode()。成功完成了继承。
特别要注意,子对象完成了继承关系后,再给子对象的原型中增加属性和方法。即,先写代码Programmer.prototype = new Person("008", "宝宝", "20"); 再写代码:
Programmer.prototype.writeCode=function(){
alert(this.name+"一边努力地写着代码,一边想着'多写代码,多挣钱'");
}
否则,当子对象的prototype(原型)属性的指向发生变化后,原来在prototype(原型)属性中所写属性和方法就会丢失。
原型链继承:当B对象的原型属性指向了A对象的实例,而C对象的原型属性指向B对象的实例时,就完成了原型链继承。
到此,关于"怎么理解Javascript中原型属性"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.