1. 扑朔迷离的 this
从表面来看，this 总能通过各种变通的方式得到意想不到的结果
既然是“意想不到”，就说明对“各种变通的方式”不太了解
2. 那么我们来看看“各种变通的方式”
- 老早以前，this 指向它的调用者
<script> // 通过 dom 调用 var _html = document.documentElement; _html.onclick = function () { console.log("this === _html", this === _html); // true }; // 通过 obj 调用 var _obj = { getInfo: function () { console.log("this === _obj", this === _obj); // true }, }; _obj.getInfo(); // 直接调用 function getInfo() { console.log("this === window", this === window); // true } getInfo(); </script> - 后来遇到了面试官，学会了 bind
<script> // 预定义一个 dom 和 handle var _html = document.documentElement; function handle() { console.log(this); } // 预定义调用者 var _num = ; var _obj = {}; var _nul = null; // 使用 bind 绑定 var _numHandle = handle.bind(_num); var _objHandle = handle.bind(_obj); var _nulHandle = handle.bind(_nul); // 都执行一遍 _html.addEventListener("click", _numHandle); // Number {1} _html.addEventListener("click", _objHandle); // {} _html.addEventListener("click", _nulHandle); // Window {…} </script> - 后来发现，如果独立调用一个函数，使用 bind 太麻烦了，学会了 call，apply，我下面用 call
<script> function getInfo() { console.log(this); } // 预定义调用者 var _num = ; var _obj = {}; var _nul = null; // 用 call 调用 getInfo.call(_num); // Number {1} getInfo.call(_obj); // {} getInfo.call(_nul); // Window {…} </script> - 可以看到 [call, apply, bind] 绑定 this 的时候对参数做了处理，如果是 null 或 undefined，就绑定 Window；如果是简单数据类型，就用 Object 包裹一下
3. 通过“各种变通的方式”做一个推理
- this 本来指向它的调用者
- 通过 [call, apply, bind] 可以改变 this 指向
- 有没有可能是改变了了“调用者”，所以 this 指向了新的“调用者”
- 这里是我的另一篇文章，手动实现 [call, apply, bind]，它的实现方式就是改变“调用者”
- 可以尝试手动实现箭头函数
4. 结论
- this 指向调用者
- 改变 this 指向的方式是改变调用者
- 一路走来，真是返璞归真啊^O^
0 条评论
请不要发布违法违规有害信息，如发现请及时举报或反馈！
还没有人评论呢，速度抢占沙发！