js中箭頭函數的this指向問題

根據定義this指向的是該函數所在作用域指向的對象,也就是說這個函數在那個對象的作用域中,this就指向誰。
在下面的實例中this指向的是vue,但是當setInterval中的匿名函數要使用vue中的值的時候,需要將this傳遞進匿名函數中。而在匿名函數中直接使用this,this指向的則是匿名函數。

 var vm=new Vue({
            el:'#app',
            data:{
                msg:'猥瑣發育,別浪~~!'
            },
            methods:{
                lang(){
                    //console.log(this.msg)
                    var _this=this;
                    setInterval(function(){
                        //獲取到頭的第一個字符
                        var start=_this.msg.substring(0,1)
                        //獲取到 後面的所有字符
                        var end=_this.msg.substring(1)
                        //重新拼接字符串並賦值給_This.msg
                        _this.msg=end+start
                    },400)

                    //vm實例會監聽自己身上打他中所有數據的改變,只要數據一發生改變,就會把最新的數據,
                    //從da't
                }
            }

接下來我們說一下箭頭函數
箭頭函數:this指向定義時的對象,也就是說箭頭函數一旦定義完成,它的指向是固定的,沒法改變,

它的指向是定義時所在的作用域,而不是執行時的作用域

個人總結:

1.箭頭函數的this指向是定義(聲明)時就綁定的,和執行無關

2.箭頭函數沒有自己的this,繼承了當前所在環境執行時的this指向
所以下面中this指向的是vue對象。

 var vm=new Vue({
            el:'#app',
            data:{
                msg:'猥瑣發育,別浪~~!'
            },
            methods:{
                lang(){
                    //console.log(this.msg)
                    
                    setInterval(()=>{
                        //獲取到頭的第一個字符
                        var start=this.msg.substring(0,1)
                        //獲取到 後面的所有字符
                        var end=this.msg.substring(1)
                        //重新拼接字符串並賦值給This.msg
                        this.msg=end+start
                    },400)

                    //vm實例會監聽自己身上打他中所有數據的改變,只要數據一發生改變,就會把最新的數據,
                    //從da't
                }
            }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章