关于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 相关文章推荐
浅谈javascript的原型继承
Jul 25 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
js实现二级菜单渐隐显示
Nov 03 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 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
2006/12/23 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
基于empty函数的判断详解
2013/06/17 PHP
PHP $_FILES中error返回值详解
2014/01/30 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
Javascript Throttle & Debounce应用介绍
2013/03/19 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
小学生关于梦想的演讲稿
2014/08/22 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
银行转正自我鉴定
2014/09/29 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
高中军训感想
2015/08/07 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
python flask开发的简单基金查询工具
2021/06/02 Python
教你部署vue项目到docker
2022/04/05 Vue.js