还是一道this指向的问题...

[Sphinm]

遇到一个这样的问题，一层套一层的那种，一起来看下

var obj = {
  key:1,
  fun: function(callback) {
    var i = 2;
    callback.call(i,this);
  }
};

obj.fun(function(a,b) {
  console.log(a,b,this);
})

我们先来明确一下知识点：

知识点1：.call()方法的作用是将函数内部的this指针指向第一个参数，并将其后的参数作为函数的参数传入，然后调用该函数；

知识点2：每个函数内部都默认有一个“this”指针，根据函数调用方式的不同，其指向也不同。

我们明确了这两个点，就接着来看代码：

obj.fun(function(a,b) {
  console.log(a,b,this);
})

让我们进入obj.fun方法内部，编译器会将该函数按照如下方式解析：

// obj.fun
function(callback) {
  this = obj // 在该方法内，this指针指向obj对象
  callback = function(a,b) {
    console.log(a,b,this)
  }  // 参数率先被赋值
  var i
  i = 2
  callback.call(i,this);
}

当浏览器解析到callback.call(i,this)这句时，让我们进入callback函数内部看看发生了什么：

function(a,b) {
  this = 2 // 我们使用call的第一个参数将函数内的this指针指向数字2
  a = obj
  b = undefined // 因为我们在call中只传入了一个参数
  console.log('a:',a,'b:',b,'this:',this);
}
//输出结果  a: {key: 1, fun: ƒ}fun: ƒ (callback)key: 1__proto__: Object b: undefined this: Number {[[PrimitiveValue]]: 2}

1. 首先要明白obj.fun()的时候 此时的this指向obj;
2. 然后要明白callback.call(i,this) 这句代码是在callback内部的this指正改变了指向(callback内部的this本应指向Window),现在变成指向了i;
3. 然后在看往里面传的参数，callback.call(i,this),只有一个this,然而真正的callback函数function(a,b)是两个参数，所以a=obj(原来的this), 参数b没有传，所以是undefined。

（可以是试试再传一个参数进去比如callback.call(i,this,10),这时候10就是我们要输出的b了）

撒花~