星空网 > 软件开发 > Java

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)); //truealert(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

  上面这段代码可见,即使对原型对象属性的修改发生在实例创建的后面,boy实例亦然共享了Person.prototype.hobby.

  但是,这种情况仅仅发生在原型对象属型的修改,当对原型对象属性进行完全重写时,实例的创建必须放在原型对象属性重写的后面,否则会出错。

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

   再回到“屏蔽”这一问题上,我们前面了解到了创建实例对象的属性(与原型对象中的某一属性重名)会屏蔽掉原型对象的该属性,但不影响其他实例对象。这里有一个错误,这个情况只适用于基本数据类型,当属性的值引用类型时,会出现一个大问题,看如下代码。

function Person(){}        Person.prototype={      first_name:"guo",      hair_color:"black",      friends:["Nick","John"],      city:"zhengzhou",      act:function(){alert("eatting");}    };    var boy=new Person();    boy.friends.push("Mike");    var girl=new Person();    alert(boy.friends);  //Nick,John,Mike    alert(girl.friends); //Nick,John,MIke

  可见,上面这句话不适用了,原因是friends是存在于原型对象中的,而不是boy中,所以他的修改会影响到这个环境。(我们可以通过boy.frindes=[]来创建一个boy实例的属性)那么,我们就需要引入组合使用构造函数模式与原型模式。

 

function Person(hair_color,city){						this.hair_color=hair_color;			this.city=city;			this.friends=["John","Nick"];		}		Person.prototype={			constructor:Person,			first_name:"guo",			act:function() {								alert("eatting");			}		};		var boy=new Person("black","zhengzhou");		var girl=new Person("red","shenyang");		boy.friends.push("Nick");		alert(girl.friends);		alert(boy.friends);

  该模式是目前ECMAScript中使用最广泛,认同最高的创建自定义类型的方法,甚至可以作为一种默认模式。

  但是对于从事其他面向对象语言的程序员来说,这样的模式显得很怪异,为了将所有的信息都封装到构造函数中,动态原型模式出现了。动态模式主要是通过一个if语句来判断是否需要对原型对象进行初始化,以达到节省资源的目的。

  此外还有稳妥构造模式,是为了适应没有共享属性和不使用this的情况。

 

 

    

 




原标题:javaScript中的原型

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

下了tiktok看不了:https://www.goluckyvip.com/tag/82008.html
tiktok独立ip搭建:https://www.goluckyvip.com/tag/82009.html
给大家分享下:https://www.goluckyvip.com/tag/8201.html
能运行tiktok的外力:https://www.goluckyvip.com/tag/82010.html
tiktok赚佣金:https://www.goluckyvip.com/tag/82011.html
tiktok发布时间:https://www.goluckyvip.com/tag/82012.html
携程旅游网折扣优惠最新攻略(携程旅游网更佳折扣优惠):https://www.vstour.cn/a/411227.html
深圳到西安自驾路线攻略 深圳到西安自驾最佳路线:https://www.vstour.cn/a/411228.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流