原型——重构数组方法chunk，新写css方法， 函数柯里化——全网最优原型继承继承

es6中有类

es5中有构造方法

根据类的定义，仿制出es5的构构造方法

• 只有函数具备一个叫​

  ​prototype​

  ​的属性，叫做原型属性
• 对象中有一个​

  ​__proto__​

  ​
• 当这个函数仅仅是作为函数执行，那么这个​

  ​prototype​

  ​是没有作用的
• 但是当这个函数作为构造函数使用时，​

  ​prototype​

  ​就是这个构造函数的原型属性
• 构造函数 通常不是正常的执行函数方式，而是需要通过new 构造函数() 执行
• 普通函数执行只是执行函数中的语句，并且可能返回一个值

• 构造函数执行通过new 构造函数，这时候，我们把构造函数作为一个类的类名，
• 并且根据这个类名实例化一个对象，这个实例化的对象中包含的原型链属性中就具备了构造函数中Prototype对象的所有属性方法，同时构造函数不能返回任何值，否则替代实例化对象
• 在实例化对象中__proto__实际上就是构造函数prototype
• 类的​

  ​prototype​

  ​​就是实例化对象的​

  ​__proto__​

  ​

es5 构造函数创造实例化对象

function Box(){
   console.log("aa");
    // 同时构造函数中不能使用return
}
Box.prototype.a=1;
Box.prototype.play=function(){
    console.log("play")
}

var b=new Box();//这种方式叫做通过构造函数创造实例化对象
console.log(b)
console.log(b.__proto__===Box.prototype);//true      

案例一

class Box{
     a=1;
     static b=2;
     _step=1;
     constructor(_a){
         this.a=_a;
     }
     play(){
         console.log("a")
     }
     static setCSS(){
         console.log("css");
     }
     set step(value){
         this._step=value;
     }
     get step(){
         return this._step;
     }
 }      

/* 构造函数constructor */
 function Box(_a){
     this.a = _a;
 }
 /* 实例化属性和方法 */
 Box.prototype.a =1;
 Box.prototype.play = function(){
     console.log("play");
 }
 /* 静态属性和方法 */
 Box.b=2;
 Box.setCSS= function(){
     console.log("css");
 }
 /* get,set */
 Object.defineProperties(Box.prototype,{
     _step:{
         value:1,
     },
     step:{
         set(value){
             this._step = value
         },
         get(){
             return this._step;
         }
     }
 })      

案例二

class Box{
    a=1;
    _values=1;
    static list=[]
    constructor(){
        this.play();
    }
    play(){
        document.addEventListener("click",e=>this.clickHandler(e))
    }
    clickHandler(e){
        this.a++;
    }
    static run(){
        Box.list.push(this);
    }
    set values(v){
        this.a=v;
        this._values=v;
    }
    get values(){
        return this._values
    }
}      

/* 构造函数constructor */
function Box(){
    this.play();
}
/* 实例化属性和方法 */
Box.prototype.a = 1;
Box.prototype.play = function(){
    document.addEventListener("click",this.clickHandler.bind(this));
}
Box.prototype.clickHandler = function(e){
    this.a++;
}
/* 静态属性和方法 */
Box.list = [];
Box.run = function(){
    Box.list.push(this);
}
/* get,set */
Object.defineProperties(Box.prototype,{
    _values:{
        value:1
    },
    values:{
        set(v){
            this.a=v;
            this._values=v;
        },
        get(){
        return this._values
        }
    }

})      

重构chunk

Array.prototype.chunk=function(num){
    var arr=[[]];
    for(var i=0;i<this.length;i++){
        if(arr[arr.length-1].length===num) arr.push([]);
        arr[arr.length-1].push(this[i]);
    }
    return arr;
}


var arr=[1,2,3,4,5,6,7,8];
var arr1=arr.chunk(3);
console.log(arr1)      

新写css方法

var div = document.createElement("div");
document.body.appendChild(div);
HTMLElement.prototype.css = function(style){
    for(var key in style){
        if(/width|height|top|right|left/.test(key)){
            this.style[key] = isNaN(style[key])?style[key]:Number(style[key])+"px"
        }else{
            this.style[key] = style[key]
        }
       
    }
}
div.css({
    width:200,
    height:400,
    backgroundColor:"green"
})      

函数柯里化方法

Function.prototype.currying = function(){
      var arr =[];
      var fn = this;
      return function(){
          if(arguments.length>0){
              arr = [...arr,...arguments];
              return arguments.callee;
          }else{
              return fn(...arr);
          }
      }
  }
  function getSum(){
      return Array.from(arguments).reduce((v,t)=>v+t);
  }
  var f1 = getSum.currying();
  f1(1,2,3)
  console.log(f1());      

全网最优原型继承，肝

🧡最优的原型继承往下翻🧡

一、实现了一个对象的继承（报行）

function Box1(_a) {
    this.a = _a;
}
Box1.prototype.play = function () {
    console.log("play");
}
function Ball1() {

}
Object.setPrototypeOf(Ball1.prototype,Box1.prototype);
// Ball1.prototype=new Box1();/* 等价上面这句 */
var b1=new Ball1();
console.log(b1);      

全文值得注意的是这个:
function Box(){}

Box.prototype 就是   new Box()得到的实例化对象中__proto__ */      

function Box1(_a){
    this.a=_a;
}
Box1.prototype.play=function(){
    console.log("play");
}


function Ball1(_a){
    Box1.apply(this,arguments);//组合式继承
}

Object.setPrototypeOf(Ball1.prototype,Box1.prototype);

Ball1.prototype.run=function(){
    console.log("run")
}

var b1=new Ball1(1);
console.log(b1)      

值得注意的是:
在所有构造函数的原型中都会自动生成一个constructor，并且这个constructor指向当前的构造函数
function Box2(){

}

console.dir(Box2)
console.log(Box2.prototype.constructor===Box2)输出：true      

function Box1(_a){
    this.a=_a;
}
Box1.prototype.play=function(){
    console.log("play");
}
function Ball1(_a){
    Box1.apply(this,arguments);//组合式继承
}


function F(){

}
F.prototype=Box1.prototype;

Ball1.prototype=new F();//会多执行一次超类的构造函数
Ball1.prototype.constructor=Ball1;
Ball1.prototype.run=function(){
    console.log("run")
}

var b1=new Ball1(1);
console.log(b1)      

全网最优实现原型继承

/* 传入参数子类，超类 */
function extend(subClass,supClass){
    /* 设置将父类的原型给子类做原型链(上的一环)(下)，并不是覆盖  及设置原型链*/
    Object.setPrototypeOf(subClass.prototype,supClass.prototype);
    /* 这里给子类增添super方法 */
    Object.defineProperties(subClass.prototype,{
        super:{
            value:function(){
                /* 因为这里就需要继承超类，那么就给超类绑定this实例，传入参数 */
                supClass.apply(this,arguments);
            }
        },
        override:{
            value:function(method){
                /* 绑定超类的原型的方法的this执向，并传入之后面的参数 */
                return supClass.prototype[method].apply(this,Array.from(arguments).slice(1))
            }
        }
    })  
}


function Box1(_a){
    this.a=_a;
}
/* 设置Box1的原型属性，play方法默认不可枚举 */
Object.defineProperties(Box1.prototype,{
    play:{
        value:function(){
            console.log("play")
        }
    }
})

function Ball1(_a){
    /* 实例化对象上的super 给他的原型中增添加一个super方法，于是有了上面函数里的增添*/
   this.super(_a);
}
/* 设置Ball1的原型属性，play方法默认不可枚举 */
Object.defineProperties(Ball1.prototype,{
    run:{
        value:function(){
            console.log("run")
        }
    },
    play:{
        value:function(){
           this.override("play");
           console.log("play1")
        }
    }
})

extend(Ball1,Box1);

var b1=new Ball1(1);
console.log(b1)
b1.play();