this關鍵字是JavaScript中最復雜的機制之一,是一個特別的關鍵字,被自動定義在所有函數的作用域中,但是相信很多JsvaScript開發者并不是非常清楚它究竟指向的是什么。本文旨在對this進行初步的了解。

person1.grow();//25
setTimeout(person1.grow, 100);//undefined
至所以出現兩個不一樣的結果,是因為grow函數丟失了同this之間的綁定。
對于這個問題,暫且保留。繼續往下看
person2.grow();//undefined
這是因為在person2的grow函數中,this指代的對象即是全局對象window(非嚴格模式下,嚴格模式下this指代的為undefined).
對于這個問題,比較好解決,我們的目的是綁定在person2作用域上。
因此我們可以像下面這樣書寫:
將this賦值給self;因為在setTimeout函數外部,this對象指代的是person2,我們可以將其賦值給self,解決此處this綁定的問題。self只是一個可以通過詞法作用域和閉包進行引用的標識符,不關系this綁定的過程中發生了什么。

ES6(ECMAScript6)引入了一個箭頭函數,和上面一樣可以解決此問題。=>是ES6中添加的一個特殊的語法格式用于函數聲明。
100
胖箭頭函數在涉及到this綁定時的行為和普通函數的行為完全不一致,它放棄了普通this綁定的規則,使用當前的詞法作用域覆蓋this本來的值。
“胖箭頭”的用法,胖箭頭通常被認為是function關鍵字的簡寫。

言歸正傳,繼續探討解決此問題的其它方法,有一個更好的方法是正確的使用和包含this機制。

bind(this),此處的this指代的是person對象,作用與胖箭頭一樣。
到這個地方,對于person1的問題,我們仍然沒有解決。
前面的方法對其都是不起作用的,很明顯,我們在person1對象外部使用setTimeout去調用函數,this會指代全局對象window(同樣是非嚴格模式下),因此,此處采用簡單粗暴的方法,用call強制性的將this綁定到person1上。

希望本文能對你了解JavaScript的關鍵字this有所幫助。
- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法(二)
- JS this詞法(三)
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證(登錄/注冊)
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單(一)
- Bootstrap表單(二)
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異(checkbox)
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器(全)
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述(推薦)
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解