构造函数，原型（prototpe，_proto_），原型链，继承，this的总结理解

       在初学前端的时候，我花了大量时间刷了3遍w3c的js部分。后来疲于实现页面，缺乏深度学习。随着公司项目，使用框架flutter，dart语言才慢慢感受到这部分内容。还好早期容易忽视构造函数的时候，花了大量时间理解。虽然自己写插件的时候也在使用，总有闭门造车的感觉。

      1、构造函数

       js早期是没有类的概念。构造函数的意义就是为了创建一个自定义类。然后创建这个类的实例。

        构造函数就是一个普通函数，习惯首字母大写。调用方式需要使用new关键字。

  function InputBox(width, hight) {
        this.width= width;
        this.hight= hight;
        this.onClick= function(){
             console.log(this.width,this.hight);
        };
    }
  var box1 = new InputBox(100, 30);
  var box2 = new InputBox(200, 30);

       2、原型（prototpe，_proto_）

        这样每创建一次InputBox构造函数实例，都要创建一次onClick方法。然而方法都是一模一样的，为什么要重复的创建呢？把这个方法放到另一个地方，让所有的实例都可以访问到，就是原型protoype了。

       原型：InputBox.prototype，InputBox的每个实例都可以访问到。属于一个公共区域。       

                  InputBox.prototype，自带一个属性constructor，指向函数对象。

                  每一个对象，都带一个属性_proto_，这个属性值就是当前实例所属构造函数的原型prototype。

function InputBox(width, hight) {
        this.width= width;
        this.hight= hight;
    }

InputBox.prototype.onClick= function(){
                                 console.log(this.width,this.hight);
                               };

var box1 = new InputBox(100, 30);
box1.onClick(); //100 30

console.log(InputBox.prototype.constructor===InputBox) //true
console.log(box1.__proto__ === InputBox.prototype)  //true

        3. 原型链   

        原型链：上述实例box1.onClick()可以打印出宽高值，那box1对象有没有onClick这个方法呢。使用hasOwnProperty()来检查，答案是没有。使用in来检查，返回值是true。说明当使用实例的方法时，如果当前找不到，就会去原型中去查找。

function InputBox(width, hight) {
        this.width= width;
        this.hight= hight;
    }

InputBox.prototype.onClick= function(){
                                 console.log(this.width,this.hight);
                               };

var box1 = new InputBox(100, 30);
box1.onClick(); //100 30

console.log(box1.hasOwnProperty("onClick"))  //false
console.log("onClick" in box1)  //true

        4.继承

        如果两个类有相同的属性和方法，可不可以提取出来单独为一个类。于是有了继承，同时也成就了原型链。

    function Box(){
        this.borderColor = "#cccccc";
    }
    Box.prototype.onClick = function () {
        console.log(this.width)
    }

    function InputBox(width, hight) {
        this.width= width;
        this.hight= hight;
    }
    InputBox.prototype = new Box();
    InputBox.prototype.constructor = InputBox;

    var box1 = new InputBox(100, 30);

    console.log(box1.borderColor);  // #cccccc
    box1.onClick(); // 100

        5.this

        this指向调用的对象。所以上述代码中Box函数内虽然没有width这个属性，却能够调用的时候打印出值。js中函数有三种改变this指向的方法call，apply，bind

 function size(width,hight){
        this.width = width;
        this.hight = hight;
        console.log("size");
    }
    function border(color,radius){
        this.color = color;
        this.radius = radius;
        console.log("border");
    }

    function onClick(sms){
        console.log("onClick");
        sms();
    }

    function Box(width,hight,color,radius,func) {
        size.call(this,width,hight);
        border.apply(this,[color,radius]);
        this.onClick = onClick.bind(this,func);
    }
    var box1 = new Box(100,200,"#cccccc",50,function () {
        console.log("点击");
    });
    console.log(box1.width);  // 100
    console.log(box1.color);  // #cccccc
    box1.onClick(); // 点击

以上就是对这部分的总结理解。