Vue的data属性中自定义方法访问域问题

 

在这里，Vue的data属性中，我定义了checkForm属性，该属性有一个bgntime_end属性，该属性的validator属性值是一个函数，一开始的时候，我通过function来编写代码，但是，我在这个function无法访问$data属性中内容，里面的this指向了该function对象；

后来我把function改成箭头函数之后，在箭头函数中通过this就可以访问到$data属性了；

问题是，为什么会这样呢？

官网解释

地址：https://www.w3school.com.cn/js/js_this.asp

按照官网解释，this关键词指的是它所属的对象；

至于取什么值，则是取决于它的使用位置：

①方法中的this：在对象方法中，this指的是此方法的“拥有者”；

②单独的this：在单独使用时，拥有者是全局对象，因此this指的是全局对象。在浏览器窗口中，全局对象是 [object Window]；

③函数中的this（默认）：在JavaScript函数中，函数的拥有者默认绑定this。因此，在函数中，this指的是全局对象[object Window]；

④函数中的this（严格模式）：JavaScript严格模式不允许默认绑定。因此，在函数中使用时，在严格模式下，this 是未定义的（undefined）；

⑤事件处理程序中的this：在HTML事件处理程序中，this指的是接收此事件的HTML元素；

⑥对象方法绑定：this是指函数拥有者这个对象；

如何解释遇到的问题？

那么，按照这个解释，我们可以抽象如下：

Vue对象.

data属性/对象.

checkForm属性/对象

.bgntime_end属性/数组对象

.[0]第1个对象

.validator属性/function对象

那么，按照官网解释，这个function被定义在validator对象内部，因此，如果要在function中使用this的话，则该this应该指向validator才行，那我们测试一下：

 

这个checkForm对象被ui-element的el-form表单的:rules绑定，是一个validator对象，这根我们的猜测是一样的；

箭头函数

https://www.w3school.com.cn/js/js_function_definition.asp

下面是官方的说法：

①箭头函数允许使用简短的语法来编写函数表达式。您不需要 function关键字、return关键字和花括号；

②箭头函数没有自己的this。它们不适合定义对象方法；（箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象）

③箭头函数未被提升。它们必须在使用前进行定义；

④使用 const 比使用 var 更安全，因为函数表达式始终是常量值；

⑤如果函数是单个语句，则只能省略 return 关键字和大括号。因此，保留它们可能是一个好习惯；

那为什么箭头函数中的this就指向了Vue实例呢？

Vue对象.

data属性/对象.

checkForm属性/对象

.bgntime_end属性/数组对象

.[0]第1个对象

.validator属性/function对象

由于validator是一个箭头函数，箭头函数没有自己的this，所以，this按照上面这个层次去找，上面那几个都是Vue实例的属性，到了最顶层，this指向了Vue实例

最终结果

 

参考链接

https://www.w3school.com.cn/js/js_this.asp

https://zhuanlan.zhihu.com/p/57204184