ITPub博客

首页 > 应用开发 > Javascript > 好程序员web前端培训分享Javascript中原型属性

好程序员web前端培训分享Javascript中原型属性

原创 Javascript 作者:好程序员IT 时间:2019-04-01 15:32:05 0 删除 编辑

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

  1 、 理解指针

  2 、 理解原型

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

  以下为详细内容:

  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 对象的实例时,就完成了原型链继承。

  注:

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

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


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913892/viewspace-2639991/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
欢迎关注公众号:好程序员特训营 web前端教程分享 723729549 大数据教程分享 703503210

注册时间:2019-03-20

  • 博文量
    539
  • 访问量
    338209