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

很多人都知道this指針，這篇文章的主要目的是為了培訓我們公司的新人。

默認的this指針指向

規則1

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

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

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

window.name = '李妞妞';
window.getName = user.getName
window.getName();  //返回‘李妞妞’
getName();  //返回‘李妞妞’

規則2

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

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

規則3

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

this  //window對象

改變this指針的默認指向

使用apply

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

使用call

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

構造函數中的this指向

構造函數中的this指針默認指向執行正在構造的對象。

var User = function(name){
   this.name = name;
};
User.prototype.hi = function(){
   return this.name;
};
var user = new User('段光偉');
user.hi();  //輸出‘段光偉’

最后的小測試

猜猜最后的輸出時什么？

var User = function(name){
    this.name = name;
 };
 User.prototype.hi = function(){
    return this.name;
 };
 var user = new User('段光偉');
 user.hi();  //輸出‘段光偉’

var hi = user.hi;

hi();  //猜猜這里的輸出

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