比如说有这么一段代码:

var O = function(data){
  this.data = data
}
O.prototype.selfCall = function(data){
  if(data.length>1){
    data.forEach(function(e){console.log(this)})
  }else{
    console.log(this);
  }
}
var o = new O("test")
o.selfCall([1])
o.selfCall([1,2])

输出的结果是:

O { data: 'test' }
{ DTRACE_NET_SERVER_CONNECTION: [Function],
  DTRACE_NET_STREAM_END: [Function],
  DTRACE_HTTP_SERVER_REQUEST: [Function],
  DTRACE_HTTP_SERVER_RESPONSE: [Function],
  DTRACE_HTTP_CLIENT_REQUEST: [Function],
  DTRACE_HTTP_CLIENT_RESPONSE: [Function],
  ...

第一个输出的this是确实指向了对象O,但是第二个因为套了一个function,所以这时候的this就指向了函数本身。
如果想用this指向O的话,可以这么写:

O.prototype.selfCall = function(data){
  n = this
  if(data.length>1){
    data.forEach(function(e){console.log(n)})
  }else{
    console.log(this);
  }
}

就是在函数外面用n存一下this,之后靠着函数的lexical(是这么说的么?)关系,拿外层的n来引用O。不过前段时间看过别人讲=>可以传递this。当时不知道这有什么意义,现在看来确实是很好的一个特性。所以上面的程序可以改成这样:

O.prototype.selfCall = function(data){
  if(data.length>1){
    data.forEach(e=>{console.log(this)})
  }else{
    console.log(this);
  }
}

总结:

  • function(){}里面的this指代的是function本身

  • 可以通过lexical scope借助一个变量把外面的this传进function(){}

  • =>不仅仅让匿名函数的书写更简单,还有一个非常好的特性:this的传递

  • =>同时还会避免arguments指向匿名函数:参见回调+遍历


beneon
16 声望1 粉丝

业余编程,也就是工作之余做一下。