Vue中this is undefined

阅读数:71 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、理解两种主要的函数类型

1、常规函数

常规函数可以用几种不同的方式定义。

（1）不太常见，因为写出来更长一些。

methods: {
  regularFunction: function() {
    // Do some stuff
  }
}

（2）常用

methods: {
  shorthandFunction() {
    // Do some stuff
  }
}

因为我们是在Vue组件上定义常规则函数，所以this指的就是Vue组件。

2、箭头函数

methods: {
  arrowFunction: () => {
    // Do some stuff
  }
}

箭头函数使用词法作用域，意味着箭头函数从它的上下文件中获取this。

如果试图从Vue组件上的箭头函数内部访问this，将会报“ this is undefined”的错误。

3、示例

<!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>