[Javascript试验课] What is this?

2024年1月23日 156次阅读来源: fishenal

javascript 中的关键词 this 代指实行上下文（Execution Contexts），函数作用域中的this，明白上来说是指挪用这个函数的对象。置信以下几个试验能够加深对this关键字的明白。

试验一：全局下的this

全局作用域下的函数内里的this，明显即是全局对象window

function test(){
  console.log(this === window) //true
}
test()

所以，明显，能够经由过程this，转变window内里的全局变量

var global = "global"

function test(){

  this.global = "global2"

}
test()
console.log(global)//global2

所以，假如你创建了一个组织函数，然后不小心挪用了它，那末相当于你为全局对象赋值了，这个缺点能够经由过程ES5内里的"use strict"来处理。

"use strict";

var global = "global"

function test(){
  console.log(this)//undefined
  this.global = "global2"//TypeError because 'this' undefined

}
test();

严厉形式下,全局形式下的函数内部的this为undefined，而不会默以为window

试验二 : 对象中的this

经由过程一般对象声明的函数this

var myobject = {
  foo : function(){
    console.dir(this) //myobject
  }
}
myobject.foo()

foo内里的this指向挪用foo的对象myobject，这个对象内里只要一个要领foo，因而我们能够经由过程this操纵指向对象里的其他值

var myobject = {
  v : 5,
  foo :  function(){
        this.v ++
        console.log(this.v)//6
   } 
}

myobject.foo()

多层对象的状况下，this指向近来的一个对象，即谁直接挪用这个函数，谁是this

var myobject = {
  foo : {
    bar : function(){
        console.dir(this)//foo
    }
  }

}
myobject.foo.bar()

以上状况this指向foo对象，那末我们再斟酌以下的状况

var myobject = {
  foo : function(){
    console.dir(this)//myobject
    var bar = function(){
      console.dir(this)/*window "use strict" undefined*/
    }
    bar()
  }
}
myobject.foo()

我们能够发明，假如在foo函数里声明新的函数（闭包），比方绑定事宜，settimeout里的匿名函数等状况，这内里的this会变成window（严厉形式下undefined）。
形成这个毛病的原因是，bar()挪用的时刻，是全局对象window在挪用的它，而不是经由过程myobject挪用（换句话说myobject内里压根就没有bar），这类状况下假如要经由过程myobject挪用bar须要用到call或apply

var myobject = {
  foo : function(){
    console.log(this)//myobject
    var bar = function(){
      console.log(this)
    }   

    bar.call(myobject)//myobject
  }

}
myobject.foo()

明白为，函数中的this，跟挪用时的情况有关。

组织函数经由过程new来赋值情况也跟对象相似，比方

function testobject(){
  this.kk = 6;
  this.dd = function(){console.log(this)};
}

var fish = new testobject
fish.dd();

/*
[object Object] {
  dd: function (){window.runnerWindow.proxyConsole.log(this)},
  kk: 6
}
*/

new操纵符会将this指向组织函数组织出来的对象

试验三：事宜回调里的this

var myobject = {
  foo : function(){
    console.log(this)//myobject

    document.body.onclick = function(){
      console.dir(this)//[object HTMLBodyElement]
    }
  }
}
myobject.foo()

点击回调里的this指向点击对象

总结：处理办法

为防止this杂沓，能够采纳下面几种要领

经由过程变量通报

var myobject = {
  foo : function(){
    var that = this   
    document.body.onclick = function(){
      console.dir(that)//myobject
    }
  }
}
myobject.foo()

经由过程call或apply

var myobject = {
  foo : function(){
    var bar = function(){
      console.log(this)
    }   

    bar.call(myobject)//myobject
  }

}
myobject.foo()

直接用对象名替代this

var myobject = {
  v : 5,
  foo : function(){
    var bar = function(){
      console.log(++myobject.v)//直接修正myobject对象里的值
    }   
    bar();
  }

}
myobject.foo()

算法网