React:JS中的this和箭頭函數
阿新 • • 發佈:2018-02-14
-c c++ upload per 初始 正常 develop pan pre
JS中的this和純面向對象(java,c++)中的this有點不大一樣,其原因就是作用域不同,導致JS中的this的指向不明確,在java中的this指當前對象的this或當前類的this,在JS中function(){}裏面沒有特殊指定this的指向,這裏的this時指向Window,但是在嚴格模式下,function(){return this}裏面的this是undefined,箭頭函數裏面的this反而是Window,我們來看個例子(為了簡單點,代碼下面的>就是控制臺的輸入,<就是控制臺的輸出):
//在控制臺先輸入這個函數, function Person(){this.age = 0; setInterval(function growUp() {
//此時的this時指向window,並不指向上面的this.age this.age++; },1000) } >var p = new Person() >p
//因為this時指向window,並不指向上面的this.age,所以沒有變
<Person {age: 0}
//age是全局變量,沒有給初始值,++後就變成Not a Number >age NaN
//給age賦初值,下面就開始++le age = 0 0 age 5 age 8 age 10 age 14 age16
以前流行的一種解決方法
//在控制臺先輸入這個函數, function Person(){ //定義一個局部變量把當前的this放在裏面,下面函數就可以使用了 let that = this; this.age = 0; setInterval(function growUp() { //此時的this時指向window,並不指向上面的this.age that.age++; },1000) } //一切正常 >let p = new Person(); >p <Person {age: 0} >p <Person {age:1} >p <Person {age: 2} >p <Person {age: 3}
只有這一種解決方法?這時候箭頭函數該登場了,箭頭函數不會創建自己的this
;它使用封閉執行上下文的this
值。因此,在下面的代碼中,傳遞給setInterval
的函數內的this
與封閉函數中的this
值相同,簡單來說,箭頭函數沒有自帶this,他的this是來自上一級,所以剛剛好解決這個問題:
function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| 正確地指向person 對象 }, 1000); } undefined >let p = new Person(); <undefined >p <Person {age: 1} >p <Person {age: 2} >p <Person {age: 3}
我們再看寫栗子:
function f(){console.log(this.a)} >f() <undefined //此時call傳入參數,這個參數可以理解為this,但對this不造成影響 >f.call({a:1}) <1 >f.apply({a:1}) <1
還有個要記的,當箭頭函數要返回一個對象時,{}要用小括號括起來,比如:f = () => ({}) ,大括號表示一個對象
更多箭頭函數例子:API
React:JS中的this和箭頭函數