想要確定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。
相关推荐：
以上是JavaScript中的this規則及this物件用法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
