您现在的位置是:首页 > Javascript
当前栏目
关于 js 的 this 指向问题
2023-03-31 11:00:41 时间
一、复杂度
- 这个问题本身并不复杂,通过穷举法很容易就能得到有限的结果
二、影响 this 指向的因素
- this 的指向与函数行为有关,函数行为包括:定义,赋值,调用
三、经验性的概括
- 普通函数的 this 指向,只和调用方式有关
- 箭头函数的 this 指向,只和定义环境有关
四、举例说明
- 改变普通函数的调用者
1 <script> 2 // 定义一个方法 3 const person = { 4 getInfo() { 5 console.log(this); 6 }, 7 }; 8 // 把方法拿出来,定义一个顶级变量 9 const getInfo = person.getInfo; 10 11 person.getInfo(); // 调用者:person,this:person 12 getInfo(); // 调用者:window,this:window 13 </script>
- 改变箭头函数的调用者
1 <script> 2 // 定义一个方法 3 const person = { 4 getInfo: () => { 5 console.log(this); 6 }, 7 }; 8 // 把方法拿出来,定义一个顶级变量 9 const getInfo = person.getInfo; 10 11 person.getInfo(); // 定义环境:顶级作用域,this:window 12 getInfo(); // 定义环境:顶级作用域,this:window 13 </script>
- 改变箭头函数的定义环境
1 <script> 2 // 定义一个方法 3 const person = { 4 getInfo() { 5 return () => console.log("person", this); 6 }, 7 }; 8 // 把方法拿出来,定义一个顶级变量 9 const getInfo = person.getInfo; 10 11 person.getInfo()(); // 定义环境:person.getInfo,this:person 12 getInfo()(); // 定义环境:window.getInfo,this:window 13 </script>
- 复杂情况
1 <script> 2 // 定义一个方法 3 const person = { 4 getInfo() { 5 // 定义环境:window.cat,this:window 6 cat()(); 7 // 定义环境:person.cat,this:person 8 cat.call(person)(); 9 return () => console.log("person", this); 10 }, 11 }; 12 // 把方法拿出来,定义一个顶级变量 13 const getInfo = person.getInfo; 14 15 const cat = function () { 16 return () => console.log("cat", this); 17 }; 18 19 person.getInfo()(); // 定义环境:person.getInfo,this:person 20 getInfo()(); // 定义环境:window.getInfo,this:window 21 </script>
- [ call, apply, bind ] 不需要讨论,因为它们的原理就是改变调用者,我在这里实现了下
五、结尾
- 可以看到,尽管面试题花里胡哨,但是万变不离其宗
- 当然了,掌握好 this 指向,是为了我们能写出更好用的代码
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件