Js继承小结

一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象。于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.net/stoyan/javascript-patterns?from_search=9 (该博文作者同样是《Javascript Patterns》一书的作者,效力于Yahoo,是YSlow 的架构者和smush.it的作者),在此,自己做一些小结和笔录以免多次重复学习。

js继承:

/*******继承1:复制父亲对象所有属性-->子对象**********/
function extend(parent, child){
var child = child || {};
for(var prop in parent){
child[prop] = parent[prop];
}
return child;
}

/*******混合继承:从多个对象中继承****************/
function mixInThese(){
var args = arguments,
child = {};
for(var i = 0, len = args.length; i < len; i++){
for(var prop in args[i]){
child[prop] = args[i][prop];
}
}
return child;
}
var cake = mixInThese(

{"oil": 3, "button": 4},

{"weight": 34},

{"tasty": "sweet"});
console.log(cake);

/*************经典继承 原型继承 ES标准推荐 继承方式1***************************/
function inherit(parent, child){
child.prototype = new Parent(); 
}

/**********借用构造函数    继承方式2********/
function Child(){
Parent.apply(this, arguments);
//anything else
}

优点:创建对象的时候,可以传递参数到父亲对象

缺点:没有继承Prototype原型链上的属性

/*****************/

/***********借用构造函数 + 原型继承 继承方式3*****************/
function Child(){
Parent.apply(this, arguments);
}
Child.prototype = new Parent();

/**************父子对象共用同一份prototype*  继承方式4*********************************/
function inherit(parent, child){
child.prototype = child.prototype;
};

优点:父子对象共用同一份prototype

缺点:父子对象共用同一份prototype

/***********只继承prototype上的属性(父子对象不共用同一份prototype) 继承方式5************/
function inherit(parent, child){
function F(){}
F.prototype = new parent();
child.prototype = new F();

child.uber = parent.prototype;

child.prototype.constructor = child;
}

基于原型的继承总结:

1.没有像类(Class-Like)一样的构造函数.

2.对象和对象之间直接通过原型实现继承(而不像其他语言中的类和类之间的继承)。

 
 
 
标签: js继承

Js继承小结的更多相关文章

  1. 老生常谈--Js继承小结

    一直以来,对Js的继承有所认识,但是认识不全面,没什么深刻印象.于是,经常性的浪费很多时间重新看博文学习继承,今天工作不是特别忙,有幸看到了http://www.slideshare.net/stoy ...

  2. js isArray小结

    原文:[转载]js isArray小结 在日常开发中,我们经常需要判断某个对象是否是数组类型的,在js中检测对象类型的常见的方法有几种: 1.typeof操作符.对于Function.String.N ...

  3. JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)

    一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...

  4. js继承

    js继承有5种实现方式: 继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function ...

  5. js继承之call,apply和prototype随谈

    在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...

  6. js继承精益求精之寄生式组合继承

    一.混合/组合继承的不足 上一篇JS继承终于混合继承,认真思考一下,发现其还是有不足之处的: 空间上的冗余:在使用原型链的方法继承父类的原型属性(Animal.prototype)的同时,也在子类的原 ...

  7. js继承实现

    JS实现继承可以分为:对象冒充和原型链继承 其中对象冒充又包括:临时变量,call 和 apply 临时变量方法: function Person(name,sex){ this.name = nam ...

  8. js继承之借用构造函数继承

    我的上一篇文章介绍了,原型链继承模式.但是单纯的原型链模式并不能很好地实现继承. 一.原型链的缺点 1.1 单纯的原型链继承最大的一个缺点,来自于原型中包含引用类型的值. 本来,我们没有通过原型链实现 ...

  9. js继承之原型链继承

    面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...

随机推荐

  1. NET 平台下的插件化开发内核

    .NET 平台下的插件化开发内核(Rabbit Kernel)   每个程序猿都有一个框架梦,曾经在2013年8月15日写过一篇“Koala Framework是什么?我为什么要写这个框架?”的文章, ...

  2. Ejb in action(七)——message与JMS

    我们扩大MDBs学前,我们需要理解message(新闻)与JMS(Java Message Service)的概念. 我们在Java EE中谈论消息,实际上就是意味着实现一个松耦合的过程.系统组件之间 ...

  3. HDU 1256 图片8

    图片8 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  4. PHP 生成唯一激活码

    <?php /** * 从来没有产生一个唯一的激活码 * @return string */ function create_guid($namespace = null) { static $ ...

  5. 关于Office 中的墨迹功能(可作word电子签名)

    原文 关于Office 中的墨迹功能 通过使用 Microsoft Office 2003 中的墨迹功能,可使用 Tablet PC 和 Tablet 笔将手写笔记插入到 Microsoft Offi ...

  6. Ninject.Extensions.

    最近在使用IoC进行一个较复杂的项目进行架构,在IoC的选择上让我很是纠结.首先我不喜欢大量的配置文件进行配置,那简直是噩梦,比学习一门编程语言还痛苦.我喜欢前一段时间看EF的CodeFirst的那种 ...

  7. 2014年辛星PHP教程秋季版第一本即基础知识已经完工

    因为本人还是蛮重视秋季版的,因此一開始就决定要把它做好,因此体系划分的比較具体,如今把它的第一本写作完成,在百度的下载点是:点我去百度 ,它的五十多个实例代码在百度的下载点是:点我下载源代码 ,当然, ...

  8. WEB浏览器与服务器通讯过程

    以访问网页www.baidu.com为例,下面是使用Wireshark捕捉到的数据: 浏览器先发起一个TCP连接,然后发送GET报文给服务器,服务器之后返回一个Response报文. 从服务器端返回时 ...

  9. leetcode[70] Simplify Path

    题目的意思是简化一个unix系统的路径.例如: path = "/home/", => "/home"path = "/a/./b/../../ ...

  10. css技巧--整理(1)

    1.文字描边 -webkit-text-shadow:#be8ef8 2px 0 1px,#be8ef8 0 2px 1px,#be8ef8 -2px 0 1px,#be8ef8 0 -2px 1px ...