JS中bind,call,apply以及new的用法与实现

JS中bind,call,apply以及new的用法与实现

春招冲刺01.16日 - 01

1. 什么是bind,call,apply

　　
bind,call,apply是JavaScript中Function对象自带的三个方法，用于改变函数体内部的 this 指向，也就是函数调用时的上下文（context）。

bind,call,apply三者都可以利用后续参数传参。其中bind不会立即调用，而是返回对应的绑定函数，其内的this指向为创建它时传入bind的 第一个参数，而传入bind的第二个及以后的参数作为 原函数的参数 来调用原函数。

bind(thisArg[, arg1[, arg2[, ...]]])

apply、call则是立即调用,改变的this指向他们的第一个参数，apply的第二个参数是一个参数数组，call的第二个及其以后的参数都是数组里面的元素。

call ( thisArg, arg1, arg2, ... )
apply ( thisArg ,[argArray] )

2. call的应用与实现

在call的语法call ( thisArg, arg1, arg2, ... )中,thisArg的传递情况有：

• null,undefined或不传 此时指向window
• 传递另一个函数B的函数名，函数中的this指向B的引用
• 传递字符串、数值或布尔类型等基础类型，函数中的this指向其对应的包装对象，如 String、Number、Boolean
• 传递一个对象，函数中的this指向这个对象

常用方法：

function pChain (){
        this.name="pChainRoot";
        this.nameprint=function(){
            console.log('打印的名字是',this.name);
        }
    }

var newname={name:"PChainChild"};
var PChain=new pChain();
PChain.nameprint.call(newname);  //PChainChild
PChain.nameprint();              //pChainRoot

模拟实现：

Function.prototype.myCall = function (thisArg,...args){
        
        //thisArg为调用mycall方法的函数的this指向
        var thisArg = thisArg || window
        
        //将this赋给thisArg的fn属性
        //此处this指代调用myCall的function
        thisArg.fn = this;  
        
        var result = thisArg.fn(args);
        delete thisArg.fn;
        return result;

    }
    PChain.nameprint.myCall(newname);  //pChainChild

3. apply的应用与实现

apply与call的作用是一样的，不过二者接收参数的方法不一样，apply要求将call的剩余参数存储在一个数组中。
当明确知道参数数量时用 call ，而不确定的时候用 apply，并将把参数 push 进数组传递进去，使函数内部也通过 arguments 这个数组来遍历所有的参数。
常用方法:

function pChain2 (name1,name2){
    this.name1=name1;
    this.name2=name2;
    this.nameprint=function(){
        console.log('打印的名字是',this.name1+'与'+this.name2);
    }
}
function pChainChild2 (){
        this.name1="PChainChild1";
        this.name2="PChainChild2";
        var PChain2 = new pChain2("pChainRoot1","pChainPoot2");

        //call的传参方法
        PChain2.nameprint.call(this,name1,name2);  //PChainChild1与PChainChild2

        PChain2.nameprint();      //pChainRoot1与pChainPoot2
        
        //apply的传参方法
        PChain2.nameprint.apply(this,[name1,name2]);  //PChainChild1与PChainChild2
}

pChainChild2();

模拟实现：

Function.prototype.myApply = function(thisArg){
        //thisArg为调用mycall方法的函数的this指向
        var thisArg = thisArg || window
        
        //将this赋给thisArg的fn属性
        //此处this指代调用myCall的function
        thisArg.fn = this;  
        
        var result;
        if (arguments[1]) {
	        result = thisArg.fn(arguments[1]);
        } else {
        	result = thisArg.fn();
        }
        delete thisArg.fn;
        return result;
    }

4. bind的应用与实现

bind是在es5中扩展的方法（IE6,7,8不支持），但是返回值是函数。

常用方法：

var bar= function () {
    console.log(this.x);
}
var foo = {
    x:3
}

bar(); //undefined

bar.bind (foo) (); //3

要注意的是多次 bind() 是无效的。

var foo2 = {
    x:5
}
bar.bind (foo).bind (foo2) (); //3

模拟实现：

Function.prototype.myBind=function(){
        var _this = this;
        var context = [].shift.call(arguments);// 保存需要绑定的this上下文
        var args = [].slice.call(arguments); //剩下参数转为数组
        
        return function(){
            _this.apply(context, [].concat.call(args, [].slice.call(arguments)));
        }
    }

5. new的应用与实现

在学习了原型与原型链 -> 12.29part2 之后，我们知道new在构建过程中，会发生的步骤为：

• 生成新的对象
• 新对象的__proto__属性指向构造函数的原型对象
• 绑定this,将构造函数的作用域赋值给新对象
• 返回新对象

因此手动模拟new关键字只需要实现上述四个步骤即可

function myNew(fn, ...args) {
        const obj = {};

        //绑定原型链
        obj.__proto__ = fn.prototype;

        // 改变this指向
        let result = fn.apply(obj, args)
        
        // return result
        // 确保new出来的是一个对象
        return typeof result === "object" ? result : obj
    }