html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

关于javascript原型的修改与重写(覆盖)差别详解_javascript技巧_

[ ] 已经帮助:人解决问题

每个JavaScript函数都有prototype属性(javascript对象没有这个属性),这个属性引用了一个对象,这个对象就是原型对象。javascript允许我们修改这个原型对象。bx3HTML5中文学习网 - HTML5先行者学习网

修改有2种方式:bx3HTML5中文学习网 - HTML5先行者学习网

方式1:在原有的原型对象上增加属性或者方法bx3HTML5中文学习网 - HTML5先行者学习网

function Person(){}Person.prototype.add = function(){	alert(this.name);};Person.prototype.name = "aty";var p1 = new Person();p1.add();//aty

方式2:重写(覆盖)原型对象bx3HTML5中文学习网 - HTML5先行者学习网

function Person(){}Person.prototype = {	add : function(){		alert(this.name);	},	name : "aty"}var p2 = new Person();p2.add();//aty

可以看到上面这2种方式都可以修改原型,那他们的差别究竟是什么呢?到底哪种方式才是推荐的的做法呢?bx3HTML5中文学习网 - HTML5先行者学习网

function Person(){}function Animal(){}var person = new Person();var animal = new Animal();// 修改原型Person.prototype.say = function(){	alert("person");}// 修改原型Animal.prototype = {	say : function(){		alert("person");	}}person.say();//personanimal.say();//Uncaught TypeError: undefined is not a function

如果是先创建对象,然后再修改原型,那么如果采用方式1,已经创建的对象能够正确访问修改后的原型;如果采用方式2,已经创建的对象无法访问到修改后的原型。从这个角度来看,显然方式1比方式2更好。为什么会这样呢?bx3HTML5中文学习网 - HTML5先行者学习网

 bx3HTML5中文学习网 - HTML5先行者学习网

function Person(){}function Animal(){}var person = new Person();var animal = new Animal();alert(person.__proto__ === Person.prototype);//truealert(animal.__proto__ === Animal.prototype);//true// 修改原型Person.prototype.say = function(){	alert("person");}// 修改原型Animal.prototype = {	say : function(){		alert("person");	}}alert(person.__proto__ === Person.prototype);//truealert(animal.__proto__ === Animal.prototype);//false

 很显然这与java中"修改引用"和"修改引用指向的对象"很相似,效果也是一样的。bx3HTML5中文学习网 - HTML5先行者学习网

以上这篇关于javascript原型的修改与重写(覆盖)差别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。bx3HTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助