js痛点之继承

摘要：和我前一篇说过，构造函数模式不流行就是因为他的重用性这种继承方式的重用性呵呵但是我们也不能否定他的存在，毕竟我以前也用过。

今天给大家科普一个叫做继承的大哥。之所以叫做大哥，是因为他确实是所以语言都必须具备的。而且这也是BAT公司前端面试中，必提及的一个知识点。 由于js 是由 大神 在10天之内写完了，但后来由ECMA262接手优化，最终有了现在丰满的JS。 但是关于继承的遗留问题应该算是比较严重的。 先说一下基本的js继承有哪些.

啊~~~ md， 名字怎么这么怪嘞！ 这个官方的说法，我们乡下人管他叫做复制(copy);
来个栗子:

function Father(name){
    this.name =name;
}
function Children(name){
    Father.call(this,name);
}
let jimmy = new Children("jimmy");
console.log(jimmy.name);  //jimmy

没错，看清楚，其实就是使用了函数对象自带的方法。call 来创建的。 将父构造函数的属性给copy到子类上，相当于建立了一个副本。但其实这种方式并没有什么卵用。 和我前一篇说过，构造函数模式不流行就是因为他的重用性 === 0. 这种继承方式的重用性（呵呵） <=0. 但是我们也不能否定他的存在，毕竟我以前也用过。

介绍一个当今比较流行的,组合继承

组合就是融合了原型和构造器的一种继承方法。 这个应该算是一种比较稳妥的继承方式.
即能排除引用类型造成的问题，又可以实现共享的效果。

function A (){
 this.name = "jimmy";
}
A.prototype.speak = function(){
    console.log(`my name is ${this.name}`);
}
function B(){
  A.call(this);
}
B.prototype = new A();
B.prototype.constructor = B;
var b = new B();
console.log(b.name);  //jimmy 
b.speak();  //my name is jimmy

这种应该算是比较经典了，但这样会两次调用到父类型，对内存影响还是比较大的。 所以有人提出中间创建一个寄生组合式继承. 但这个真的很鸡肋。 JS的一个继承能扯出这么多东西，也是醉了。
但是es6 class 的出现，解决了这一痛点。 虽然这个东西有悖js 的原理(因为在js中是没有类这个概念的),但是实用性确实相当的好.
所以今天的主角应该是class 这个东西

在es6中新出了一个feature--class. 中文叫做类. 应该算是混合模式的一个总结吧。在使用class的使用，你完全可以不去写，constructor, prototype之类的东西了.
来个栗子:

//原生的混合模式:
function Point(x,y){
  this.x = x;
  this.y = y;}

Point.prototype.toString = function () {
  return "(" + this.x + ", " + this.y + ")";
  }
var point = new Point(1,2); 
//使用class的类:
class Point {
  constructor(x, y) {  //本质上还是原型链上的方法
  this.x = x;  //这里的this和上面的一样都代表实例对象
  this.y = y;
  }

  toString() {
  return "(" + this.x + ", " + this.y + ")";
  }
}
var point = new Point(1,2);

虽然我打心里是不愿意将类加入js里面(没准以后就变为标准了)，但为了大家的理解，我还是把这个称为类吧; ):
可以看到类和原型js的写法的不同吧。我先说一下语法吧。
创建一个类，就和在java里面创建类是一样的。
初始化使用class + 类名(首字母大写) + {...}

class Hehe{
...
}
var hehe new Hehe();

初始化话，上面也已经说了。在类中需要注意一个叫做constructor的方法，这个就相当于构造函数里面的内容，他会在类初始化时，自动执行. 所以可以在constructor里面传递一些参数.

class Jimmy{
    constructor(name){
        this.name = name;  //这里的this和构造函数里面的this的属性是一致的
    }
}
let jimmy = new Jimmy("jimmy");
console.log(jimmy.name);  //jimmy

当然在类中还可以添加方法。具体做法如下:

class Jimmy{
    constructor(name){
        this.name = name;  //这里的this和构造函数里面的this的属性是一致的
    }
    speak(){
        console.log(`my name is ${this.name}`);
    }
}
let jimmy = new Jimmy("jimmy");
jimmy.speak();  //my name is jimmy;

需要注意，请不要手贱在每个{} 后面加上 "," 像这样

class Jimmy{
    constructor(name){
        this.name = name; 
    },
    speak(){
        console.log(`my name is ${this.name}`);
    }
}

到时候出个bug, 我看你哭去吧。
而这样定义的方法其实是存在于Jimmy.prototype 上的。
我们检验一下Jimmy的类型;

Jimmy instanceof Function; //true

所以说 其实 类就是js混合模式的一个syntax candy(语法糖).
当然类也可以使用字面量形式书写(废话，类本来就是函数类型)

const MyClass = class Me {  
  getClassName() {
  return Me.name;  //这里的Me 就和使用函数是一样的道理
  }};
var MyClass = function Me(){
    console.log(Me.name);  //Me
}

关键看你喜欢用哪一种了。
说一说类的继承吧， 这应该是我最喜欢class的原因了.

在class中是使用extends来实现继承的效果的. 还有一个特性 super. 这个用来指向父类的实例，如果大家记得应该会了解到上面说的继承模式吧。 而这里的super算是es6新定义的一个东西。

class Point {
  constructor(x, y) {
  this.x = x;
  this.y = y;
   }
  }

class ColorPoint extends Point {
  constructor(x, y, color) {
  this.color = color; // 这里会报错，ignore这句就可以了
  super(x, y);  //这里相当于初始化父类,然后规定class里面this的指向
  this.color = color; // 正确
   }
   show(){
    console.log(this.color);  
    console.log(super.x);
    console.log(this.x);
   }
  }
  var color = new ColorPoint(1,2,"red");
  color.show();
  //依次得到, red , 1 ,1 

我艹，super和this到底应该怎么区分嘞？
很简单，上面已经说了，super是指向父类的实例，而this是在这里是构造函数上原型的指针。 其实由于继承，使用this也可以访问到x; 所以推荐如果你有强迫症的话，父类上的方法和属性可以使用super调用，子类自定的属性和方法使用this调用。 当然我喜欢直接使用this（三包服务）。
还有一点，那我怎么检测我的父类到底是谁嘞(隔壁王叔叔)?
如果你在浏览器的Console 里面，可以直接使用.__proto__来进行检测的(脚本里不行)。在脚本里,js提供了一个方法getPrototypeOf()来进行检测

//上述例子
Object.getPrototypeOf(ColorPoint); //Point
//相当于浏览器里面的
ColorPoint.__proto__;  //Point

关于继承我就扯这么多吧。 虽然说继承很重要，但我们用的地方不是很多，原因是----因为我们不牛逼。。。 大家如果有空可以去翻一翻jquery或者zepto的源码，看一看是不是用到了prototype，继承等相关的技术。而且他们封装性都是超级好的。没有一个直接写在全局里面的。