PHP前端开发

js中this的工作原理

百变鹏仔 2个月前 (10-14) #JavaScript
文章标签 工作原理

javascript 中 this 工作原理

问题: JavaScript 中的 this 关键字是如何工作的?

回答:

this 关键字在 JavaScript 中扮演着关键角色,它表示当前正在执行代码的上下文对象。其值取决于函数的调用方式和执行环境。

函数调用方式:

箭头函数:

箭头函数没有自己的 this,而是继承调用它的函数的 this。

执行环境:

使用示例:

普通函数:

function greet() {  console.log(this); // window}greet();

对象方法:

const person = {  name: "John",  greet() {    console.log(this.name); // John  }};person.greet();

回调函数:

const button = document.getElementById("btn");button.addEventListener("click", function() {  console.log(this); // DOM 元素});

箭头函数:

const obj = {  name: "Jane",  greet() {    const arrowGreet = () => {      console.log(this.name); // Jane    };    arrowGreet();  }};obj.greet();