Javascript this 的一些學習總結02【轉自cnblogs的JKhuang】

接上一篇Javascript this 的一些學習總結02【轉自cnblogs的JKhuang】

引用類型以及this的null值

對於前面說起的情形，還有例外的狀況，當調用表達式左側是引用類型的值，可是this的值倒是null，最終變爲全局對象（global object）。 發生這種狀況的條件是當引用類型值的base對象剛好爲活躍對象（activation object）。

當內部子函數在父函數中被調用的時候就會發生這種狀況，經過下面的示意代碼介紹活躍對象：

// Declares foo function.
function foo() {
  function bar() {
    alert(this); // global
  }
  // The same as AO.bar().  
  bar();
}

因爲活躍對象（activation object）老是會返回this值爲——null（用僞代碼來表示AO.bar()就至關於null.bar()），而後，this的值最終會由null轉變爲全局對象。

當函數調用包含在with語句的代碼塊中，而且with對象包含一個函數屬性的時候，就會出現例外的狀況。with語句會將該對象添加到做用域鏈的最前面，在活躍對象的以前。 相應地，在引用類型的值（標識符或者屬性訪問）的狀況下，base對象就再也不是活躍對象了，而是with語句的對象。另外，值得一提的是，它不單單隻針對內部函數，全局函數也是如此， 緣由就是with對象掩蓋了做用域鏈中更高層的對象（全局對象或者活躍對象）：

函數做爲構造器被調用時this的值

函數做爲構造函數時，咱們經過new操做符建立實例對象是，它會調用Foo()函數的內部[[Construct]]方法；在對象建立以後，會調用內部的[[Call]]方法，而後全部Foo()函數中this的值會設置爲新建立的對象。

// Declares constructor
function Foo() {
  // The new object.
  alert(this);
  this.x = 10;
}
 
var foo = new Foo();
foo.x = 23;
alert(foo.x); // 23

手動設置函數調用時this的值

Function.prototype原型上定義了兩個方法，容許手動指定函數調用時this的值。這兩個方法分別是：.apply()和.call()。這兩個方法都接受第一個參數做爲調用上下文中this的值，而這兩個方法的區別是傳遞的參數，對於.apply()方法來講，第二個參數接受數組類型（或者是類數組的對象，好比arguments）, 而.call()方法接受任意多的參數（經過逗號分隔）；這兩個方法只有第一個參數是必要的——this的值。

經過示例代碼介紹call()方法和apply()方法的使用：

var myObject = {};
 
var myFunction = function(param1, param2) {
    
  //setviacall()'this'points to my Object when function is invoked
  this.foo = param1;
  this.bar = param2;
    
  //logs Object{foo = 'foo', bar = 'bar'}
  console.log(this); 
};
 
// invokes function, set this value to myObject
myFunction.call(myObject, 'foo', 'bar'); 

// logs Object {foo = 'foo', bar = 'bar'}
console.log(myObject);

call()方法第一個參數是必要的this值，接着咱們能夠傳遞任意多個參數，接着介紹apply()方法的使用。

var myObject = {};
 
var myFunction = function(param1, param2) {
    
  //set via apply(), this points to my Object when function is invoked
  this.foo=param1;
  this.bar=param2;
    
  // logs Object{foo='foo', bar='bar'}  
  console.log(this); 
};
 
// invoke function, set this value
myFunction.apply(myObject, ['foo', 'bar']); 

// logs Object {foo = 'foo', bar = 'bar'}
console.log(myObject);

經過與call()方法對比，咱們發現apply()方法和call()方法沒有太大的區別，只是方法簽名不同。

總結

本文介紹Javascript中this的使用，更重要的是幫助咱們能更好地理解this值在全局、函數、構造函數以及一些特例的狀況中值的變化。

對於在函數上下文中this的值是函數調用者提供而且由當前調用表達式的形式而定的。若是在調用括號()的左邊有引用類型的值，那麼this的值就會設置爲該引用類型值的base對象。 全部其餘狀況下（非引用類型），this的值老是null。然而，因爲null對於this來講沒有任何意義，所以會隱式轉換爲全局對象。

對於特例狀況，咱們要記住賦值符、逗號操做符以及||邏輯表達式，會使this丟失原先的引用類型值，變成了函數類型，this的值就變成了全局對象了

參考

1. http://dmitrysoshnikov.com/ec...英文版

2. http://blog.goddyzhao.me/post... 譯文

3. https://net.tutsplus.com/tuto...