关于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 Animation实现CSS3动画示例介绍
Aug 14 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
JavaScript中Function详解
Feb 27 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
js读取本地文件的实例
Dec 22 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
小程序如何支持使用 async/await详解
Sep 12 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小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
Js获取事件对象代码
2010/08/05 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
vue.js的安装方法
2017/05/12 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python对列表排序的方法实例分析
2015/05/16 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
WxPython建立批量录入框窗口
2019/02/27 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
Python递归实现打印多重列表代码
2020/02/27 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
网上蛋糕店创业计划书
2014/01/24 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
毕业设计致谢语
2015/05/14 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
python字符串常规操作大全
2021/05/02 Python
Nginx四层负载均衡的配置指南
2021/06/11 Servers
Python IO文件管理的具体使用
2022/03/20 Python