JavaScript: 箭头函数 与函数(function)的区别

JavaScript: 箭头函数(=>) 与函数(function)的区别

在Vue项目中，使用Element-UI后，浏览器控制台报错！

具体错误如下:

Uncaught (in promise) TypeError: Cannot read property '$message' of undefined     at eval

此时，前端接口代码如下:

register() {

     var _this = this

     http({

		// 假设后台需要的是表单数据这里你就可以更改
		headers: {
	
		"Content-Type": "application/json;charset=UTF-8"
		
		},
	
	      method: 'post',
	      
		url: 'http://localhost:8080/encryption/register',
	
		data: {
	
	        registerCode: _this.registerCode
	
		},
	
		responseType: 'json'
	
	}).then( function (res) {
	
		console.log(res);
	
		var code = res.code;
		var info = res.info;
	
		if (res.code == 200) {
		
	        this.$message.success(info);
	        
			_this.$router.push("/login");
		
		} else {
			
	        this.$message.warning(info);
	
	      }
	      
	    // 使用箭头函数时, 则可以直接使用this
	    // 箭头函数没有独立的作用域
	}).catch((err) => {
	
	      console.log(err);
	      
	      this.$message.error("global error!");
	
	});

}

Solution：

使用function, 而不使用箭头函数时, 不可以直接使用 this ；因为， function 有独立的作用域；

所以，需要在进入 function 作用域前，需要为 this 建立副本，保留进入function函数作用域前的 this 权限，即:

在使用箭头函数时, 则可以直接使用this；因为，箭头函数没有独立的作用域。