javaScript中的原型解析【推荐】

时间: 作者:所支

  

[javaScript,原型]javaScript中的原型解析【推荐】

  

最近在学习javaScript,学习到js面向对象中的原型时,感悟颇多。若有不对的地方,希望可以指正。

  

  

js作为一门面向对象的语言,自然也拥有了继承这一概念,但js中没有类的概念,也就没有了类似于java中的extends,所以,我觉得js中的继承主要依赖于js中的原型(链)。

  

  

那么,原型是什么呢?我们知道js中函数亦是一种对象,当我们创建一个函数时,其实这个函数也就默认的拥有了一个属性叫做prototype,这个属型叫做原型属性,他是一个指针,指向了这个函数的原型对象,这个原型对象有一个默认的属性叫做constructor,这个属型指向了拥有protptype属型的函数。

  
  

  
  
  function Person(){}  Person.prototype={  // constructor:Person;  first_name:"guo",  hair_color:"black",  city:"zhengzhou",  act:function(){alert("eatting");}  };
  
  

以这个为例,我们先创建了一个函数Person,这个函数默认的有一个属性prototype,指向Person.propttype这个对象,这个对象有一个默认的属性constructor(),Person.prototype.constructor--->Person.(其实此处默认的是指向Object,后面会做指正)  

  

当我们通过构造函数创建了实例后会怎么样呢?

  

  
  
  function Person(){}  Person.prototype={  first_name:"guo",  hair_color:"black",  city:"zhengzhou",  act:function(){alert("eatting");}  };  var boy=new Person();  var girl=new Person();  
  
  

在这时,我们要知道,js中的构造函数与函数的区别便是这个new关键字,使用new操作符的函数便是一个构造函数。当我们创建了Person的实例对象把它保存在boy,girl时,这两个实例对象会生成一个默认的属性叫做_proto_(在ECMAScript5中可用[[prototype]]表示),这个属型指向了构造函数的原型对象,也就是boy._proto_--->Person.prototype(与构造函数毫无关系)。此时,boy或者girl可以通过点来调用原型对象中的属型,此时要知道,boy,girl共享了原型对象的属型。我们可以通过isProtptypeOf()或者object.getPrototypeOf()(这个函数的返回值为原型对象,也就是_proto_的值)来验证上述结论。

  

  
  
  alert(Person.prototype.isPrototypeOf(boy)); //true  alert(Object.getPrototypeOf(boy).first_name);  //"guo"  
  
  

此时,我们可以再做进一步验证,若在实例中创建了一个与原型对象属性重名的属性会怎么样呢?

  

  
  
  var boy=new Person();  var girl=new Person();  boy.hair_color="red";  alert(boy.hair_color);  //red  alert(girl.hair_color); //black  alert(Object.getPrototypeOf(boy).hair_color);  //black  
  
  

由此可见,实例中声明的重名属性会屏蔽的原型对象中的属性,但也仅仅时覆盖,不会对原型对象的属型造成影响(Object.getPrototypeOf(boy).hair_color==black),也不会对其他共享原型对象属型的实例对象产生影响(girl.hair_color==black)。与此同时,可以使用delete操作符删除实例对象声明的属性来撤销掉屏蔽效果。我们可以使用hasOwnProperty()来验证一个属型是存在于实例的(true),还是存在于原型对象的(false)。

  

  
  
  alert(boy.hasOwnProperty("hair_color")); //true
  
  

可以使用Object.keys()来枚举属性。

  

  
  
  var key=Object.keys(Person.prototype);  alert(key);  
  
  

学习了这些,我们会发现,使用上面的写法来声明原型对象会出现一个问题,constructor不再指向Person了,这与我们说的原型对象的constructor属性默认指向含有prototype属性的函数背道而驰,这是因为:每创建一个函数会自动创建一个prototype对象,这个对象会默认创建constructor。所以,此处我们的本质是对默认的prototype进行了重写,因此新的consrtuctor也变成了指向Object函数,不再指向Person函数。若constructor真的很重要,那么需要写上constructor:Person.

  

  

之后,我们需要知道原型的动态性,改变原型对象中的属性会反应到实例中,不管实例的创建在原型对象的属型改变前面或者后面  
  

  
  
  function Person(){}  Person.prototype={  first_name:"guo",  hair_color:"black",  city:"zhengzhou",  act:function(){alert("eatting");}  };  var boy=new Person();  Person.prototype.hobby="basketball";  var girl=new Person();  alert(boy.hobby); //basketball  
                    
(责任编辑:admin)
				

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | js代码 | jQuery特效 | 其他代码 | 关于我们

Copyright © 2010-2019 菲娱国际平台 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 菲娱国际平台