javascript 继承学习心得总结(javascript继承原理)

推荐整理分享javascript 继承学习心得总结(javascript继承原理)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js继承的三种方式,js继承如何实现,js 继承原理,js继承的三种方法,js继承的三种方法,javascript中继承,javascript继承原理,js继承的三种方式,内容如对您有帮助，希望把文章链接给更多的朋友！

看了不少js继承的东西也该总结总结了。先说一下大概的理解，有不对的还望指正，也好更正一下三观。另外说明下，下面的例子并非原创基本就是改了个变量名啥的，有的甚至直接拿过来用的。

js继承是用来干啥的：

首先说js没有真正的跟其他面向对象的语言一样概念的继承，js里边所说的继承是指模拟继承。具体js继承是干啥呢，刚开始做前端的时候我是用来面试的（最早写些小效果的时候基本用不到，为啥要看呢，因为面试官很爱问这个问题啊），所以就看看大概的，面试时候能说个大概，在这个问题上算是面试党了。后来跟着慢慢的实际上虽然概念不是很明确也用到一些。真正是用来干啥的呢，主要是用来复用我们之前写过的代码。比如写过一个功能，一个对象，或者用别人写的东西，我们要自己加点儿什么，总不能改人家的东西吧，直接继承过来用一下就好了，这才是继承的真正用途。

js继承怎么实现：先不上代码，先说说想法。其实继承呢就是想办法把其他对象（js里边一切皆对象哈）的属性或者方法搞到我们自己的对象上，让我们自己的这个对象可以用。这也就达到复用的目的了。目的搞明白了，下面就是实现手段了。根据js的特性，实现无非就是以下几种方法的其中一种或者组合使用。

1、构造函数，js好像没有严格的构造函数的定义，但是可以用new来创建新的对象。构造函数据说也是严格的面向对象的语言实现继承的方法，那么js当然可以模拟一下了，所以学过oop语言的人们会最先想到这个。

2、利用函数原型，利用原型链把两个对象链接起来，因为js原型链是比较独特所以想到这个也是很容易的。原型也分几种，就是把什么作为继承对象的原型，被继承对象的原型或者被继承对象的实例，或者直接被继承者。这几种作为继承对象的原型得到的继承效果是不一样的。

3、复制属性和方法，把被继承对象的属性或者方法统统复制克隆过来变成我们自己对象的属性和方法就好了啊，我们就可以无比顺畅的用了。当然这个还分浅复制和深度复制两种情况。

4、利用call和apply这两个方法，这两个方法比较神奇，可以改变函数执行的上下文（this），所以利用这两个方法也可以实现对被继承对象的方法的继承复用。 总的来js实现继承的途径大概就是这些，千变万化的实现方法都是从这几种方法的基础上组合升级完善出来的，为毛大多数要组合使用呢，当然是因为使用单个方法实现的效果不太理想啊。当然可以根据自己项目中实际的需求选择使用哪种方式，只要满足自己的需求并没有说必须使用哪种方法去实现。就像说从北京去石家庄，最快当然是飞机啦。但是如果离机场远，算上到机场，从机场去市里，整体算下来还不如高铁快，那就可以做高铁。又比如自己有车可以开车，想要挑战一下还可以骑自行车，这个根据自己的实际情况来选就可以。

代码实现，下面结合代码说说上面的几种实现方法，有些是从其他地方摘来的，加点儿注释啥的。

看了不少js继承的东西也该总结总结了。先说一下大概的理解，有不对的还望指正，也好更正一下三观。另外说明下，下面的例子并非原创基本就是改了个变量名啥的，有的甚至直接拿过来用的。

js继承是用来干啥的：

首先说js没有真正的跟其他面向对象的语言一样概念的继承，js里边所说的继承是指模拟继承。具体js继承是干啥呢，刚开始做前端的时候我是用来面试的（最早写些小效果的时候基本用不到，为啥要看呢，因为面试官很爱问这个问题啊），所以就看看大概的，面试时候能说个大概，在这个问题上算是面试党了。后来跟着慢慢的实际上虽然概念不是很明确也用到一些。真正是用来干啥的呢，主要是用来复用我们之前写过的代码。比如写过一个功能，一个对象，或者用别人写的东西，我们要自己加点儿什么，总不能改人家的东西吧，直接继承过来用一下就好了，这才是继承的真正用途。

js继承怎么实现:先不上代码，先说说想法。其实继承呢就是想办法把其他对象（js里边一切皆对象哈）的属性或者方法搞到我们自己的对象上，让我们自己的这个对象可以用。这也就达到复用的目的了。目的搞明白了，下面就是实现手段了。根据js的特性，实现无非就是以下几种方法的其中一种或者组合使用。

1、构造函数，js好像没有严格的构造函数的定义，但是可以用new来创建新的对象。构造函数据说也是严格的面向对象的语言实现继承的方法，那么js当然可以模拟一下了，所以学过oop语言的人们会最先想到这个。

2、利用函数原型，利用原型链把两个对象链接起来，因为js原型链是比较独特所以想到这个也是很容易的。原型也分几种，就是把什么作为继承对象的原型，被继承对象的原型或者被继承对象的实例，或者直接被继承者。这几种作为继承对象的原型得到的继承效果是不一样的。

3、复制属性和方法，把被继承对象的属性或者方法统统复制克隆过来变成我们自己对象的属性和方法就好了啊，我们就可以无比顺畅的用了。当然这个还分浅复制和深度复制两种情况。

4、利用call和apply这两个方法，这两个方法比较神奇，可以改变函数执行的上下文（this），所以利用这两个方法也可以实现对被继承对象的方法的继承复用。 总的来js实现继承的途径大概就是这些，千变万化的实现方法都是从这几种方法的基础上组合升级完善出来的，为毛大多数要组合使用呢，当然是因为使用单个方法实现的效果不太理想啊。当然可以根据自己项目中实际的需求选择使用哪种方式，只要满足自己的需求并没有说必须使用哪种方法去实现。就像说从北京去石家庄，最快当然是飞机啦。但是如果离机场远，算上到机场，从机场去市里，整体算下来还不如高铁快，那就可以做高铁。又比如自己有车可以开车，想要挑战一下还可以骑自行车，这个根据自己的实际情况来选就可以。

代码实现，下面结合代码说说上面的几种实现方法，有些是从其他地方摘来的，加点儿注释啥的。

一、构造函数实现（借用构造函数）：

哎呀，发现sub.say是undefined，这说明它没有被继承过来啊，下边两个对象sub，sub2的show不相等，说明两个函数指向了两个不同的对象，也就是说被复制了两份出来。

所以这个方法实现继承的话原型对象上的属性和方法没有被继承过来，Super上的属性和方法为每个new出来的对象分别复制一份。所以单单使用这个方法来实现继承还是不妥啊，因为原型上的方法都没有被继承过来啊。于是大神们就想到了原型继承

二、原型继承：

这次是arr1继承过来了，但是参数没有添加进来，是undefined，所以这个方法子类声明时候这个参数传进来付类继承过来的这个属性没法收到。其他的都还算正常。show和say都继承过来了。但是有一点儿需要注意，say是通过super的原型对象继承过来的，而show是新建super对象实例时实例的属性。

那么怎么实现参数传输又能把原型里边的东东继承过来呢，当然上边两种方法组合一下就好了啊，于是前辈们又发明了下面这种方法

三、组合继承（借用构造函数并设置原型）：

这次几乎完美了，但是可以发现sub.show 和sub2.show并不相等啊，这是为啥呢，因为apply这个地方使得show成为了suber的自己的属性，那么就吧suber原型里的show（Super的当做suber原型对象的实例对象的show）给覆盖了，所以又变成每次复制一个，当然这个地方没有办法避免啊。为了不产生这种多余的开消这种可以共用的函数可以多放到原型对象里边。因为suber的构造里边的调用，和给suber原型对象赋值时候的调用导致Super被调用了两次，那么每次new suber对象时候就调用了两次Super，调用两次就会产生两个实例对象，需要消耗多余的资源了。

于是前辈们为了解决这个问题又开了开脑洞，开发出来下面这种方法。

四、寄生组合继承：该方法跟方法三最主要的不同就是把父类原型赋给了子类原型而不是父类示例，看例子

好了，这样就把三方法的弊端干掉了，这个可以完美的使用了吧。

五、复制属性实现

拷贝我们可以写一个拷贝函数来实现。

复制成功，那么child成功继承了parent的一些属性，但是后面两个测试发现他们是相等的，就表明了他们在公用同一个数组，同一个函数，函数这个可以，但是数组这个就有问题了，如果一个chiild改变了数组，几个被继承对象的数组也跟着变了，这就不给力了啊。为什么会发生这种情况呢，js里边对象存储的是指针，然后这个指针指向这个值，我们在这复制的实际是指向该对象的指针的值，所以继承对象和被继承对象都指向了同一个对象，接下来看看如何使用深度复制来解决这个问题。

深度复制对象属性：

好了，深度复制完毕，但似有木有发现问题，name是parent的，也就是说如果继承对象有和被继承对象一样的属性名的属性如果不做处理就会被替换掉。那么我们可以做一下处理，先声明一个属性，保存parent里的东西，剩下的的当然就是child自己的东西了，最后再把属性给child对象就可以了。

六、利用call和apply这两个方法（借用方法）。这个就是通过call和apply来复用其他对象的方法，达到复用的目的。

这个就是借用了，好了，下课。

好吧，好吧，其实这里边还有其他东西要看。可以借用并不“带表”可以随便把某个方法赋值给谁然后跟没发生什么似的继续用。所以我们平时使用借用时要注意一下上下文，下面看下那些容易出错的地方。

神马意思呢，就是this.name是undefined,当one.say赋值给say是，实际上是say存储了指向函数对象的指针，say这个变量明显又是全局变量的一个属性，那么它运行的时候实际的上下文就变成了windows了，当然这个时候name就变成undefined了。回调这个也是一样，return 的是函数运行的结果。如果我们事先设置 windows.name="windows" 那么得到的结果就变成了 "hoho, windows" 和"Hola, windows" 了。

通过apply可以改变方法执行的上下文，那么我们构建一个函数来实现这样一个功能，通过使用方法调用实现上下文的改变，这样就不会出现上下文不是我们期望的上下文的情况了。

介绍完了，该说说自己的疑惑了，当复制属性方法遇到的被继承对象里边存在方法，如何单独复制出来呢，现在的是直接共用了，因为毕竟方法一般不会经常改动。求解答？

下面是转载过来的jQuery的extend方法，好像也没有特殊处理函数这块，继承完了两个函数也是共用的。

$.extend源码

以上这篇javascript 继承学习心得总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持积木网。

JavaScript的函数式编程基础指南 引言JavaScript是一种强大的，却被误解的编程语言。一些人喜欢说它是一个面向对象的编程语言，或者它是一个函数式编程语言。另外一些人喜欢说，它

简单理解JavaScript中的封装与继承特性 JavaScript中的封装封装简单地说就是让外界只能访问对象的共有变量和函数，隐藏细节和数据。js中有三种方法创建对象，分别为门户大开型、用命名规

javascript实现dom元素可拖动 摘要：最近在项目中要做一个图片预览的功能，这时候会遇到用户上传很大的图片，已经超出视图界面。最终决定做一个在固定宽和高的位置，用户可