this指向由函数调用方式决定。1. 全局环境中this指向window(浏览器)或global(Node.js);2. 独立函数调用时,非严格模式下this为全局对象,严格模式下为undefined;3. 作为对象方法调用时,this指向调用该方法的对象;4. 构造函数中this指向新创建的实例;5. 箭头函数无独立this,继承外层作用域的this;6. call、apply、bind可显式绑定this值。核心原则:调用方式决定this,箭头函数除外。

JavaScript中的this指向取决于函数的调用方式,而不是定义时的位置。理解this的关键是看函数在哪里被调用以及如何被调用。
1. 全局上下文中的 this
在全局执行环境中(浏览器中),无论是否在严格模式下,this都指向全局对象。
浏览器中,全局对象是 window Node.js 中,全局对象是 global
例如:
console.log(this === window); // true(在浏览器中)
2. 函数调用中的 this
函数独立调用时,this的值取决于是否启用严格模式。
立即学习“Java免费学习笔记(深入)”;
非严格模式:this 指向全局对象(window) 严格模式(”use strict”):this 为 undefined
示例:
function foo() { console.log(this);}foo(); // 非严格模式输出 window,严格模式输出 undefined
3. 对象方法中的 this
当函数作为对象的方法被调用时,this指向该对象。
例如:
const obj = { name: 'Alice', greet() { console.log(this.name); }};obj.greet(); // 输出 'Alice'
注意:如果把方法赋值给变量再调用,this 会丢失绑定。
const func = obj.greet;func(); // 输出 undefined(严格模式)或 window.name(非严格)
4. 构造函数中的 this
使用 new 调用函数时,this 指向新创建的实例对象。
例如:
function Person(name) { this.name = name;}const p = new Person('Bob');console.log(p.name); // 'Bob'
5. 箭头函数中的 this
箭头函数没有自己的 this,它继承外层作用域的 this 值。
这意味着箭头函数中的 this 在定义时就确定了,无法通过 call、apply 或 bind 改变。
例如:
const obj = { value: 42, normalFunc: function() { console.log(this.value); }, arrowFunc: () => { console.log(this.value); }};obj.normalFunc(); // 42obj.arrowFunc(); // undefined(继承的是外层的 this)
6. 显式绑定:call、apply、bind
可以通过这些方法显式指定函数执行时的 this 值。
call(thisArg, arg1, arg2, …):立即调用,参数逐个传入 apply(thisArg, [argsArray]):立即调用,参数以数组形式传入 bind(thisArg, arg1, arg2, …):返回新函数,this 固定为指定值
示例:
function showName() { console.log(this.name);}const user = { name: 'Charlie' };showName.call(user); // 'Charlie'
基本上就这些情况。掌握 this 的核心是记住:它由调用方式决定,不是函数定义位置。箭头函数是个例外,它的 this 是词法继承的。
以上就是JavaScript中的`this`关键字在不同上下文中的指向如何确定?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1529026.html
微信扫一扫
支付宝扫一扫