详解js的bindcallapply

Posted 2021-03-18 juaoie

详解js的bind、call、apply

说明

• 虽然bind、call、apply都是js很基础的一块知识，但是我从未认真总结过这三者的区别。
• 由于公司后端是用的微服务架构，又没有中间层对接，导致前端这边非常难于处理接口数据。
• 于是我在项目初期封装了一套薄弱的api方法充当中间层的作用，还有为了让后端接口字段命名统一，也单独封装了一套方法用来统一每个微服务字段返回名。
• 但是，随着业务的增加，代码出现强耦合现象，到最后薄弱的中间层已经撑不住了，连代码的审视都变得很麻烦。
• 最后不得以重新设计这套api方法，幸好之前考虑周全留了个心眼，所以今天只花了一天时间就基本完成了。
• 最后的设计思路是不在api中间层使用restful风格的接口（当然后端接口还是不变），但是又为了api不重名，就选择让程序只加载当前页面api方法，也就是说如果用户如果当前操作的是A页面，那B页面的api方法是不会被载入的，这样也避免了首次加载程序的时候加载过多的api方法。

• 然后我在为每个api方法提供公共的数据处理方法的时候需要改变api方法的this指向，于是用到了call方法，所以有了此文。

• 后台=>通道
• 体验账号1：账号：“123456”。密码：“123456”

• 体验账号2：账号：“123123”。密码：“123123”

关于this指向

• 它指向什么完全取决于函数在哪里被调用，也就是说，谁调用，谁负责;
• this指向我在前年6月份写过一篇文章说的很清楚了，所以这里不多说了，通道
• 另外mdn上面对this指向描述可能会更好。通道

bind

bind用来创建一个新的函数，与普通函数不同，这个函数创建的时候可以指定运行环境。

let log=console.log;
let people = {
    name: '张三',
    getName: function() {
        return this.name;
    },
};
let getNameTo = function(hello) {
    log(this.getName());
    log(this.name+hello);
};
let logName = getNameTo.bind(people);
logName('你好啊！');

所谓的指定运行环境，就是指定运行时候的上下文
上面的代码如同以下：

let log=console.log;
let people = {
    name: '张三',
    getName: function() {
        return this.name;
    },
    getNameTo:function(hello) {
        log(this.getName());
        log(this.name+hello);
    }
};
people.getNameTo('你好啊！')

call()和apply()

• call和apply会立即执行调用它的函数
• call接受的参数是单个单个传递的，apply接受的参数则需要一个数组

let log=console.log;
var people = {
    name: '张三',
    getName: function() {
        return this.name;
    },
};
var getNameTo = function(a,b) {
    console.log(this.getName() + a+ b);
};
getNameTo.call(people,'aa', 'bb');
getNameTo.apply(people,['11', '22']);