作为一名差生，我一直没有系统的了解js的apply()，call()，bind()方法。之前也找到一些网文介绍这几个的，但是说真的，以我差生的水平看求不懂。

直到昨天我自己写代码时遇到和标题有关的问题，正巧前段时间失业在家系统看了下《JavaScript高级程序设计（第3版）高清完整PDF中文》，我觉得有必要把自己困惑的发生和解决写下来，来帮助需要帮助的后来者，而不是让后来者《JavaScript 从开始到放弃》。当然了，这是个玩笑。

按自己的理解写的，也许会有错误，欢迎指正。

在下面的例子里，遇到了和bind this有关的问题（以下为正确代码）：

import React, { Component } from 'react';
...//省略代码
import NewsList from './components/news-list/'
import InfiniteScroll from 'react-infinite-scroller';

class App extends Component {
  constructor(props) {
      super(props);
      this.state = {
        ....//省略代码
        offset:0,
        limit:10,
        ....//省略代码
      };
    }
  componentDidMount(){
    this.loadMore()
  }
  async loadMore() {
    let data = await request(this.state.offset, this.state.limit)
     ...//省略代码
  }
  render() {
    return (
      <div className="App">
        <InfiniteScroll
//8行      pageStart={0}
//9行      loadMore={this.loadMore.bind(this)} //注意这里的bind(this)
//10行     hasMore={this.state.more}>
            <NewsList data={this.state.newsList}/>
        </InfiniteScroll>
      </div>
    );
  }
}

export default App;

倒数第9行里，组件InfiniteScroll的loadMore属性需要一个函数，最开始我是这样写的：

...
loadMore={this.loadMore}
...

但是在跑例子的时候，系统报错找不到offset：

App.js:24 Uncaught (in promise) TypeError: Cannot read property 'offset' of undefined

奇了怪，我的loadMore函数里明明定义了offset。

为了解决上述问题，有幸读到Javascript高级程序设计(第3版)，里面写的非常详细：

this

《javascript高级程序设计》这本书里的[匿名函数]这一章也有讲到，摘抄如下：this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。不过，匿名函数的执行环境具有全局性，因为其this对象通常指向window。

也就是说，函数执行时，this 总是指向调用该函数的对象，规则可以简单概括如下：
有对象就指向调用对象
没调用对象就指向全局对象
用new构造就指向新对象
通过 apply 或 call 或 bind 可以改变this的指向

来看下面的例子。

window.color = "red"
var o = { color: "blue"};

function sayColor(){
    alert(this.color); 
}

sayColor();        //"red"

o.sayColor = sayColor;
o.sayColor();      //"blue"

上面的函数sayColor()是在全局作用域中定义的，它引用了this对象。由于在调用函数之前，this的值并不确定，因此this可能会在代码执行过程中引用不同的对象。当在全局作用域中调用sayColor()时，this引用的是全局对象 window；换句话说，对 this.color 求值会转换成对window.color 求值，于是结果就返回了"red"。而当把这个函数赋给对象 o 并调用 o.sayColor() 时，this引用的是对象o，因此对 this.color 求值会转换成对 o.color 求值，结果就返回了"blue"。

回到之前的InfiniteScroll调用loadMore报错的问题，就明白了，this的值是在InfiniteScroll执行的时候才确定的，此时的this引用的是InfiniteScroll对象，而InfiniteScroll对象里可能并没有定义offset，所以报了错。

那这个时候如何解决this引用错误的问题呢？有请：

bind()

JavaScript高级程序设计里介绍：bind()方法会创建一个函数的实例，其 this 值会被绑定到传给bind()函数的值。例如：

window.color = "red";
var o = { color: "blue"};

function sayColor(){
      alert(this.color);
}
var objectSayColor = sayColor.bind(o);
objectSayColor();      //blue

在这里，sayColor()调用 bind() 并传入对象 o，创建了 objectSayColor()函数。objectSayColor()函数的 this 值等于o，因此即使是在全局作用域中调用这个函数，也会看到"blue"。

又回到之前的InfiniteScroll，我们在

...
//错误
loadMore={this.loadMore}
...
...
//正确
loadMore={this.loadMore.bind(this)}
...

this.loadMore函数在调用bind时，会先创建this.loadMore函数的一个实例，而此时的创建实例时的this是引用App的，所以之后this.loadMore不管怎么执行，它里面的this始终是指向App，而App里定义了offset，所以不报错，并让结果达到了期望。

Bind的其他用法，请见：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

再来说说

apply()和call()

为什么一起说，因为这俩方法的作用相同，区别仅在于接受参数的方式不同。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。
apply()方法接收两个参数，一个是在其中运行函数的作用域，另一个是参数数组；
call()方法接收多参数，第一个是在其中运行函数的作用域，剩余参数都直接传递给函数。
看起来apply()、call()和bind()函数的目的都一样，最核心都是为了改变函数的this引用。只不过调用了apply()、call()后函数就直接执行结果了。

    // 函数的apply、call方法，影响函数执行的作用域
    window.color = "red"
    var o = {
        color:'blue'
    }
    function sayColor(){
        console.log(this.color)
    }
    sayColor()//red
    sayColor.apply(o)     //blue
    sayColor.call(o)     //blue
    // bind方法，创建一个函数的实例，这个实例的this值会被绑定到传给bind()函数的值
    var objecSaycolor = sayColor.bind(o)//bind后，新函数objecSaycolor的this值变成了o
    objecSaycolor()     //blue

关于bind()详见高程3 页码第118页(实际137页)。
关于apply()、call()详见高程3 ]第116页(实际135页)。

最后，墙裂建议大家去读一读《Javascript高级程序设计》。