this -- 指向 · 前端知識 -- 學習整理

[TOC] >[success] # this 通俗理解篇 ~~~ 1.this 是 JavaScript 的一個關鍵字，一般指向'調用它的對象'。 1.1.this 指向的應該是一個對象，更具體地說是函數執行的'上下文對象' 1.2.'1.1'說的對象指向的是'調用它'的對象，如果調用它的不是對象或對象不存在，則會指向全局對象（嚴格模式下為 undefined） 2.this的值是在執行的時候才能確認，定義的時候不能確認,像dom 綁定事件來說，最后執行dom的綁定方法實際是dom 非事件，因此this 指向為當前dom對象 ~~~ >[danger] ##### 舉例子來理解 * 案例一 ~~~ 1.下面函數fn 是通過對象'o'調用的,因此根據上面'this一般指向'調用它的對象'那么此時的this 就可以很好的理解為什么打印的是'o' ~~~ ~~~ // 代碼 1 var o = { fn() { console.log(this) } } o.fn() // o ~~~ * 案例二 ~~~ 1.代碼2和代碼1同理，不同點是 a 是通過類A 創建的,但是方法的調用是a調用的，因此this 是a ~~~ ~~~ // 代碼 2 class A { fn() { console.log(this) } } var a = new A() a.fn()// a ~~~ * 案例三 ~~~ 1.下面fn 由于沒有找到調用 fn 的對象，所以 this 會指向全局對象指向是window ~~~ ~~~ // 代碼 3 function fn() { console.log(this) } fn() // 瀏覽器：Window；Node.js：global ~~~ * 案例四 ~~~ 1.雖然現在的fn 是在fn2內部執行，但是fn 由于沒有找到調用 fn 的對象，所以 this 會指向全局對象指向是window ~~~ ~~~ function fn() {console.log(this)} function fn2() {fn()} fn2() // Window；Node.js：global ~~~ * 案例五 ~~~ 1.雖然fn 是在函數fn2 中執行，并且fn2是對象obj 調用，fn2 的this 指向是obj，但是fn2()中的 this 指向并不會傳遞給函數 fn()，因此fn也是window ~~~ ~~~ function fn() {console.log(this)} function fn2() {fn()} var obj = {fn2} obj.fn2() // Window；Node.js：global ~~~ * 案例六 ~~~ 1.fn 由于沒有找到調用 fn 的對象，所以 this 會指向全局對象指向是window，但是這里要注意一點 ES6 下的 class 內部默認采用的是嚴格模式，嚴格模式下不在是window 而是 undefined ~~~ ~~~ class B { fn() { console.log(this) } } var b = new B() var fun = b.fn fun() // undefined ~~~ >[info] ## 箭頭函數 ~~~ 1.不綁定 arguments 對象，也就是說在箭頭函數內訪問 arguments 對象會報錯； 2.不能用作構造器，也就是說不能通過關鍵字 new 來創建實例； 3.默認不會創建 prototype 原型屬性； 4.不能用作 Generator() 函數，不能使用 yeild 關鍵字。 5.'this' 指向是由最外層最近的一層非箭頭函數 ~~~ ~~~ 1.this的指向主要分為五種，拋開(with 和 eval)，其中有四種屬于在'es5' 中就存在的，另一種是'es6'中才有的 1.1.作為對象的方法調用（指向'對象'） 1.2.作為普通函數調用（指向全局對象'Window） 1.3.構造器調用（構造函數中的this 指向是返回的對象） 1.4.'Function.prototype.call' 或 'Function.prototype.apply' 調用 1.5.箭頭函數的'this'調用(es6) （'this' 指向是由最外層最近的一層非箭頭函數），因此不會受到call apply 的影響 ~~~ >[danger] ##### 案例 * 案例一 ~~~ 1.'this' 指向是由最外層最近的一層非箭頭函數,當然你也需要看著最外層非箭頭函數的函數this指向是誰，那么對應的箭頭函數this指向就是誰 2.下面的getName 箭頭函數雖然是a調用的但是要明確，箭頭函數是看最近的非箭頭函數的指向，下面的getName 不存在被非箭頭函數包裹，因此它的this 就是window ~~~ ~~~ const?a?=?{ ????name:'w', ????getName:()=>{ ????????console.log(this) ????} } a.getName() // window ~~~ * 案例二 ~~~ 1.箭頭t 最外層非箭頭函數是getName，此時getName 是 a 調用，所以箭頭函數就是this 就是a ~~~ ~~~ const?a?=?{ ????????name:'w', ????????getName(){ ????????????const?t?=?()=>{console.log(this)} ????????????t() ????????} ????} ????a.getName() // a ~~~ * 案例三 mdn的案例 ~~~ // 創建一個含有bar方法的obj對象， // bar返回一個函數， // 這個函數返回this， // 這個返回的函數是以箭頭函數創建的， // 所以它的this被永久綁定到了它外層函數的this。 // bar的值可以在調用中設置，這反過來又設置了返回函數的值。 var obj = { bar: function() { var x = (() => this); return x; } }; // 作為obj對象的一個方法來調用bar，把它的this綁定到obj。 // 將返回的函數的引用賦值給fn。 var fn = obj.bar(); // 直接調用fn而不設置this， // 通常(即不使用箭頭函數的情況)默認為全局對象 // 若在嚴格模式則為undefined console.log(fn() === obj); // true // 但是注意，如果你只是引用obj的方法， // 而沒有調用它 var fn2 = obj.bar; // 那么調用箭頭函數后，this指向window，因為它從 bar 繼承了this。 console.log(fn2()() == window); // true ~~~ >[info] ## 各種數組循環的指向 ~~~ 1.every()、find()、findIndex()、map()、some()等這些數組方法回調函數的指向經常蒙蔽，這個章節就是解決蒙蔽 2.先明確這些方法的參數使用以find為例 'arr.find(callback[, thisArg])'我們常用一般是callback，但是其實還有一個選填參數' thisArg' 可以指定內部this指向 ~~~ >[danger] ##### 案例 * 案例一 ~~~ 1.forEach 它有兩個參數，第一個是回調函數，第二個是 this 指向的對象，這里只傳入了回調函數，第二個參數沒有傳入，默認為 undefined，所以正確答案應該是輸出全局對象。 ~~~ ~~~ var dx = { arr: [1] } dx.arr.forEach(function() {console.log(this)} ~~~ * 案例二 ~~~ 1.雖然dx是arrF調用，但是現在要打印this是回調函數，因為沒設置第二個參數，所以是undefined 因此this 是window ~~~ ~~~ const a = {} var dx = { arr: [1], arrF(){ this.arr.forEach(function(){console.log(this)}) } } dx.arrF() // window ~~~ * 案例三 ~~~ 1.設置了forEach 的第二個參數因此指向是 a ~~~ ~~~ var a = {} var dx = { arr: [1], arrF(){ this.arr.forEach(function(){console.log(this)},a ) } } dx.arrF() // a ~~~ * 案例三 ~~~ 1.箭頭函數指向里的最近的非箭頭函數，并且箭頭函數的this 不能改變，此時是dx ~~~ ~~~ var a = {} var dx = { arr: [1], arrF(){ this.arr.forEach(()=>{console.log(this)},a ) } } dx.arrF() // dx ~~~ >[success] # this 指向廢話繞懵逼理解法 >[danger] ##### 作為對象的方法調用 -- 指向'對象' ~~~ 1.下面案例如果是通過對象調用，自己的方法可以發現，此時的方式'this' 指向的是當前對象 ~~~ ~~~ var testObj = { a:1, getA:function () { console.log(this === testObj) // true console.log(this.a) // 1 } } testObj.getA() ~~~ >[danger] ##### 作為普通函數調用 -- 指向全局對象'Window' ~~~ 1.當調用者不是對象，也就是普通函數調用的時候，'this'的指向是全局對象，這個全局對象也就是'windows' ~~~ * 案例一 ~~~ window.name = 'wang' const test = function () { console.log(this) // Window console.log(this.name) // wang } ~~~ * 案例二 ~~~ var testObj = { a:1, getA:function () { console.log(this === testObj) // false console.log(this.a) // undefined } } const test = testObj.getA test() ~~~ * 案例三 ~~~ 1.要注意變量的作用域和 this的改變，這時候作用域最近的是name，但是 this普通函數就是指向'window' ~~~ ~~~ function test() { let name = 'wang' var callback = function () { console.log(name) console.log(this) } callback() } test() ~~~ >[danger] ##### 構造器調用 -- 構造函數中的this 指向是返回的對象 ~~~ 1.構造函數中的this 指向是返回的對象 ~~~ ~~~ function Person(){ this.name = 'wang' } const obj = new Person() console.log(obj.name) // wang ~~~ ~~~ 1.如果構造函數中返回的是一個對象類型，那么此時輸出的是該對象中的內容 ~~~ ~~~ function Person(){ this.name = 'wang' // 注意這里構造函數返回的是一個對象，但如果沒有返回值或者返回值是非對象 // 就不會出出現下面案例的問題例如return 'yi' 也不會出現下面的問題 return { name:'yi' } } const obj = new Person() console.log(obj.name) // yi ~~~ >[danger] ##### 'Function.prototype.call' 或 'Function.prototype.apply' 調用 ~~~ 1.'call' 和 'apply' 會改函數的this指向 ~~~ >[danger] ##### 箭頭函數 -- 'this' 指向是由最外層最近的一層非箭頭函數