关于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 相关文章推荐
jquery中this的使用说明
Sep 06 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
vue-cli如何快速构建vue项目
Apr 26 Javascript
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
如何用RxJS实现Redux Form
Dec 29 Javascript
vue视图不更新情况详解
May 16 Javascript
Vue表单控件数据绑定方法详解
Feb 05 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
vue style width a href动态拼接问题的解决
Aug 07 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
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
javascript的事件描述
2006/09/08 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
深入解析Python中的上下文管理器
2016/06/28 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
Python多线程原理与用法详解
2018/08/20 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
体育教师个人的自我评价
2014/02/16 职场文书
财务会计专业求职信
2014/06/09 职场文书
大学计划书范文800字
2014/08/14 职场文书
学生偷窃检讨书
2014/09/25 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
政协委员个人总结
2015/03/03 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
Python实现日志实时监测的示例详解
2022/04/06 Python