像数学公式一样彻底简单理解JavaScript函数调用与this 指针

一直以来，大家都对函数的调用有很多的疑惑，特别是this指针的指向。 其实理解了核心的原理之后，就很容易理解, 甚至就是套用数学公式一样！

核心原理

让我们看看原始的函数调用语句，也就是call方法

function test(param){
     console.log(this + " loves " + param);
}
复制代码

test.call("Warren", "you") //=> Warren loves you

可以看到，我们调用了test方法，并且把this指向Warren，传入参数you。这就是javascript函数调用的核心概念。其他函数都可以参考这个概念。

简单的函数调用

若果每次调用函数都用call，会变得很麻烦。Javascript允许我们直接调用test("you"),其实就相当于

function test(param) {
  console.log("loves " + thing);
}

// this:
test("you")

// 相当于:
test.call(window, "you");
复制代码

但是这个在ECMAScript的strict模式会变成:

// this:
test("you")

// 相当于:
test.call(undefined, "you");
复制代码

概括就是两条公式：

fn(...args) 就相当于 fn.call(window [ES5-strict: undefined], ...args).

(function() {})() 就相当于 (function() {}).call(window [ES5-strict: undefined).

成员函数

另一种常见的函数调用方法就是 obj.test() .

var obj = {
  name: "Warren",
  test: function(params) {
    console.log(this + " loves " + params);
  }
}

// this:
obj.test("you")

// 相当于:
obj.test.call(obj, "you");
复制代码

可以看到this指向了obj，我们之前是单独声明test，再看看如果将它我们关联给其他对象。

test: function(params) {
    console.log(this + " loves " + params);
}
var obj = {
  name: "Warren",
}
obj.test = test;

obj.test("you") 
// 仍然相当于 obj.test.call(test, "you")

test("you") // "[object DOMWindow]you"
复制代码

this指针根据调用者的变化而变化！

试下 Function.prototype.bind

有时候需要根据调用者来改变this指向，这可以用简单闭包来实现

var obj = {
  name: "Warren",
  test: function(params) {
    console.log(this + " loves " + params);
  }
}

var boundTest = function(params) { return obj.test.call(obj, params); }

boundTest("you");
复制代码

套用之前的公式 fn(...args) 就相当于 fn.call(window [ES5-strict: undefined], ...args).

boundTest("you"); => boundTest(window,"you")，但是我们在boundTest里面已经将test的this指向了obj！

让我们改造一下这个函数:

var bind = function(func, thisValue) {
  return function() {
    return func.apply(thisValue, arguments);
  }
}

var boundTest = bind(obj.test, obj);
boundTest(you) // "Warren loves you"
复制代码

要理解上面的代码，只需要知道2点。

1. apply 与 call的区别只是 apply接受的参数是数组，call接受的参数是参数列表。
2. arguments 是像类数组的某个函数的所有参数 bind函数返回一个数组，每次调用的时候绑定this并且接受新的参数。

上面只是为了更好理解，其实es5本来就有一个bind函数

var boundTest = obj.test.bind(obj);
boundTest(you) // "Warren loves you"
复制代码

以上大概就是JavaScript函数调用与this 指针的基本原理，只要记住这两条公式，基本就不虚了。

fn(...args) 就相当于 fn.call(window [ES5-strict: undefined], ...args).

(function() {})() 就相当于 (function() {}).call(window [ES5-strict: undefined).