"深入理解JavaScript执行上下文中的this关键字及设置方式"
在这段对JavaScript执行上下文视角下关于this的解释中,我们先探讨了如何通过不同的方法来设置this的指向。首先,我们提到了通过函数的call法来设置this,从而在函数执行时可以将this指向指定的对象。其次,我们讨论了通过对象调方法来设置this的指向,这种方式可以在对象中定义方法,并且在方法被调用时确保this指向当前的对象。最后,我们详细介绍了通过构造函数中设置this的指向,这种方式常用于创建对象的实例,并且在构造函数内部可以通过this来访问实例的属性和方法。 在上一篇文章中,我们讲解了词法作用域、作用域链以及闭包的概念,并通过代码示例展示了这些概念的运行原理。在思考题中,我们留下了一个问题,即在 printName 函数中使用的变量 myName 属于全局作用域,所以最终打印的值都是 "极客邦"。这是因为 JavaScript 语言的作用域链是由词法作用域决定的,而词法作用域是由代码结构确定的。但是,按照常理来说,调用 bar.printName 方法时,该方法内部的变量 myName 应该使用 bar 对象中的值。 为了更好地理解这个问题,我们使用 C 语言对上述代码进行了重新编写。在这个 C 语言的示例中,我们同样调用了 bar 对象中的 printName 方法,最后打印的值是 bar 对象的内部变量 myName 的值,而不是最外部定义的变量 myName 的值。因此,在对象内部的方法中使用对象内部的属性是一个非常普遍的需求。 然而,JavaScript 对于this的指向具有一些特殊的规则。在对象内部的方法中使用对象内部的属性时,需要注意函数执行上下文的影响。在上面的代码示例中,使用 this.printName 调用方法时,this 的指向并非总是我们所期望的对象本身。这是因为 JavaScript 中的 this 的指向是在函数被调用时动态确定的,而不是在函数定义时确定的。 在 JavaScript 中,this 的指向取决于函数的调用方式。当一个函数被调用时,会创建一个执行上下文,并在执行上下文中确定 this 的指向。如果函数是作为对象的方法被调用的,this 就会指向该对象。如果函数是作为普通函数被调用的,this 就会指向全局对象。如果函数是作为构造函数被调用的,this 就会指向新创建的实例对象。 因此,当我们需要在对象内部的方法中使用对象内部的属性时,需要特别注意函数的调用方式,以及函数执行上下文中 this 的指向。我们可以通过函数的 call、apply 方法来显式地设置 this 的指向;也可以通过箭头函数来绑定 this 的值,以避免 this 的动态绑定;另外,我们也可以通过在外部作用域保存 this 的值,再在内部方法中使用外部的 this。在JavaScript中,理解并正确处理this的指向是编写高质量代码的重要一步。
![](https://csdnimg.cn/release/download_crawler_static/86327378/bg4.jpg)
剩余15页未读,继续阅读
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/2a7674b4f3c64eb6baaecb9205aa62db_weixin_35742195.jpg!1)
- 粉丝: 25
- 资源: 329
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Vue实现iOS原生Picker组件:详细解析与实现思路
- Arduino蓝牙小车:参数调试与功能控制
- 百度Java面试精华:200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南:CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略:44步详解流程
- RecyclerView全面解析:替代ListView的新选择
- Android开发:自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发:BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0:Android事件总线详解与实战应用
- Android FileUtil:全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)