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. php rsa 加密、解密、签名、验签

    由于对接第三方机构使用的是Java版本的rsa加解密方法,所有刚开始在网上搜到很多PHP版本的rsa加解密,但是对接java大多都不适用. 以下php版本是适用于对接java接口,java适用密钥再p ...

  2. Sample Page

    This is an example page. It's different from a blog post because it will stay in one place and will ...

  3. DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

    事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...

  4. C#播放流媒体的几种方法

    原文:[转载]C#播放流媒体的几种方法 做视频开发要学的东西真多,不知道如何入门,乱打乱撞,慢慢摸索吧! 首先搭建Windows Meida Server ,方法很简单,试试就会.在这里需要声明的是, ...

  5. HDOJ 4416 Good Article Good sentence

    题解转自:http://blog.csdn.net/dyx404514/article/details/8807440 2012杭州网络赛的一道题,后缀数组后缀自己主动机都行吧. 题目大意:给一个字符 ...

  6. PHP 12 :字符串的操作

    原文:PHP 12 :字符串的操作 本章介绍字符串的操作.之所以要把字符串单独拿出来讲,是因为字符串在每种语言里都是非常重要的.并且也是大家关心的.我们从以下几个方面介绍字符串: 字符串的表现形式. ...

  7. lucene简介 创建索引和搜索初步

    lucene简介 创建索引和搜索初步 一.什么是Lucene? Lucene最初是由Doug Cutting开发的,2000年3月,发布第一个版本,是一个全文检索引擎的架构,提供了完整的查询引擎和索引 ...

  8. Lucene.net入门学习

    Lucene.net入门学习(结合盘古分词)   Lucene简介 Lucene是apache软件基金会4 jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,即它不是一个完整的全 ...

  9. jquery-validate的用法

    默认校验规则 (1)required:true               必输字段(2)remote:"check.php"          使用ajax方法调用check.p ...

  10. 开辟html5和css3学习随笔(2015-3-2)

    1.移动端超出指定行数隐藏并显示省略号 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...