JavaScript中函数的上下文——this

curried 发布于2019-08-22 13:45 / 1265人阅读

摘要：上下文初步了解我们来研究一下函数的上下文，所谓的上下文就是指函数里面的是谁。即函数内部的指向。浏览器运行结果因为圆括号调用函数，上下文是对象。此时点击谁，就是谁定时器调用函数，上下文是对象函数函数被定时器调用，此时函数的上下文就是对象。

1.上下文初步了解：

我们来研究一下函数的上下文（context），所谓的上下文就是指函数里面的this是谁。

当一个函数当做对象的方法被调用的时候，这个函数里面this表示这个对象：

现在我们调用sayHello函数的时候，是通过obj打点调用的，所以现在这个sayHello函数的上下文就是obj对象。即sayHello函数内部的this指向obj。
但是，千万不要认为写在对象里面的函数，上下文一定是这个对象！！
比如：

浏览器运行结果：

因为圆括号调用函数，上下文是window对象。
函数的上下文是什么，取决于函数怎么调用，而不是函数如何定义。
函数的上下文是函数的调用时表现的性质，不是函数定义的时候写死的性质。

2.函数上下文遵循五个规律

2.1函数用圆括号调用，函数的上下文是window对象

函数function fun(){}的上下文是什么呢？不要看它怎么定义，要看它怎么调用。此时是fun()函数名加上圆括号直接调用，上下文就是window对象！
而我们知道：所有的全局变量都是window对象的属性，（注意：函数里面的局部变量，不是window的属性，不是任何东西的属性，它就是一个变量。）程序弹出666。
2.2函数如果作为一个对象的方法，对象打点调用，函数的上下文就是这个对象
比如下面的例子，我们把fun函数定义出来了，然后又把这个函数绑定给了obj对象的c属性：

调用的时候，是“对象.函数()”
此时根据规律，函数里面的this是这个对象。所以能够弹出1。
2.3函数是事件处理函数，函数的上下文就是触发这个事件的对象
下面我们定义了一个fun，然后把这个fun当做了3个DOM元素的事件处理函数：

函数不会执行，直到用户点击了某一个div标签。此时点击谁，this就是谁！
2.4定时器调用函数，上下文是window对象

函数fun被定时器调用，此时函数的上下文就是window对象。每秒钟能弹出1.
2.5数组中存放的函数，被数组索引之后加圆括号调用，this就是这个数组
比如：

一定要敏感：
arr[0]();
此时这个函数是从数组中枚举出来然后加圆括号执行的，所以最终调用者可以认为是这个数组，上下文就是这个数组！

海外云主机 GPU服务器 javascript中this详解 javascript的this javaScript中的this javascript的函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92409.html

深入理解JavaScript执行上下文和执行栈

摘要：执行上下文和执行栈是中关键概念之一，是难点之一。理解执行上下文和执行栈同样有助于理解其他的概念如提升机制作用域和闭包等。函数执行完成，函数的执行上下文出栈，并且被销毁。前言如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是Ja...

silenceboy 2019-08-23 16:00 评论0 收藏0
深入理解JavaScript执行上下文和执行栈

摘要：执行上下文和执行栈是中关键概念之一，是难点之一。理解执行上下文和执行栈同样有助于理解其他的概念如提升机制作用域和闭包等。函数执行完成，函数的执行上下文出栈，并且被销毁。前言如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是Ja...

leiyi 2019-08-02 14:34 评论0 收藏0
理解JavaScript的核心知识点：This

摘要：关键字计算为当前执行上下文的属性的值。毫无疑问它将指向了这个前置的对象。构造函数也是同理。严格模式无论调用位置，只取显式给定的上下文绑定的，通过方法传入的第一参数，否则是。其实并不属于特殊规则，是由于各种事件监听定义方式本身造成的。 this 是 JavaScript 中非常重要且使用最广的一个关键字，它的值指向了一个对象的引用。这个引用的结果非常容易引起开发者的误判，所以必须对这个关...

TerryCai 2019-08-23 17:00 评论0 收藏0
如何理解JavaScript的this关键字

摘要：原文链接参考深入理解原型和闭包完结王福朋博客园中的作用域详解博客园前言王福朋老师的 JavaScript原型和闭包系列文章看了不下三遍了，最为一个初学者，每次看的时候都会有一种大彻大悟的感觉，而看完之后却总是一脸懵逼。原型与闭包可以说是 JavaScirpt 中理解起来最难的部分了，当然，我也只是了解到了一些皮毛，对于 JavaScript OOP 更是缺乏经验。这里我想总...

Yangder 2019-08-23 12:03 评论0 收藏0
JavaScript this 讲解

摘要：作为方法进行调用，该上下文是方法的拥有者作为全局函数调用，其上下文永远是也就是说，该函数是的一个方法作为构造器进行调用时，其上下文对象则是新创建的对象实例。精确把握 JavaScript 中的 this this 是 JavaScript 中的一个关键字，当一个函数被调用时，除了传入函数的显式参数以外，名为 this 的隐式参数也被传入了函数。this 参数指向了一个自动生成的内部对...

zhangwang 2019-08-19 17:45 评论0 收藏0
理解 JavaScript 中的 this 关键字

摘要：原文许多人被中的关键字给困扰住了，我想混乱的根源来自人们理所当然地认为中的应该像中的或中的一样工作。尽管有点难理解，但它的原理并不神秘。在浏览器中，全局对象是对象。运算符创建一个新对象并且设置函数中的指向调用函数的新对象。原文：Understanding the this keyword in JavaScript 许多人被JavaScript中的this关键字给困扰住了，我想混乱的...

jayzou 2019-08-21 10:32 评论0 收藏0