• 原型——重构数组方法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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    案例一

    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;
     }
 }


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    /* 构造函数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;
         }
     }
 })

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    案例二

    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
    }
} 



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
     /* 构造函数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
        }
    }

})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    重构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)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

    新写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"
})
       

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    函数柯里化方法

    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());
 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    全网最优原型继承，肝

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

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

    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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    全文值得注意的是这个:
function Box(){}

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


    • 1
    • 2
    • 3
    • 4
    • 5

    💢二、组合式继承💢

    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)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    值得注意的是:
在所有构造函数的原型中都会自动生成一个constructor，并且这个constructor指向当前的构造函数
function Box2(){

}

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    💘寄生式继承💘

    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)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    全网最优实现原型继承

    /* 传入参数子类，超类 */
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();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
  • 相关阅读:
    Vulnhub靶机：CEREAL_ 1
    FlinkSQL系列01-编程入门
    通配符指什么呢?
    Vue 3中toRaw和markRaw的使用
    给图片加自定义水印
    c# 用非递归的写法实现递归
    营业执照的五大误区，企业千万不要踩雷
    hadoop组成
    CentOS 7 安装教程（基于虚拟机安装）
    3GPP测量事件
  • 原文地址：https://blog.csdn.net/m0_46672781/article/details/126292439