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

原文地址:https://www.cnblogs.com/Juaoie/p/12147206.html