可忽略
最近在写 vue 项目， 使用 总监封装 好的框架，遇到一个问题： vue 实例 methods 中的 方法在传递后，通过 函数名（） 方式调用后， 其内部 this 竟然没有指向 window。当时就不服了，各种 debugger , 无果。
早上打开电脑后， 灵光一闪， 难道用了 bind 函数？咳咳。。。 一口老痰，终于通了。
本post 主要介绍
- vue 的 methods 中 this 如何绑定到实例上的
- es6 中的 Function.prototype.bind
- es6 的箭头函数
1. vue 的 methods 中 this 如何绑定到实例上的
且看源码
通过搜索 methods 关键字找到了 绑定源码
看看这个 bind 函数是干嘛的？
使用的就是 Function.prototype.bind 函数进行 this 绑定的
es6 中的 Function.prototype.bind
简而言之， 这个方法可以固定住函数内部的 this 指向 与函数的四种调用方式无关。
`function.bind(thisArg[, arg1[, arg2[, …]]])
栗子
var x = 1;
var obj = {x:100};function getX() {console.log(this.x);}getX(); // 1getX = getX.bind(obj);getX(); // 100
上例可知， getX 中 this 始终指向 obj 这个对象
3. es6 的箭头函数
简而言之， 让函数内部 的this 与 函数的声明时候的环境中的 this 保持一致的指向
当我们的 箭头函数遇到 bind 函数会如何
var x = 1;
var obj = {x:100};
var getX = () => {console.log(this.x);
}
getX(); //1getX = getX.bind(obj);
getX(); // 1
上栗知道，** bind 遇到 arrow 函数的时候， arrow 函数 生效**， 即对应的 this 指向 为 函数声明时候环境中 的 this
