js中this关键字的作用和如何改变其上下文

news/2025/1/11 10:12:44/

一、this 关键字的作用

JavaScript 中的 this 关键字引用了所在函数正在被调用时的对象。在不同的上下文中,this 的指向会发生变化。

在全局上下文中,this 指向全局对象(在浏览器中是 window 对象,在 Node.js 中是 global 对象)。

在函数中,this 指向调用该函数的对象。如果该函数是通过对象的方法调用的,那么 this 指向该对象;如果是通过函数调用的,那么 this 指向全局对象。

在箭头函数中,this 继承自父级作用域中的 this

在类的构造函数中,使用 new 关键字调用类时,this 指向新创建的对象。

例如:

class MyClass {constructor() {this.value = 42;}
}let obj = new MyClass();
console.log(obj.value); // 42

类的实例方法中的 this 默认指向实例本身,类方法中的 this 默认指向类本身

例如:

class MyClass {value = 42;printValue() {console.log(this.value);}static printValue() {console.log(this.value);}
}let obj = new MyClass();
obj.printValue(); // 42
MyClass.printValue(); // undefined

使用 Object.create 方法创建对象

使用 Object.create 方法创建是一种特殊的调用方式。在这种情况下,如果在对象的原型链上调用函数,则 this 指向该对象。

例如:

let baseObject = { value: 42 };
let obj = Object.create(baseObject);function printValue() {console.log(this.value);
}printValue.call(obj); // 42

这种情况下, obj 的原型链上有 value 属性,所以调用 printValue() 方法时, this 指向 obj 对象。

在类中使用箭头函数

类中使用箭头函数定义的方法中的 this 指向是绑定的,它指向的是类的实例,而不是类本身。

例如:

class MyClass {value = 42;printValue = () => {console.log(this.value);}
}
let obj = new MyClass();
obj.printValue(); // 42

箭头函数的 this 是定义时的 this,而不是调用时的 this。因此,在类中使用箭头函数可以避免在方法中使用 bind 来绑定 this

在调用构造函数时,未使用 new 关键字

在这种情况下,this 指向全局对象。这种情况下不会创建新的对象,而是改变了全局对象的状态。

例如:

class MyClass {constructor() {this.value = 42;}
}let obj = MyClass(); // without new keyword
console.log(obj); // undefined
console.log(value); // 42

因此,在使用构造函数创建对象时,需要确保使用 new 关键字来调用构造函数,否则可能会导致意外的结果。

在使用构造函数时特别需要注意使用 new 关键字来调用。

在对象的方法中使用箭头函数会导致 this 指向问题

例如:

let obj = {value: 42,printValue: () => {console.log(this.value);}
};
obj.printValue(); // undefined

这种情况下,在 obj 对象的 printValue 方法中使用了箭头函数,而箭头函数的 this 指向是定义时的 this,而不是调用时的 this。在这种情况下,因为箭头函数的 this 指向是定义时的 this,所以 this.value 指向的是 undefined,而不是 obj 对象中的 value。

解决这种问题可以使用箭头函数的父级作用域中的 this,或者使用普通函数来解决。

例如:

let obj = {value: 42,printValue: function(){console.log(this.value);}
};
obj.printValue(); // 42

或者

let obj = {value: 42,printValue: () => {console.log(obj.value);}
};
obj.printValue(); // 42

在对象的方法中使用箭头函数会导致 this 指向问题,需要特别注意。可以使用箭头函数的父级作用域中的 this 或者普通函数来解决。

总之,JavaScript 中的 this 关键字指向的上下文取决于函数的调用方式,需要根据不同的场景来选择合适的方式来改变 this 的指向。

二、如何改变 this 上下文

可以通过 call, apply, bind 方法来改变 this 的上下文。

callapply 方法允许您将函数的 this 指向指定的对象,并立即执行该函数。

call 方法的语法格式如下:

functionName.call(thisArg, arg1, arg2, ...);

apply 方法的语法格式如下:

functionName.apply(thisArg, [arg1, arg2, ...]);

bind 方法允许您将函数的 this 指向指定的对象,但不立即执行函数,而是返回一个新函数,可以在将来执行。

let newFunc = functionName.bind(thisArg, arg1, arg2, ...);

例如:

let obj = {value: 42};function printValue() {console.log(this.value);
}printValue.call(obj); // 42
printValue.apply(obj); // 42
let boundFunc = printValue.bind(obj);
boundFunc(); // 42

总之,通过使用 call, apply, bind 方法,可以改变函数中的 this 指向,从而在不同的上下文中使用同一个函数。


http://www.ppmy.cn/news/217214.html

相关文章

CLR via C#(一)CLR的执行模型

一、什么是CLR CLR全称Common Language Runtime,即公共语言运行时。它可以为所有面向CLR的语言提供运行时的内存管理、程序集加载、安全性、异常处理和线程同步等功能。 事实上,CLR并不关心开发者使用的到底是哪种语言,只要这门语言的编译器…

队列的实现

队列的基本思想是:先入队列的,先出队列 一、链表实现队列 public class MyLinkedList {class Node{public int val;public Node next;public Node(int val){this.val val;}}public Node head;public Node last;public int usedSize;//入队public void…

Nginx服务性能和安全优化(念念不忘,必没回响)

一、配置Nginx隐藏版本相关信息 1.隐藏版本号 修改 nginx.conf 文件,在http块中添加字段后,重载服务 获取报文信息并查看(浏览器查看或使用命令) 2.修改版本号及相关信息 如果做了上一步在nginx.conf 中添加了 server_tokens…

【MD5】什么是MD5?md5的简要描述

什么是MD5 一、MD5概述二、MD5的主要特点三、MD5的性质四、MD5破解五、MD5防破解六、MD5的用途 一、MD5概述 MD5:英文全称是 Message-Digest Algorithm 5。 中文名为 消息摘要算法第五版。它是消息摘要算法,属于 Hash 算法的一种。 正常情况下&#xf…

入手评测 i58300h和i510210u哪个好

i5-10210U采用14nm工艺,4核心8线程,频率1.6-4.2GHz,6MB三级缓存,采用UHD核显(24 EU),TDP 15W,内存频率由DDR4-2666。选i58300h 还是i510210u 这些点很重要!看完你就知道了http://www…

r7 3750h和i5 8300h 哪个好

AMD Ryzen 7 3750H采用4核8线程的配置,基准频率为2.3GHz,最高加速频率为4.0GHz,配备4MB三级缓存,集成Radeon RX Vega 10 Mobile核芯显卡,TDP为35W。 选r5 3550h还是r7 3750h这些点很重要!看完你就知道了 http://www.ad…

酷睿i5 8300h属于什么级别 i58300h什么水平

i5-8300H采用四核八线程的架构,CPU主频为2.3GHz,最大支持内存为64GB;内存类型包括DDR4 2666MHz,LPDDR3 2133MHz,最大内存通道数为2,最大内存带宽是41.8GB/s,不支持ECC内存。在处理器的特性上&am…

i78750h和i58300h对比哪个好

i5-8300H:4核心8线程,coffcelake架构,主频2.3GHz,单核最大睿频4GHz,四核最大睿频3.9GHz,L3缓存8MB,TDP45W,核显UHD630,理论性能接近桌面级处理器i7-7700。 i78750h和i583…