Skip to main content

bind详解

这两天被问到了call和apply的区别，都回答上来了，然后被问到bind，脑海里是有这个东西，但是一时搜索不出来。今天整理一下具体内容。

1.js中bind和call和apply#

首先，为什么会有这三个东西?在什么应用场景下会用到呢？举一个在很多博客中见到的例子：

var write = document.write;write("hello world");

代码这样写的意图，是想将document中的write方法抽离出来，在别的地方也可以调用。但问题是

  1. document.write("aa")这样写是调用document这个对象中的write方法
  2. write("hello write")这样写是调用window中的方法
  3. window中没有这个方法，就会报错
  4. 归根结底是this没有绑定到相应的对象

而bind、apply、call的出现，就是解决这个问题的。调用方式都是function.bind(obj)，这种形式，函数内的this即绑定到obj的this。

call和apply的区别#

两者实现的效果是相同的，只是传入的参数不一样。两者都是立即执行。
对于call来说，所期望的输入参数应该是function.call(obj,"1", "2", "3")
对于apply来说，所期望输入的参数应该是function.apply(obj, ["1", "2", "3"])

bind和call、apply的区别#

call和apply，都是立即执行，返回结果的。而bind执行之后，会返回一个函数，留待开发者等待合适的时机自行决定什么时候调用。

bind的实现#

如何实现一个bind呢？代码如下：

Function.prototype.my_bind = function(context) {    var args = Array.prototype.slice.call(arguments, 1);    //第一个参数是绑定的对象，剩下的参数是输入的参数    var self = this;    //保存调用函数的this    return function() {     //返回的是一个函数        var innerArgs = Array.prototype.slice.call(arguments);   //第二次传入的参数        var finalArgs = args.concat(innerArgs); //所有的参数        return self.apply(context, finalArgs);  //使用apply，绑定对象，返回结果    }}

以上。 written by LRQ 2019.12.4