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


Posted in Javascript onAugust 31, 2016

每个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原型的修改与重写(覆盖)差别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
Angular.JS中的this指向详解
May 17 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 #Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 #Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 #Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 #Javascript
原生js实现tab选项卡切换
Mar 23 #Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 #Javascript
Javascript日期格式化format函数的使用方法
Aug 30 #Javascript
You might like
php中取得文件的后缀名?
2012/02/20 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
juqery 学习之四 筛选查找
2010/11/30 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
vue 解决遍历对象显示的顺序不对问题
2019/11/07 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
python私有属性和方法实例分析
2015/01/15 Python
python用match()函数爬数据方法详解
2019/07/23 Python
python matplotlib拟合直线的实现
2019/11/19 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
经典广告词大全
2014/03/14 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
文明倡议书范文
2014/04/15 职场文书
移交协议书
2014/08/19 职场文书
个人作风建设自查报告
2014/10/22 职场文书
2014年人事部工作总结
2014/12/03 职场文书
故宫导游词
2015/01/31 职场文书
谢师宴邀请函
2015/02/02 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书