手写new-apply-call-bind系列

手写new-apply-call-bind系列

<script>
    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    Person.prototype.sayName=function(){
        console.log(this.name)
    }
    //一、new
    //new 的作用，调用构造函数，创建新对象
    function myNew(...args){
        let constructor = args[0]
        //1. 创建新对象
        var obj = {};
        //2. 将对象的原型指向构造函数
        //Object.setPrototypeOf(obj,constructor.prototype)
        obj.__proto__=constructor.prototype;
        // 1 2步可以合并这样写：let obj = Object.create(constructor.prototype)
        //3. 对象对象调用构造函数
        constructor.apply(obj,args.slice(1))
        //4. 返回对象
        return obj;
    }
    var person1=myNew(Person,"new",1);
    person1.sayName();

    //二 、call
    //用法：一个函数的方法，接受一个对象和函数要接受的参数，
    var person ={
        name:'person call'
    }
    var name='window'
    function test(...args){
        console.log(this.name)
        return args.length
    }
    Function.prototype.myCall=function(...args){
        var obj= args[0];
        obj.fn = this;
        let result= obj.fn(...(args.slice(1)))
        return result
    }
    console.log(test('call'))
    console.log(test.myCall(person,'call','ca','test'))

    //三、apply
    Function.prototype.myApply=function(obj,args){
        obj.fn = this;
        let result= obj.fn(...args)
        return result;
    }
    console.log(test.myApply(person,["call1","call2"]))

    //四、bind
    //绑定函数的this指向，返回一个函数
    //bind方法接收参数，该参数可以传给调用bind方法的函数

    var bindObj={
        num:1
    }
    function bindTest(a,b){
        this.a=a;
        this.b=b;
        return (a+b+this.num)
    }
    console.log(bindTest.bind(bindObj)(1,2))
    //实现：
    Function.prototype.myBind=function(...args){
        var obj=args[0];
        //console.log(obj)
        obj.fn=this
        console.log(this)
        return function(...args2){
            return obj.fn(...(args.slice(1)),...args2)
        }
    }
    console.log(bindTest.myBind(bindObj,2,7)())


</script>