千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:首页 > 关于学院 > 技术论坛  >  正文

HTML5技术分享 Javascript中原型属性

时间:2017-03-09 16:17:42     来源:千锋教育 作者:千锋

  本文将从以下三个方面讲解原型属性

  1、 理解指针

  2、 理解原型

  3、 用原型的方式完成继承

  以下为详细内容:

  1、 理解指针

  要理解JAVASCRIPT中的原型,先理解指针,在C/C++中,会提到指针,其实,指针不应该属于C/C++的专利,上篇文章中,提到的引用类型(也是很多面向对象语言中的数据类型的叫法),就是指针。

  C/C++中对指针的解释:指针就是地址。地址为何物?

  地址:是计算机对内存每个存储单元的管理方式。在计算机的内存中,存储着若干数据,计算机的CPU是如何读取内存中的数据的?

  计算机的每个存储单元都有一个编号,就像到超市存包时,每个存包的格子都有一个编号,这个编号就是地址,内存的地址。超市每个格子为什么要有编号,目的就是为了方便服务员进行查找(根据编号进行查找),计算机每个存储单元为什么会有一个编号,目的也是为了CPU查找内存。

图片1.png

  如果某个内存中直接存储的是数据,则这种数据是基本类型的数据,如果某个内存中存储的是其它内存的编号(数据),那么这种数据就叫引用类型的数据。

  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属性值都是国内,因为它们两个是一个构造函数实例化出来的(一个模子“刻”出来的)。

  如下是示意图,其中带箭头的线表示指向。

图片2.png

  图中可以看出:

  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 = “俄罗斯”;

  执行时,内存会变成如下:

图片3.png

  在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+"一边努力地写着代码,一边想着‘多写代码,多挣钱’");

  }

图片4.png

  从图中可以看出,子对象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对象的实例时,就完成了原型链继承。

  注:

  1、此篇文章可以结合JAVASCRIPT中创建对象的几种方式进行学习。如果再能结合上篇文章《对比引用类型与基本类型》就会更好

  2、此篇文章只是为了理解prototype属性,所以,很多的注意点并没有涉及。作者更希望大家学一点,理解一点,而不是大而全。而且学习是循序渐进的。先把prototype属性理解了,再去关注注意点。

相关文章

  • 北京天丰利校区(总部)地址:北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2、3层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋3楼
    咨询电话: 0755-23015275/23015546-801(硅谷) 0755-86660670-801(大学城)
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训、好程序员
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990 021-65233829-609
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训、好程序员
  • 郑州校区地址:郑州市二七区航海中路60号海为科技园C区10层、12层
    咨询电话:0371-55191750
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:027-59313371
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:400-811-9990 028-83178771
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85363390
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:400-811-9990 0571-86893632
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层801
    咨询电话:0532-80911190
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990 023-68883009
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513210
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号 科技创新城19号楼B座五楼
    咨询电话:400-811-9990/0451-87173191
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 南京校区地址:南京市建邺区应天大街780号应天智汇产业园弘辉园1幢2楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱