详解js的bind、call、apply

详解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']);