您好,登录后才能下订单哦!
这篇文章主要讲解了“JavaScript执行上下文中的this怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript执行上下文中的this怎么使用”吧!
在对象内部的方法中使用对象内部的属性是一个非常普遍的需求。但是 JavaScript 的作用域机制并不支持这一点,基于这个需求,JavaScript 有另外一套 this 机制。
this 是和执行上下文绑定的,也就是说每个执行上下文中都有一个 this。执行上下文主要分为三种——全局执行上下文、函数执行上下文和 eval 执行上下文,所以对应的 this 也只有这三种——全局执行上下文中的 this、函数中的 this 和 eval 中的 this。
全局执行上下文中的 this
是指向 window
对象的。这也是 this
和作用域链的 唯一交点,作用域链的最底端包含了 window
对象,全局执行上下文中的 this
也是指向 window
对象。
function foo() { console.log(this); } foo();
执行这段代码,打印出来的也是 window
对象,这说明在默认情况下调用一个函数,其执行上下文中的 this
也是指向 window
对象的。
通常情况下,有下面三种方式来设置函数执行上下文中的 this
值:
1. 通过函数的 call 方法设置
let bar = { myName: "极客邦", test1: 1, }; function foo() { this.myName = "极客时间"; } foo.call(bar); console.log(bar); console.log(myName);
执行这段代码,你就能发现 foo
函数内部的 this
已经指向了 bar
对象,因为通过打印 bar
对象,可以看出 bar
的 myName
属性已经由“极客邦”变为“极客时间”了,同时在全局执行上下文中打印 myName
,JavaScript 引擎提示该变量未定义。其实除了 call
方法,你还可以使用 bind
和 apply
方法来设置函数执行上下文中的 this
。
2. 通过对象调用方法设置
var myObj = { name: "极客时间", showThis: function () { console.log(this); }, }; myObj.showThis();
执行这段代码,你可以看到,最终输出的 this
值是指向 myObj
的。所以,你可以得出这样的结论:使用对象来调用其内部的一个方法,该方法的 this
是指向对象本身的。
接下来我们稍微改变下调用方式,把 showThis
赋给一个全局对象,然后再调用该对象,代码如下所示:
var myObj = { name: "极客时间", showThis: function () { this.name = "极客邦"; console.log(this); }, }; var foo = myObj.showThis; foo();
执行这段代码,你会发现 this
又指向了全局 window
对象。
结论:
在全局环境中调用一个函数,函数内部的 this
指向的是全局变量 window
。
通过一个对象来调用其内部的一个方法,该方法的执行上下文中的 this
指向对象本身。
3. 通过构造函数中设置
function CreateObj() { this.name = "极客时间"; } var myObj = new CreateObj();
当执行 new CreateObj()
的时候,JavaScript 引擎做了如下四件事:
首先创建了一个空对象 tempObj
接着调用 CreateObj.call
方法,并将 tempObj
作为 call
方法的参数,这样当 CreateObj
的执行上下文创建时,它的 this
就指向了 tempObj
对象
然后执行 CreateObj
函数,此时的 CreateObj
函数执行上下文中的 this
指向了 tempObj
对象
最后返回 tempObj
对象
var tempObj = {}; CreateObj.call(tempObj); return tempObj;
这样,就通过 new
关键字构建好了一个新对象,并且构造函数中的 this
其实就是新对象本身。
var myObj = { name: "极客时间", showThis: function () { console.log(this); function bar() { console.log(this); } bar(); }, }; myObj.showThis();
执行这段代码后,会发现函数 bar
中的 this
指向的是全局 window
对象,而函数 showThis
中的 this
指向的是 myObj
对象。
可以通过一个小技巧来解决这个问题,比如在 showThis
函数中声明一个变量 that
用来保存 this
,然后在 bar
函数中使用 that
。其实,这个方法的的本质是把 this
体系转换为了作用域的体系。
其实,你也可以使用 ES6 中的箭头函数来解决这个问题:
var myObj = { name: "极客时间", showThis: function () { console.log(this); var bar = () => { console.log(this); }; bar(); }, }; myObj.showThis();
这是因为 ES6 中的箭头函数并不会创建其自身的执行上下文,所以箭头函数中的 this
取决于它的外部函数。
在实际工作中,我们并不希望函数执行上下文中的 this
默认指向全局对象,因为这样会打破数据的边界,造成一些误操作。如果要让函数执行上下文中的 this
指向某个对象,最好的方式是通过 call
方法来显示调用。
可以通过设置 JavaScript 的 严格模式 来解决(在第一行加上 "use strict";
)。在严格模式下,默认执行一个函数,其函数的执行上下文中的 this
值是 undefined
。
感谢各位的阅读,以上就是“JavaScript执行上下文中的this怎么使用”的内容了,经过本文的学习后,相信大家对JavaScript执行上下文中的this怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。