jQuery-源码阅读，JavaScript原生继承方式与jQuery中的继承

JavaScript中继承方法有以下几种：

1.原型链继承：

function Book (name,author){this.name=name;this.author=author;}Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};function JavaScript(){}JavaScript.prototype=new Book("JavaScript","Nicholas");var js1=new JavaScript();var js2=new JavaScript();js1.tell();//Book:JavaScript Author:Nicholasjs2.tell();//Book:JavaScript Author:Nicholas

可以发现，原型链继承有一个问题，那就是父类中的私有属性，会因为父类作为子类原型构建原型链，使得子类所有实例所共享。当我们通过一个实例修改共享属性时，其他实例也将受到影响：

function Book (name,author){this.name=name;this.author=[author];
}
Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};
function JavaScript(){}
JavaScript.prototype=new Book("JavaScript","Nicholas");
var js1=new JavaScript();
var js2=new JavaScript();
js1.author.push("C.Zakas");
js2.tell();//Book:JavaScript Author:Nicholas,C.Zakas

但是当你直接为实例中属性赋值时，是在实例中重新定义了一个对应属性，而不是在修改原型中属性：

        function Book (name,author){this.name=name;this.author=author;}Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};function JavaScript(){}JavaScript.prototype=new Book("JavaScript","Nicholas");var js1=new JavaScript();var js2=new JavaScript();js1.author="C.Zakas";//并不是js1没有影响js2，而是在js1中创建了新author属性console.log(js1.hasOwnProperty("author"));//trueconsole.log(js2.hasOwnProperty("author"));//falsejs1.tell();//Book:JavaScript Author:C.Zakas js2.tell();//Book:JavaScript Author:Nicholas

2.构造函数继承：

       function Book (name,author){this.name=name;this.author=author;}Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};function JavaScript(){Book.apply(this,arguments);}var js1=new JavaScript("JavaScript","Nicholas");var js2=new JavaScript("JavaScriopt","C.Zakas");console.log("js1:"+js1.author+" js2:"+js2.author);//js1:Nicholas js2:C.Zakasjs1.tell();//Uncaught TypeError: js1.tell is not a functionjs2.tell();//Uncaught TypeError: js2.tell is not a function

构造函数继承，可以使每个子类实例有一份自己的属性，但是无法找到父类原型中的函数。

3.组合继承：

        function Book (name,author){this.name=name;this.author=author;}Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};function JavaScript(){Book.apply(this,arguments);}JavaScript.prototype=new Book();var js1=new JavaScript("JavaScript","Nicholas");var js2=new JavaScript("JavaScriopt","C.Zakas");console.log("js1:"+js1.author+" js2:"+js2.author);//js1:Nicholas js2:C.Zakasjs1.tell();//Book:JavaScript Author:Nicholasjs2.tell();//Book:JavaScriopt Author:C.Zakasconsole.log(js1.tell===js2.tell);//true

组合继承使得每个子类实例，既可以保存一份自己的属性，又可以共享同一个函数。

4.寄生组合继承：

        function Book (name,author){this.name=name;this.author=author;}Book.prototype.tell=function(){console.log("Book:"+this.name+" Author:"+this.author);};function JavaScript(){Book.apply(this,arguments);}JavaScript.prototype=Object.create(Book.prototype);JavaScript.prototype.constructor=JavaScript;var js1=new JavaScript("JavaScript","Nicholas");var js2=new JavaScript("JavaScriopt","C.Zakas");console.log("js1:"+js1.author+" js2:"+js2.author);//js1:Nicholas js2:C.Zakasjs1.tell();//Book:JavaScript Author:Nicholasjs2.tell();//Book:JavaScriopt Author:C.Zakasconsole.log(js1.tell===js2.tell);//true

由以上分析可以看出，JavaScript中原生的继承方式各有利弊，在jQuery中选择了另一种继承方式，拷贝继承。jQuery的拷贝继承分为两种：深拷贝和浅拷贝。默认为浅拷贝。其实现请见：http://blog.csdn.net/qiqingjin/article/details/50761517。

jQuery-源码阅读，JavaScript原生继承方式与jQuery中的继承相关推荐

【Flink】Flink 源码阅读笔记（18）- Flink SQL 中的流和动态表
1.概述转载:Flink 源码阅读笔记(18)- Flink SQL 中的流和动态表
Darknet源码阅读【吐血整理，持续更新中】
github地址 https://github.com/BBuf/Darknet Darknet源码阅读 Darknet是一个较为轻型的完全基于C与CUDA的开源深度学习框架,其主要特点就是容易安装, ...
jQuery源码分析系列（一）初识jQuery
一个工厂 (function(global, factory){"use strict"// operation_1 })(typedef window !== "und ...
通过jQuery源码学习javascript（三）
序承接上两篇继续写下去.我尽量把我明白的地方给大家说清楚.有些大家的提问我也有点搞不明白,如果有人能解答,再好不过了. 疑问第一篇中有位博友提出了以下的问题,我也不太明白,如果有明白的,能否告知一 ...
jQuery源码阅读3— bulidFragment( )
jQuery的buildFragment函数,主要是将传入的HTML代码用document.createDocumentFragment转变成文档碎片,具体细节如下图: 图片来源于jQuery技术内幕 ...
Jquery源码中的Javascript基础知识（三）
这篇主要说一下在源码中jquery对象是怎样设计实现的,下面是相关代码的简化版本: 1 (function( window, undefined ) { 2 // code 定义变量 3 jQuery ...
Nginx源码阅读：共享内存ngx_shm_t和它的组织方式ngx_shm_zone_t、ngx_list_t
Nginx源码阅读:共享内存ngx_shm_t和它的组织方式ngx_shm_zone_t.ngx_list_t 一.Nginx中共享内存的结构图二.Nginx中实现共享内存的部分 1.共享内存配置信 ...
[转] jQuery源码分析-如何做jQuery源码分析
jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...
jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准附上每一章的源码注释分析 :https://git ...

jQuery-源码阅读，JavaScript原生继承方式与jQuery中的继承

jQuery-源码阅读，JavaScript原生继承方式与jQuery中的继承相关推荐

最新文章

热门文章