重温Javascript继承机制(4)
作者:瓜瓜 发布时间:2011-07-04 12:17:23
四、”非构造函数”的如何实现继承
比如,现在有一个对象,叫做”MED”–营销体验设计。
var MED = {
aim:'营销体验设计'
}
还有一个对象,叫做”前端开发”。
var WD ={
skill:'html'
}
请问怎样才能让”前端开发”去继承”营销体验设计”,就是说,我怎样才能生成一个”营销体验设计的前端开发”对象?
这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现”继承”。
1、object()方法
Json格式的发明者Douglas Crockford,提出了一个object()函数,可以做到这一点。
function object(o) {
function F() {}
F.prototype = o;
return new F();
}
这个object()函数,其实只做一件事,就是把子对象的prototype属性,指向父对象,从而使得子对象与父对象连在一起。
使用的时候,第一步先在父对象的基础上,生成子对象:
var WD = object(MED);
然后,再加上子对象本身的属性:
WD.skill = 'html';
这时,子对象已经继承了父对象的属性了。
console.log(WD.aim); //营销体验设计
2、浅拷贝
除了使用”prototype链”以外,还有另一种思路:把父对象的属性,全部拷贝给子对象,也能实现继承。
下面这个函数,就是在做拷贝:
function LightCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
//c.uber = p;
return c;
}
使用的时候,这样写:
var WD = LightCopy(MED);
WD.aim = '前端开发';
但是,这样的拷贝有一个问题。那就是,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能。
请看,现在给MED添加一个”技能”属性,它的值是一个数组。
MED.skills = ['‘html’','css','Javascript'];
通过LightCopy()函数,WD继承了MED。
var WD = LightCopy(MED);
然后,我们为WD的”技能”添加一个属性:
WD.skills.push('teamwork');
发生了什么事?MED的”技能”也被篡改了!
console.log(WD.skills); //‘html’,'Javascript','css','teamwork'
console.log(MED.skills); //‘html’,'Javascript','css','teamwork'
所以,LightCopy()只是拷贝基本类型的数据,我们把这种拷贝叫做”浅拷贝”。这是早期jQuery实现继承的方式。
3、深拷贝
所谓”深拷贝”,就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用”浅拷贝”就行了。
function deepCopy(p, c) {
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
return c;
}
使用的时候这样写:
var WD = deepCopy(MED);
现在,给父对象加一个属性,值为数组。然后,在子对象上修改这个属性:
MED.skills = ['‘html’','css','Javascript'];
WD.skills.push('teamwork');
这时,父对象就不会受到影响了。
console.log(WD.skills); //‘html’,'css','Javascript','teamwork' console.log(MED.skills); //‘html’,'css','Javascript'
目前,jQuery库使用的就是这种继承方法。
猜你喜欢
- 问题:无法上传较大的文件“Request 对象 错误 'ASP 0104 : 80004005'”或者上传成功后,找不到文件
- 将SQL Server中所有表的列信息显示出来: SELECT SysObjects.Name as tb_name, SysColumns
- 如何获知用户的IP?<% Dim ValidLog ' 日志变量 Valid
- 目前防采集的方法有很多种,先介绍一下常见防采集策略方法和它的弊端及采集对策: 一、判断一个IP在一定时间内对本站页面的访问次数,如果明显超过
- 直接调用系统的颜色显示在网页上本来是件很好玩滴事,但是,也有个缺点,就是可用的色太少 比如Bindows在它的启动画面一点点应用。=。= 上
- 问:怎样解决mysql连接过多的错误?答:系统不能连接数据库,关键要看两个数据:1、数据库系统允许的最大可连接数max_connection
- 学习一些你已经知道的知识也没有什么坏处,是吧?我知道这可能并不一定非常有意义,但是很多时候我们往往知其然而不知其所以然,这会使得事情出现惊人
- 前言:HTML5和CSS3的时代到来了,新版2011版淘宝网首页已全部使用HTML5,拥抱变化才是王道。为之漫笔翻译的很好,看了一遍后,感觉
- 设计与开发之间本有一线界限,但当时代步入又一个十年,这个线变得更加模糊甚至感觉不到它的存在。使用PS设计网页版面,足矣?或许五年前是吧!现在
- 返回页面的类容,weburl为页面urlFunction GetBytes(weburl) '创建
- 今天交流会上,分享前端的开发经验,有一条虽然很快带过,但是我倒是印象蛮深刻的,就写点小结来分享一下吧。不知道是标准害了大家还是大家害了标准,
- 在Windows vista之前的微软操作系统的地址栏与浏览器的地址栏是一样的,也是面包屑般的自上而下的线性等级形,如果想从D盘跳到C盘是不
- --语 句 功 能--数据操作SELECT --从数据库表中检索数据行和列INSERT --向数据库表添加新数据行DELETE --从数据库
- 如何阻止别人非法链接你网站的图片,防盗链?getimage.asp<% Option ExplicitDim&nb
- 作者: Alan Pearce原文: Multi-Column Layouts Climb Out of the Box地址: http:/
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 5 - Event HandlingMooTool
- 如何使用数据绑定控件实现不换页提交数据?Chunfeng.html' 提交页面< html><
- Session 对象 可以使用 Session 对象存储特定用户会话所需的信息。这样,当用户在应用程序的 Web 页之间跳转时,存储在 Se
- 网页中使用flash可以增强页面的动态交互效果,特别是用flash来制作广告,效果更好。经常使用flash的人,可能就碰到了flash会遮住
- 经常会遇到这样一个情况:浏览器弹出对话框,提示脚本运行时间过长,询问“停止”还是“继续”。那究竟各个浏览器是如何判断在什么时候才弹出此对话框