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

核心原理

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

1
2
3
function test(param){
console.log(this + " loves " + param);
}

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

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

简单的函数调用

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

1
2
3
4
5
6
7
8
9
function test(param) {
console.log("loves " + thing);
}

// this:
test("you")

// 相当于:
test.call(window, "you");

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

1
2
3
4
5
// 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().

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {
name: "Warren",
test: function(params) {
console.log(this + " loves " + params);
}
}

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

// 相当于:
obj.test.call(obj, "you");

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

1
2
3
4
5
6
7
8
9
10
11
12
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指向,这可以用简单闭包来实现

1
2
3
4
5
6
7
8
9
10
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!

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

1
2
3
4
5
6
7
8
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函数

1
2
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).