「面试重点」聊一聊JS中call、apply、bind里的小心思

时光屋小豪
2,139 阅读5分钟

引子

面试的重点难点的坑来啦！~/(ㄒoㄒ)/~~不出意外，this在ES5中是比较头疼和让初学者恐惧的一块，尽管在 ES6 中可能会极大避免 this 产生的错误，但是为了前端初学者能够在使用上能够将call,apply,bind等容易混淆的this指向问题，最好还是了解一下call、apply、bind 三者的区别，以及它们在底层中是如何来实现的~

call、apply、bind它们 究竟藏在哪里

所有函数能调call、apply.bind的方法前提是function是Function的实例，而Function.prototype上面有这三个方法

Function.prototype = {
    call
    apply
    bind
}

call / apply / bind 的使用

call / apply

用法：第一个参数就是改变的this指向，写谁就是谁(特殊：非严格模式下，传递null/undefined指向的也是window)
区别：执行函数，传递的参数方式有区别，call是一个个传递，apply是把需要传递的参数放到数组中整体传递

func.call([context],10,20);
func.apply([context],[10,20])

bind

用法：bind不是立即执行函数，属于预先改变this和传递一些内容 => "柯里化思想"
区别：call/apply都是改变this的同时直接将函数执行，而bind需要手动执行

let obj = {
    fn(x, y) {
        console.log(this, x, y);
    }
}

obj.fn.call();              // window 严格模式下: undefined
obj.fn.call(null);          // ...
obj.fn.call(undefined);     // ...
obj.fn.call(window, 10, 20);  // window
obj.fn.apply(window, [10, 20]);  // window

例：在1秒钟之后，执行fn函数，让其函数里的this变为window

错误写法：
setTimeout(obj.fn.call(window, 10, 20));

原因：
fn.call()自动执行，执行之后将结果(window)赋值给setTimeout再让浏览器执行，显然是错误的，因setTimeout第一个参数应为要执行的函数,而非window等表达式

正确写法：
setTimeout(obj.fn.bind(window, 10, 20));

call apply bind的实现

实现Function.prototype.bind（柯里化函数思想）

注：重写bind需要在Function.prototype定义，因为是Function原型上的方法
柯里化思想：一个大函数里面返回一个小函数，返回的小函数供外面调取使用，在执行大函数执行时形成的执行上下文不能销毁，形成闭包，保护大函数里面的变量，等到anonymous(下文提到)执行时，再调取大函数里面的变量
基础版

~ function anonymous(proto) {
    // context: bind更改之后的this指向
    function bind(context) {
        <!--context may be null or undefined-->
        if (context == undefined) {
            context = window;
        }
        
        <!--arguments { 0:context, 1:10, 2:20, length:3}-->
        <!--获取传递的实参集合-->
        var args = [].slice.call(arguments, 1);
        
        需要最终执行的函数(例: obj.fn)
        var _this = this;
        
        <!--bind()执行会返回一个新函数-->
        return function anonymous() {
             _this.apply(context, args);
        }
    }
    proto.bind = bind;
}(Function.prototype);

let obj = {
    fn(x, y) {
        console.log(this, x, y);
    }
}

现在bind原理懂了之后，我们来回顾一下这个题
回顾：在1秒钟之后，执行fn函数，让其函数里的this变为window
bind结合setTimeout实现
原理：
1、1s之后先执行bind的返回结果anonymous
2、在anonymous中再把需要执行的obj.fn执行，把之前存储的context/args传递给函数

setTimeout(obj.fn.bind(window, 10, 20));
setTimeout(anonymous, 1000);

完整版

// document.body.onclick = obj.fn.bind(window, 10, 20);
document.body.onclick = anonymous;

例:给当前元素的某个事件行为绑定方法，当事件触发执行完这个方法之后，方法中有一个默认事件对象ev(MouseEvent)，ev作为anonymous的形参对象anonymous(ev)，因为最终执行的是obj.fn，所以为了方便拿到ev 

~ function anonymous(proto) {
    // context: bind更改之后的this指向
    function bind(context) {
        // context may be null or undefined
        if (context == undefined) {
            context = window;
        }
        
        <!--arguments { 0:context, 1:10, 2:20, length:3}-->
        <!--获取传递的实参集合-->
        var args = [].slice.call(arguments, 1);
        
        需要最终执行的函数(例: obj.fn)
        var _this = this;
        
        <!--bind()执行会返回一个新函数-->
        return function anonymous(ev) {
            args.push(ev);
             _this.apply(context, args);
        }
    }
    proto.bind = bind;
}(Function.prototype);

let obj = {
    fn(x, y,ev) {
        console.log(this, x, y,ev);
    }
};

由于anonymous不一定绑给谁，所以不一定有ev,但也还有可能是其他东西,所以...

...
...
    return function anonymous() {
        var amArg = [].slice.call(arguments, 0);
        args = args.concat(amArg);
         _this.apply(context, args);
    }
    
    proto.bind = bind;

bind核心逻辑(es6写法)

function bind (context = window, ...args) {
    return (...amArg) => {
        args = args.concat(amArg);
        _this.apply(context, args);
    }
}

经测试：apply在传递多个参数的情况下，性能不如call，故改写call

function bind (context = window, ...args) {
    return (...amArg) => {
        args = args.concat(amArg);
        _this.call(context, ...args);
    }
}

es6实现Function.prototype.call/apply

以obj.fn.call(window, 10, 20)为例

原理：context.$fn = this

步骤：

1、把当前函数(要更改的函数obj.fn)，作为context一个属性，赋给this
2、context.&fn()，this自然指向context
3、防止对象属性被窜改，及时delete context.$fn
4、call()执行之后应返回一个function，赋值给result
PS：(如果在面试的时候想写详细点可以限定context数据类型为引用类型，排除掉基本类型的可能)

~ function anonymous(proto) {
    <!--只有当context不传，或传undefined时，才是window-->
    function call(context = window, ...args) {
    <!--所以应该null情况考虑进去-->
        context === null ? context = window : null;
        let type = typeof context;
        if (type !== "object" && type !== "function" && type !== "symbol"){
            <!--=> 基本类型值-->
            switch(type) {
                case 'number':
                    context = new Number(context);
                    break;
                case 'string':
                    context = new String(context);
                    break;
                case 'boolean':
                    context = new Boolean(context);
                    break;
            }
        };
        
        <!--必须保证context是引用类型-->
        <!--this是call之前要执行的函数(obj.fn)-->
        <!--关键步骤-->
        context.$fn = this;
        let result = context.$fn(...args);
        delete context.$fn;
        return result;
    }
    proto.call = call; 
    
    function apply(context = window, args) {
        context.$fn = this;
        let result = context.$fn(...args);
        delete context.$fn;
        return result;
    }
    proto.apply = apply; 
}(Function.prototype);

let obj = {
    fn(x, y) {
        console.log(this, x, y);
    }
};

obj.fn.call(window,10,20);  // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …} 10 20
obj.fn.call(1,10,20);   // Number {1, $fn: ƒ} 10 20
obj.fn.call(true,10,20);  // Boolean {true, $fn: ƒ} 10 20

obj.fn.apply(true,[10,20]); // Boolean {true}__proto__: Boolean[[PrimitiveValue]]: true (2) [10, 20] undefined

强化练习

call的无限调用

function call(context = window, ...args) {
    // 必须保证context是引用类型
    context.$fn = this;
    let result = context.$fn(...args);
    delete context.$fn;
    return result;
}

call 引用类型 堆地址AAAFFF000

function fn1() { console.log(1); }
function fn2() { console.log(2); }
fn1.call(fn2);             // 执行的是fn1 => 1
fn1.call.call(fn2);        // 最终让fn2执行 => 2 (包括多个call)
Function.prototype.call(fn1);
Function.prototype.call.call(fn1);

fn1.call.call(fn2);

1、先让最后一个call执行，
最后一个call中的this是fn1.call，context是fn2
    this => fn1.call => AAAFFF000
    context => fn2
    args => []
最后一个call开始执行
    fn2.$fn = AAAFFF000 
    result = fn2.$fn(...[]) (AAAFFF000) 执行,

接着让call第二次执行
    this => fn2
    context => undefined
    args => []
    undefined.$fn = fn2
    result = undefined.$fn => (fn2())
    
最终让fn2执行

写在最后

  • 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注
avatar
文章
阅读
粉丝
相关推荐
this、apply、call、bind
154k阅读
 · 
3.7k点赞
面试感悟,手写bind,apply,call
22k阅读
 · 
311点赞
面试官为啥总是让我们手撕call、apply、bind?
31k阅读
 · 
622点赞
手写call、apply、bind实现及详解
33k阅读
 · 
250点赞
apply、call、bind
4.4k阅读
 · 
46点赞
js基础-面试官想知道你有多理解call,apply,bind？[不看后悔系列]
38k阅读
 · 
741点赞
手写JS函数的call、apply、bind实现
7.8k阅读
 · 
23点赞
call、apply、bind实现原理
6.1k阅读
 · 
100点赞
JavaScript面试之手写call、apply、bind
3.9k阅读
 · 
38点赞

友情链接：