Javascript：必須知道的Javascript知識點之“this指標”

文章目錄

• 規則1
• 規則2
• 規則3
• 使用apply
• 使用call

很多人都知道this指標，這篇文章的主要目的是為了培訓我們公司的新人。預設的this指標指向規則1

this指標預設指向方法調用時為其指定的對象，如：obj.fun()，fun方法體中的this指標指向obj。

1 var user = { name: '段光偉' };2 user.getName = function(){ return this.name; };3 user.getName();  //返回‘段光偉’

1 var user = { name: '段光偉' };2 user.getName = function(){ return this.name; };3 user.getName();  //返回‘段光偉’4 5 window.name = '李妞妞';6 window.getName = user.getName7 window.getName();  //返回‘李妞妞’8 getName();  //返回‘李妞妞’

規則2

如果在方法調用時沒有為方法指定對象則this指標預設指向window，如：fun()，fun方法體中的this指標指向window。

1 var fun = function(){2   return this;3 }4 fun();  //返回window對象

規則3

沒有在方法體中的代碼可以看作執行在一個匿名方法，根據規則2可以推論出其this指標指向window。

1 this  //window對象

改變this指標的預設指向使用apply

1 var user = { name: '段光偉' };2 user.hi= function(message){ return this.name+':'+message; };3 window.name = '李妞妞'4 user.hi('你好');  //輸出‘段光偉:你好’5 user.hi.apply(window, ['你好']);  //輸出‘李妞妞:你好’

使用call

1 var user = { name: '段光偉' };2 user.hi= function(message){ return this.name+':'+message; };3 window.name = '李妞妞'4 user.hi('你好');  //輸出‘段光偉:你好’5 user.hi.call(window, '你好');  //輸出‘李妞妞:你好’

建構函式中的this指向建構函式中的this指標預設指向執行正在構造的對象。

1 var User = function(name){2    this.name = name;3 };4 User.prototype.hi = function(){5    return this.name;6 };7 var user = new User('段光偉');8 user.hi();  //輸出‘段光偉’

最後的小測試猜猜最後的輸出時什嗎？

 1 var User = function(name){ 2     this.name = name; 3  }; 4  User.prototype.hi = function(){ 5     return this.name; 6  }; 7  var user = new User('段光偉'); 8  user.hi();  //輸出‘段光偉’ 9 10 var hi = user.hi;11 12 hi();  //猜猜這裡的輸出

object expression.method();會被翻譯為object expression.method.call(object expression);。而var temp = object expression.method;temp();會被翻譯為var temp = object expression.method;temp.call(window)。