Vue踩坑之旅——methods

1,886 阅读1分钟

问题:methods中的某一个方法用es6箭头函数写的,访问不到实例中的变量,后来输出了this,发现指向了组件export的对象,并非实例(严格模式下undefined)。

解决: 将methods中的方法全部改为es5写法编写。

原因: 箭头函数会绑定到ParentContext,造成访问实例失败。

预防: 1. 在需要用到实例中属性的时候,尽量使用es5函数编写。

            2. 文档中其实就已经提到不应该使用箭头函数来定义 method 函数,以后看文档要更加仔细。

引申: es6箭头函数需要注意的第一个点: 函数体内的this对象即定义时所在的对象,而不是使用时所在的对象。例如在函数中使用setTimeout,并不会改变this对象的指向到window,而是依然指向函数所在的对象。 箭头函数本没有自己的this, 其内部的this就是外层代码块的this。因此,箭头函数不能用作构造函数。

          可以充分利用箭头函数的this绑定性来进行函数体内的各种函数嵌套。

延展: 由于箭头函数的局限性,es7提出了函数绑定运算符,即::运算符,用来取代call, apply, bind调用。

           foo::bar;  //等同于

           bar.bind(foo);