當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
理解严格模式下JavaScript的this指向的变化
生活随笔
收集整理的這篇文章主要介紹了
理解严格模式下JavaScript的this指向的变化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
全局代碼中的this
-
全局中的代碼不管是否處于嚴格模式下,它的this都執行Window
console.log(this) // Window 復制代碼
箭頭函數的this
- 箭頭函數的this由上下文的詞法作用域決定,即在哪定義的就指向哪里的this
普通函數中的this
-
直接調用函數(在全局或者其他函數內)
-
在非嚴格模式下,this默認指向全局變量(window或global)
```js // 在瀏覽器中,全局對象是window, 在NODE中是global function test() {console.log(this) // Window 或者 global(function(){console.log(this) // Window 或者 global}) } test() ``` 復制代碼- 在嚴格模式下,this將保持進入執行環境的值,所以,如果沒有指定環境,則默認undefined
- 特殊點:當函數作為回調函數時,需要注意是否隱式綁定了所屬對象,例如:當作為setTimeout的參數時,就默認將函數綁定了window對象
-
-
作為對象方法調用則指向當前對象
- 注意:如下列代碼中的將對象的方法賦值給其他變量在調用,this將按上面的普通方法直接調用函數規則處理
-
執行new操作時,構造函數的this指向正在構造的新對象
function TEST(){this.a = 'obj';console.log(this) //new操作時 TEST { a: 'obj'} this指向正在構造的對象(返回的對象) } var o = new TEST(); console.log(o); // TEST { a: 'obj'} this指向剛剛構造的對象 復制代碼- 對es6的class Person {} 使用new操作時,this執行它調用的環境
- 其他情況下Constructor的執行與普通函數沒有區別,誰調用它則指向誰
-
設置call/apply/bind后調用,則指向其第一個參數的this,如果為空則在嚴格模式下指向undefined,在非嚴格模式下指向window或global
// 語法 // 1、函數.apply(對象, [參數列表]) // 2、函數.call(對象, arg1,arg2,arg3…argn) // 3、函數.bind(對象) // 'use strict' var a = 'global'function name() {console.log('name', this.a)}function name2() {console.log('name2', this)}var obj = {a: 'obj'}name.call(obj) // obj this指向通過call綁定的obj對象// name2.call() // 嚴格模式為undefined,非嚴格模式為widow或global 復制代碼 -
作為一個dom事件處理函數,它的this指向添加處理事件的元素(一些瀏覽器在使用非addEventListener的函數動態添加監聽函數時不遵守這個約定)
// html <div id="A"><div id="B"></div> </div> // javascript var a = document.getElementById('A'); var b = document.getElementById('B'); function logs (e) {console.log(e.target, e.target===this); // 當e.target與e.currentTarget相等時為trueconsole.log(e.currentTarget, e.currentTarget===this); // 總是true } a.addEventListener('click', logs, false); // 點擊A時, // 輸出 A節點信息,true \n A節點信息, true // 點擊B時, // 輸出 B節點信息,false \n A節點信息, true // currentTarget表示實際綁定處理事件的元素 // target表示觸發事件的元素(如點擊B) // 所以處理事件中的this指向實際添加處理事件的元素 復制代碼 -
作為一個內聯事件處理函數,
- 當代碼被內聯on-event 處理函數調用時,它的this指向監聽器所在的DOM元素,與模式沒有關系
- 當代碼包裹在內部函數中時,在非嚴格模式指向window或global對象(即非嚴格模式下調用的函數未設置this時指向的默認對象),在嚴格模式下為undefined
轉載于:https://juejin.im/post/5d11f193f265da1bd605b26b
總結
以上是生活随笔為你收集整理的理解严格模式下JavaScript的this指向的变化的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 操作系统页面置换算法
- 下一篇: Springboot跨域 ajax js