关于javascript原型的修改与重写(覆盖)差别详解
更新时间：2016年08月31日 09:18:10 投稿：jingxian
下面小编就为大家带来一篇关于javascript原型的修改与重写(覆盖)差别详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
每个JavaScript函数都有prototype属性(javascript对象没有这个属性)，这个属性引用了一个对象，这个对象就是原型对象。javascript允许我们修改这个原型对象。
修改有2种方式：
方式1：在原有的原型对象上增加属性或者方法
function Person()
{
}
Person.prototype.add = function(){
alert(this.name);
};
Person.prototype.name = "aty";
var p1 = new Person();
p1.add();//aty
方式2：重写(覆盖)原型对象
function Person()
{
}
Person.prototype = {
add : function(){
alert(this.name);
},
name : "aty"
}
var p2 = new Person();
p2.add();//aty
可以看到上面这2种方式都可以修改原型，那他们的差别究竟是什么呢？到底哪种方式才是推荐的的做法呢？
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();//person
animal.say();//Uncaught TypeError: undefined is not a function
如果是先创建对象，然后再修改原型，那么如果采用方式1，已经创建的对象能够正确访问修改后的原型；如果采用方式2，已经创建的对象无法访问到修改后的原型。从这个角度来看，显然方式1比方式2更好。为什么会这样呢？
function Person()
{
}
function Animal()
{
}
var person = new Person();
var animal = new Animal();
alert(person.__proto__ === Person.prototype);//true
alert(animal.__proto__ === Animal.prototype);//true
// 修改原型
Person.prototype.say = function(){
alert("person");
}
// 修改原型
Animal.prototype = {
say : function(){
alert("person");
}
}
alert(person.__proto__ === Person.prototype);//true
alert(animal.__proto__ === Animal.prototype);//false
很显然这与java中"修改引用"和"修改引用指向的对象"很相似，效果也是一样的。
以上这篇关于javascript原型的修改与重写(覆盖)差别详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇js最简单的双向绑定实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了JS获取数组中出现次数最多及第二多元素的方法,涉及javascript针对数组的遍历、排序、判断、查询等相关操作技巧,需要的朋友可以参考下2017-10-10
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。这篇文章主要为大家详细介绍了Web Uploader文件上传插件使用方法，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要为大家详细介绍了JavaScript Ajax实现异步通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要给大家介绍了关于利用10行js代码实现滚动公告效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。2017-12-12
这篇文章主要介绍了JS简单实现移动端日历功能的方法,涉及javascript针对日期与时间的操作及显示相关技巧,需要的朋友可以参考下2016-12-12
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。下面这篇文章主要给大家介绍了利用three.js如何绘制地球、飞机与轨迹的效果，文中给出了详细的示例代码，需要的朋友们可以参考借鉴，下面来一起看看吧。2017-02-02
这篇文章主要给大家介绍了关于如何用JavaScript实现功能齐全的单链表的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-02-02
JsDoc Toolkit 是一个把js描述格式化成文档的工具。开发者只需按JsDoc的规范写好注释就可以很方便导出文档。它是google 推荐的 JsDoc生成工具。2011-02-02
本文将提供两种方式保存图片，大家可以根据喜欢自由选择2012-11-11
最新评论