js中实现继承的不同方式以及其缺点
2018-03-13 16:48
295 查看
1.利用call和apply,借助构造函数
fucntion P(){ this.name = "P"; } fucntion C1(){ P.call(this); }
解释一下,P.call(this)的意思,就是将P的上下文指向C的上下文。
那么,什么是上下文呢,比如说,我有一把菜刀,可以用来杀猪,那么这里我就是菜刀的上下文。你没有,但是有一天你也要去杀猪,怎么办,最简单的方式就是向我借,而不是自己去买,向我借就是说菜刀的上下文被指给你了。
call函数和apply都是用来指定上下文的,但是call后面可以传递多个参数,而apply只能用来传递一个参数(也可以多个,不过要写成数组的形式)
好,第一种方式解决了。但是第一种方法是有缺点的,就是子类只能继承构造函数里面的东西,而父类的原型函数上是继承不到的。
2.借助原型链
fucntion P(){ this.name = "P"; } fucntion C2(){ } C2.prototype = new P();
var c2 = new C2();
最后一句话的意思,就是将P实例成一个实例对象,然后,将这个对象作为子类的原型对象。
这种方法使用了原型链,但是由于直接绑定了原型函数,导致了一些问题。
fucntion P(){ this.name = "P"; } fucntion C2(){ } C2.prototype = new P() var s1 = new C2(); var s2 = new C2(); //这里,如果我们修改s1的东西 s1.name = "PPPP"; console.log(s2.name);//结果是 PPPP
原因是啥,因为s1和s2都是引用的同样的原型对象,所以,当s1的值修改,实际上就是修改了原型对象的值,因此,s2的值也会修改。很明显,这种方法是很不好的。
3.构造函数+原型链(组合方式)
fucntion P(){ this.name = "P"; } fucntion C3(){ P3.call(this); } C3.prototype = new P();//2 var c3 = new C3();//1
将两种方法的优点结合起来,这就是我们通常的方法。
实际上,这么写,有点小问题,实例化了两次对象(代码中表明了),浪费内存。
优化方式,直接在原型对象层面上进行就可以了,在//2的位置
C2.prototype = P.prototype
ES6中的方法以后再看。
相关文章推荐
- JavaScript原型链以及ES3、ES5、ES6实现继承的不同方式
- javascript学习(十六):js中继承的实现方式
- 构造函数+原型混合方式实现js的继承
- js实现继承的5种方式
- java 实现WebService 以及不同的调用方式
- 混合对象 "类" ---js实现继承的两种方式
- JQuery的read函数与js的onload不同方式实现
- SAPUI5 - JS面向对象继承方式的实现
- JS 中的call 和 apply ,以及实现继承的一些研究
- JS实现继承的几种方式(转)
- WebSocket不同版本的三种握手方式以及一个Netty实现JAVA类
- java 实现WebService 以及不同的调用方式
- js实现三张不同尺寸的图片的放大以及恢复
- Java实现WebService以及不同的调用方式
- js实现继承的方式
- js实现继承的5种方式
- JS继承的实现方式的几种方式
- 不同IE版本,引入不同的js文件。两种实现方式
- 使用Ext实现js的继承,以及扩展Ext组件的思路
- js实现继承的5种方式