vue中this指向的问题

发布于
2017-12-06

在下面的代码中，写了一个简单的例子，如果我们去执行vue的group方法，在forEarch里面，对变量进行push()，发现使用 app. 是可以的，使用 this. 就会报错，而group1方法用es6去定义函数，app. 和 this. 都可以执行，请问这是什么原因？ this在vue的函数里面不是一直指向vue实例吗。es6定义的函数没有出现这样的问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
</head>
<div id="app" style="width: 100%;height: auto;font-size:20px;">
    
</div>

<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            sList: [1,2,3],
              sResultList: []
        },
        methods:{
            group:function(){
                this.sList.forEach(function(obj){
                        app.sResultList.push(obj)
//                        this.sResultList.push(obj)
                })
            },
            group1:function(){
                this.sList.forEach((obj)=>{
                    this.sResultList.push(obj)
//                    app.sResultList.push(obj)
                })
            }
        },
    })
    $(function(){
        app.group()
    })
</script>
</html>

vue.js ecmascript-6 javascript

阅读 19.8k

4 个回答

得票最新

luozz

5.8k3629

发布于
2017-12-06

✓ 已被采纳

如果你用for循环，而不用forEach的话，这时候使用this就是可以的，造成这个原因就是forEach循环体是以一个函数体的形式去循环的，this总是指向事件的调用者，这点你应该有所了解，知道了这一点，大概就知道是怎么回事了。

clcaza

301

发布于
2018-01-05

接纳的答案回答不完全正确。

对于使用function定义的函数，它里面使用的this是由它的直接调用者决定（执行时）。如果没有直接的调用者，在非严格模式下，this指向window。

group()里的forEach函数使用的是匿名函数作为回调函数，它是没有直接的调用者的，所有this为window。

箭头函数是没有自己的this，在它里面使用的this指向的是定义箭头函数时（注意：并非执行时）所处的宿主对象。

group1()里定义的箭头函数宿主对象为vue实例，所以它里面使用的this为vue实例。

具体可以参考下：Vue实例里this的使用

kedaya

1.4k228

发布于
2017-12-06

forEach 函数中是迭代的一个function 这个function的词法作用域是全局对象 this自然就是window
而你用箭头函数就绑定了group1这个函数的词法作用域 this自然是绑定的vue的对象
vue会对method内部的函数以及各个钩子绑定自己的vue实例
但是你在method里面又定义了一个function 他的词法作用域跟bind就没有任何关系了