<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??一站式輕松地調用各大LLM模型接口,支持GPT4、智譜、豆包、星火、月之暗面及文生圖、文生視頻 廣告
                [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' 指向是由最外層最近的一層非箭頭函數
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看