js中this的六种模式

this的指向取决于函数调用方式,共六种绑定模式:1. 全局环境中this指向window(浏览器)或global(Node.js);2. 独立调用时非严格模式指向全局对象,严格模式为undefined;3. 作为对象方法调用时this指向调用者;4. 构造函数中this指向新创建的实例;5. 显式绑定通过call、apply、bind指定this值;6. 箭头函数的this继承外层作用域,不可被显式改变。关键在于调用方式而非定义位置。

js中this的六种模式

在 JavaScript 中,this 的指向并不是固定不变的,它的值取决于函数是如何被调用的。理解 this 的指向是掌握 JS 核心机制的关键之一。以下是 this 的六种常见绑定模式:

1. 全局环境中的 this

在全局执行环境中(浏览器中),无论是否严格模式,this 都指向全局对象。

浏览器中,this 指向 window Node.js 环境中,this 指向 global例子:

console.log(this === window); // true(浏览器中)

2. 函数独立调用

当一个普通函数被直接调用时,this 的指向取决于是否启用严格模式。

非严格模式下:this 指向全局对象(window) 严格模式下(use strict):this 为 undefined例子:

function foo() {  console.log(this);}foo(); // 非严格模式:window;严格模式:undefined

3. 对象方法中的 this

当函数作为对象的方法被调用时,this 指向该对象。

谁调用了方法,this 就指向谁例子:

const obj = {  name: 'Alice',  greet() {    console.log(this.name);  }};obj.greet(); // 输出 'Alice',this 指向 obj

4. 构造函数中的 this

使用 new 调用函数时,this 指向新创建的实例对象。

构造函数内部的 this 代表即将创建的新对象 new 操作会创建一个新对象并将其绑定到 this例子:

function Person(name) {  this.name = name;}const p = new Person('Bob');console.log(p.name); // 'Bob'

5. 显式绑定(call、apply、bind)

通过 call、apply 或 bind 方法可以显式指定 this 的指向。

call(arg, …args):立即调用,参数逐个传入 apply(arg, [args]):立即调用,参数为数组 bind(arg):返回新函数,this 固定为指定对象例子:

function sayHi() {  console.log(this.name);}const user = { name: 'Tom' };sayHi.call(user); // 'Tom'

6. 箭头函数中的 this

箭头函数没有自己的 this,它的 this 继承自外层作用域(词法作用域)。

不会被 call、apply、bind 改变 始终指向定义时所在上下文的 this例子:

const obj = {  name: 'Lucy',  regularFunc: function() {    const arrowFunc = () => {      console.log(this.name); // 'Lucy'    };    arrowFunc();  }};obj.regularFunc(); // 箭头函数的 this 指向外层函数的 this

基本上就这些。掌握这六种模式,能帮你准确判断 this 在各种场景下的指向。关键是看函数如何被调用,而不是如何定义。不复杂但容易忽略细节。

以上就是js中this的六种模式的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1537775.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
CSS Positions布局实现交互效果的创意方法
上一篇 2026年5月10日 11:06:15
php代码如何实现数据统计_php代码制作报表分析的方法
下一篇 2026年5月10日 11:06:17

相关推荐

发表回复

登录后才能评论
关注微信