javascript继承的实现
为什么80%的码农都做不了架构师?>>>
继承模式一、
var Parent = function(name){this.name = name || 'parent';
}Parent.prototype = {obj:{a: 1},getName: function(){return this.name;}
}var Child = function(name){this.name = name || 'Child';
}Child.prototype = new Parent()var p = new Parent();var c = new Child();console.log( p.getName() )
console.log( c.getName() )
缺点:子类如果要实现父类构造器里的初始化,需要重写。
模式二、
var Parent = function(name){this.name = name || 'parent';
}Parent.prototype = {obj:{a: 1},getName: function(){return this.name;}
}var Child = function(name){Parent.apply(this, arguments); // 改进点
}Child.prototype = new Parent()var p = new Parent();var c = new Child('child');console.log( p.getName() )
console.log( c.getName() )
缺点:父类构造函数被执行了两次,一次是在子类构造函数中,一次在赋值子类原型时,这是很多余的。
模式三、
var Parent = function(name){this.name = name || 'parent';
}Parent.prototype = {obj:{a: 1},getName: function(){return this.name;}
}var Child = function(name){Parent.apply(this, arguments);
}Child.prototype = Parent.prototype //改进点var p = new Parent();var c = new Child('child');console.log( p.getName() )
console.log( c.getName() )
缺点:子类的修改会改变父类的值。
模式四、
var Parent = function(name){this.name = name || 'parent';
}Parent.prototype = {getName: function(){return this.name;},obj: {a:1}
}var Child = function(){Parent.apply(this, arguments);
}var F = function(){}F.prototype = Parent.prototype;Child.prototype = new F();var p = new Parent('parent');
var c = new Child('child');console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = 2 ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //2
模式五、
var deepClone = function(source,target){source = source || {} ;target = target || {};for(var i in source){if(source.hasOwnProperty(i)){if(typeof source[i] === 'object'){target[i] = (source[i] instanceof Array) ? [] : {};deepClone(source[i],target[i]) ; }else{target[i] = source[i];}}}return target ;
} ;var extend = function(Parent,Child){Child = Child || function(){} ; if(Parent === undefined) return Child ; //借用父类构造函数Child = function(){Parent.apply(this,argument) ;} ; //通过深拷贝继承父类原型 Child.prototype = deepClone(Parent.prototype) ; //重置constructor属性Child.prototype.constructor = Child ;
} ;
转载于:https://my.oschina.net/shyl/blog/625994
javascript继承的实现相关推荐
- JavaScript继承详解(四)
文章截图 - 更好的排版 在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. C ...
- JavaScript继承详解(四) 转
在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. Crockford是Java ...
- Javascript继承机制的设计思想
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
- 浅谈JavaScript继承
前言 关于JavaScript继承相关的定义和方法网上已经有很多解释啦,本菜鸟就不抄抄写写惹人嫌了,本文主要探讨三种基本的继承方式并且给出优化方案. 正文 借助构造函数实现继承 function Pa ...
- 浅谈javascript继承【读javascript设计模式第四章节继承有感】
javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 ...
- 理解JavaScript继承(二)
理解JavaScript继承(二) 5.寄生式继承 function object(o) {function F() {} F.prototype = o; return new F(); }func ...
- 探寻完美 之 JavaScript继承
本文并不想探讨JavaScript的面向对象特性(如果有兴趣,可参看我的<领悟面向对象JavaScript>),也不会涉及全部的面向对象概念,只是试图寻找一个还未被任何人发现的" ...
- 【JavaScript】重温Javascript继承机制
上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...
- [转]JavaScript继承详解
原文地址:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...
- 重温Javascript继承机制
上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...
最新文章
- hibernate动态表名映射
- asp中sub与function的区别
- 【easyui】easyui datagrid加载成功之后选定并获取首行数据
- objective-c 编程总结(第六篇)运行时操作 - 方法交换
- arcgis超级工具密码_浏览器的自动保存密码是如何将我们的密码泄露的?
- JSP教程–最终指南
- 【CodeForces - 289E 】Polo the Penguin and XOR operation (数学,异或,贪心)
- 如何运行没有Root权限的Docker?干货来了!
- ECCV 2018 完整论文集 -- List 下载链接
- Spring核心知识点总结
- ARM产品二十年路线图
- 435. 无重叠区间(JavaScript)
- python在类中创建线程
- 杭州五大湖风景名胜区
- gwas snp 和_GWAS综述(生信文献阅读俱乐部精选)
- AMD OpenCL Programming Guide - OpenCL Architecture
- 全国2016年实施不动产登记 潘石屹预言房价下跌
- 直接通过ODBC读写Excel表格文件 译者:徐景周(原作:Alexander Mikula)
- Python学习笔记——变量(图灵学院)
- java 办公_Java003-协同办公OA