js中实现继承的不同方式以及其缺点

Posted 2020-10-27

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中的方法以后再看。