Vue踩坑之旅——methods

蘇水軒發表於2018-03-15

問題:methods中的某一個方法用es6箭頭函式寫的,訪問不到例項中的變數,後來輸出了this,發現指向了元件export的物件,並非例項(嚴格模式下undefined)。

解決: 將methods中的方法全部改為es5寫法編寫。

原因: 箭頭函式會繫結到ParentContext,造成訪問例項失敗。

預防: 1. 在需要用到例項中屬性的時候,儘量使用es5函式編寫。

            2. 文件中其實就已經提到不應該使用箭頭函式來定義 method 函式,以後看文件要更加仔細。

引申: es6箭頭函式需要注意的第一個點: 函式體內的this物件即定義時所在的物件,而不是使用時所在的物件。例如在函式中使用setTimeout,並不會改變this物件的指向到window,而是依然指向函式所在的物件。 箭頭函式本沒有自己的this, 其內部的this就是外層程式碼塊的this。因此,箭頭函式不能用作建構函式。

          可以充分利用箭頭函式的this繫結性來進行函式體內的各種函式巢狀。

延展: 由於箭頭函式的侷限性,es7提出了函式繫結運算子,即::運算子,用來取代call, apply, bind呼叫。

           foo::bar;  //等同於

           bar.bind(foo);



相關文章