JavaScript中的this規則及this物件用法實例

想要確定this裡規則是什麼，幾條規則決定函數裡的 this 是什麼。想確定 this 是什麼其實非常簡單。總體的規則是，透過檢查它的呼叫位置，在函數被​​呼叫的時候確定 this。它遵循下面這些規則，接下來以優先順序說明。

規則

1、如果在呼叫函數時使用 new 關鍵字，那麼函數裡的 this 就是一個全新的物件。

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2、如果使用 apply、call 或 bind 呼叫函數，那麼函數裡的 this 就是作為參數傳進去的物件。

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3、如果函數作為一個方法調用，就是說如果使用點符號調用函數，那麼 this 就是擁有這個函數作為屬性的物件。換句話說，當一個點在函數呼叫的左邊時，this 就是這個點左邊的物件。

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4、如果函數作為一個純粹的函數調用，也就是說，它在沒有上述任何條件的情況下被調用，那麼 this 就是全域物件。在瀏覽器裡，就是 window 物件。

function fn() {
  console.log(this);
}
// 如果在浏览器里调用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

注意這個規則其實和第三個規則是一樣的，差別在於沒有宣告為方法的函數會自動成為全域物件 window 的屬性。因此，這其實是一個隱式的方法呼叫。當我們呼叫 fn()，其實就會被瀏覽器理解為 window.fn()，所以 this 就是 window。

console.log(fn === window.fn); // -> true

5、如果上述規則有多個適用，那麼優先權較高的就會設定 this 值。

6、如果是 ES2015 裡的箭頭函數，那麼它將忽略上述所有規則，並在創建的時候接收包含它的作用域作為 this 的值。想確定 this 具體是什麼的話，只需從創建箭頭函數那裡往上一行，看看那兒的 this 是什麼，箭頭函數裡的 this 值和它一樣。

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

看回第三個規則，當我們呼叫 obj.createArrowFn() 的時候，createArrowFn 裡的 this 是 obj，因為這是方法呼叫。因此，obj 會在 arrowFn 裡綁定到 this 上。如果我們在全域作用域建立一個箭頭函數，那麼 this 值就會是 window。

應用規則

讓我們來看一個程式碼範例，並應用這些規則。試試看能否弄清楚不同的函數呼叫下，this 是什麼。

確定應用了哪一條規則

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() 屬於第三條規則，方法呼叫。另一方面，print() 屬於第四條規則，純粹的函數呼叫。對於 print() 來說，我們在呼叫的時候沒有使用 new、bind/call/apply 或點符號，所以它對應了規則四，this 就是全域物件 window。

當適用多個規則的時候

當適用多個規則的時候，使用清單裡更高優先順序的規則。

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

如果規則二和規則三同時適用，那麼規則二佔優。

obj1.print.call(obj2); // -> { value: 17 }

如果規則一和規則三同時適用，那麼規則一佔優。

new obj1.print(); // -> {}

函式庫

有些函式庫有時候會故意將 this 值綁定到某些函數裡。而通常會在函數裡將最有用的值綁定到 this 上使用。舉個例子，jQuery 把 this 綁定到 DOM 元素上，在回呼中觸發一個事件。如果某個函式庫出現一個不太符合上述規則的 this 值，那麼請仔細閱讀這個函式庫的文檔，它很有可能使用 bind 綁定了。

this物件是在函數運行時，基於函數的執行環境綁定的。下面跟大家介紹js中this物件用法的詳細分析，其實這句話的本質就是，誰呼叫了函數，this就指向誰

具體的來說，通常有以下幾種情況：

全域函數

在全域環境中，this指向Window

   
//例子1
 function A() {
 console.log(this)
 }
 A();//Window

上面的例子很簡單，函數A在全域環境中執行，也就是全域物件Window調用了函數。此時this指向Window

物件方法

當物件方法呼叫時，this指向呼叫該方法的物件

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

到這裡我們舉的例子都比較簡單易懂，接下來來一個有趣的：

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

這個例子和前一個例子不一樣，運行c.getFunc()時，首先返回的是一個匿名函數，我們將這個函數賦值給cFun ，接著在全域環境中呼叫了cFun()，所以此時this指向的還是Window。

如果我們一定要讓這裡回傳的是c物件呢？在開頭我們說過，this物件是在函數執行時確定的，在例子3中，執行c.getFunc()時，this物件指向的還是c，所以我們只要保持住這個this就好了,對上面的程式碼稍微改動：

   
//例子4
 var c = {
 getFunc:function(){
  var that = this //在这里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

這也就是我們常常可以在一些程式碼中看到var self = this或var that = this之類的原因了。

call和apply

此時this物件通常指向函數中指定的this值(注意這裡的通常2字，考試要考的)

call和apply算是老生常談，但還是稍微介紹下，怕新同學可能沒接觸過（其實是為了湊點字數），拿call來說，語法是這樣的

fun.call(thisArg, arg1, arg2, ...)

   

這個方法怎麼用呢，看下面的範例：

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

   

在这里我们就可以看出call函数的意思了:指定一个对象o1去调用其他对象o2的方法，此时this对象指向o1

好了，那为什么前面我们说通常呢？因为，这里的thisArg是可以指定为null和undefined的。请看：

   
//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

   

此时的this指向全局对象Window

箭头函数

es6中的箭头函数现在也用的比较频繁，但是有个需要注意的点是：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

其实出现这种情况的根本原因是:箭头函数没有this对象，所以箭头函数的this就是外层代码的this

//例子7
 var f = {
  getThis:()=>{
   console.log(this)
  }
 }
 f.getThis()//Window

   

这个例子和前面例子2是基本一样的，只是把普通函数改写成箭头函数，但是此时的this对象已经指向了外层的Window。

考虑到这一点可能不好理解，我们再看几个例子:

   
//例子8
 var g = {
 getThis:function(){
  return function(){console.log(this)}
 }
 }
 var h = {
 getThis:function(){
  return ()=> console.log(this)
 }
 }
 g.getThis()()//Window
 h.getThis()()//h

这个例子里，g的getThis写法就和之前的例子3一样，由于函数在全局环境中运行，所以此时this指向Window；h的getThis使用了箭头函数，所以this指向了外层代码块的this所以，此时this指向的是h。

总结

一般情况下this对象指向调用函数的对象，全局环境中执行函数this对象指向Window

在call和apply函数中this指向指定的对象，如果指定的对为undefined或者null，那么this对象指向Window

在箭头函数中，this对象等同于外层代码块的this。

相关推荐：

JS中的this、apply、call、bind实例分享

函数调用的不同方式及this的指向详解

html的标签中的this应该如何使用

以上是JavaScript中的this規則及this物件用法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！