作为一名差生，我一直没有系统的了解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高级程序设计》。
