vue中或箭头函数中，this的指向问题

最新推荐文章于 2024-05-27 10:00:00 发布

小席vip

最新推荐文章于 2024-05-27 10:00:00 发布

阅读量7.2k

点赞数 5

本文链接：https://blog.csdn.net/weixin_39936058/article/details/87971593

版权

首先，在Vue所有的生命周期钩子方法（如beforeCreate，created，beforeMount，mounted，beforeUpdate， updated，beforeDestroy以及destroyed）里使用this，this指向调用它的Vue实例，即（new Vue）。

其次，箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象。

以下四个例子详细解释：

<!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(){
                //ES5的普通函数写法，这里的this指向app,指向vue实例
                this.......
            },
            group1:()=>{
            	//ES6的箭头函数写法，箭头函数没有自己的this,它的this事继承来的，指向在定义它时所处的宿主对象，在这里this指向window。
                this.......
            },
            group2:function(){
            	//这里的this同group中的this一样，指向vue实例
				this.sList.forEach(function(obj){         //匿名函数中的this
						//在匿名函数中，这里的this不指向vue实例，这里的this指向window，在严格模式下，this指向undefined ，要使用this，可以直接用app（即vue实例）。
                        app.sResultList.push(obj)
						//  this.sResultList.push(obj)
                })
			},
			group3:function(){
				//这里的this同group中的this一样，指向vue实例
				this.sList.forEach((obj)=>{       //既是匿名函数又是箭头函数中的this
					//匿名函数没有自己的this，它的this继承来的，也可以说这里的this指向跟上一级的this指向相同，即vue实例
                    this.sResultList.push(obj)
                })
			}
        },
    })
    $(function(){
        app.group()
    })
</script>
</html>

小席vip

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
vue中或箭头函数中，this的指向问题

首先，在Vue所有的生命周期钩子方法（如beforeCreate，created，beforeMount，mounted，beforeUpdate， updated，beforeDestroy以及destroyed）里使用this，this指向调用它的Vue实例，即（new Vue）。其次，箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象)...
复制链接

扫一扫