this对象的理解

最新推荐文章于 2024-05-20 14:24:12 发布

palette_

最新推荐文章于 2024-05-20 14:24:12 发布

阅读量441

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

this总是指向函数的直接调用者（而非间接调用者）；
如果有new关键字，this指向new出来的那个对象；
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

palette_

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

面试官：谈谈你对 this 指向的理解

人生代码 ---- 公众号

01-26

595

面试官：谈谈你对 this 指向的理解我们先抛开 ES6 新增的箭头函数，先来谈谈我们的一般函数的 this 指向问题。首先必须明确的说明，this 在普通函数定义的时候是确定不了的，只...

玩转TypeScript之你真的了解this所指对象吗

Xmumu_的博客

09-12

1072

玩转TypeScript之你真的了解this所指对象吗

参与评论您还未登录，请先登录后发表或查看评论

关于自己对象学习的碎片化笔记

一天一点进步

06-29

313

this对象的理解 this总是指向函数的直接调用者（而非间接调用者）； this---->函数的直接调用者如果有new关键字，this指向new出来的那个对象； this---->new出来的那个对象在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。 this---->

Javascript理解this对象

angyangan9569的博客

02-25

375

this是函数运行时自动生成的一个内部对象，只能在函数内部使用，但总指向调用它的对象。通过以下几个例子加深对this的理解。（1）作为函数调用 var name = 'Jenny'; function person() { return this.name; } console.log(person()); //Jenny 上面这个例子在全局作用域中调用person()，此...

10.说说你对Javascript中this对象的理解

kleinBlue.的博客

10-18

373

一、定义函数的this关键字在JavaScript中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别在绝大多数情况下，函数的调用方式决定了this的值（运行时绑定） this关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象举个例子： functionbaz(){ //当前调用栈是：baz //因此，当前调用位置是全局作用域 console.log("baz"); bar()...

深入理解this对象

woshinannan的专栏

04-13

7819

this的定义在JavaScript中this表示函数运行的时候自动生成的一个内部对象，只能在函数内部使用，下面是一个简单的例子：function test(){ alert(this == window); } test();code1 有的时候this的使用会让许多人觉得琢磨不定，但是总结一句话就是谁调用的方法this就是指向谁下面我们分五个方面来介绍一下this1.函数调用(指向wi

【前端知识之JS】JS中的this对象的理解

weixin_44337386的博客

05-30

766

本系列主要整理前端面试中需要掌握的知识点。本节介绍JS中this对象应该怎么理解。

JavaScript this 深入理解

12-02

它在JavaScript中的行为可能与其他面向对象的语言（如Java或C++）中的`this`有所不同，因此理解其工作原理至关重要。首先，我们要区分函数的**调用者**（caller）和**所有者**（owner）。调用者指的是实际调用函数...

前端面试题——15.谈谈你对this对象的理解

qq1722377628的博客

10-15

1003

this有个原则，就是谁调用就指向谁。一、全局环境：全局环境就是在里面，指向的是window对象。（怎么可以不举几个栗子呢）栗子1： var name = 'Jenny'; function person() { return this.name; } console.log(this.name); // Jenny co...

详解C++中的this指针与常对象

09-03

理解`this`和常对象的概念对于深入学习C++的面向对象编程至关重要，它们能够帮助编写更加安全、高效的代码。在实际编程中，利用`this`进行成员访问，以及正确处理常对象，都是提升代码质量的有效手段。

谈谈This对象的理解

LuckXinXin的博客

05-26

254

this总是指向函数的直接调用者（而非间接调用者）如果有new关键字，this指向new出来的那个对象在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window ...

谈谈 This 对象的理解？

mzrxLXR的博客

08-16

677

问题网址 : http://bbs.daxiangclass.com/?thread-258.htm 谈谈this对象的理解? this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象。全局环境: 全局对象就是在里面,这里的this始终都是指向window对象局部环境 1) 在对象函数中调用,那个对象调用就指向那个对象. ...

谈谈this对象的理解

itpeilibo的博客

10-24

844

函数的this关键字在JavaScript中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别在绝大多数情况下，函数的调用方式决定了this的值（运行时绑定）this关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象// 当前调用栈是：baz // 因此，当前调用位置是全局作用域 console . log("baz");bar();//

谈谈你对this对象的理解

didumin1941的博客

03-21

2853

理解： 1.this是js 的一个关键字，随着函数的使用场合的不同，this 的值会发生变化。 2.一个总原则：即this指的是调用函数的那个对象。 3.一般情况下，this 是全局对象，可以作为方法调用。转载于:https://www.cnblogs.com/dhpong/p/10569661.html...

对this对象的理解

Cshaosun的博客

05-20

544

This 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。this的值并不是在函数定义时确定的，而是在。在实际开发中，this 的指向一般可以通过四种调用模式来判断。

理解js中的this对象

u012723951的博客

04-04

1985

关于this对象，一直不是很好理解，我也经常被困惑，因为this对象经常会因为代码书写的方式不同而导致似乎自己认知中的this对象被改变了，但实际上this还是那个this。一句话：“this 对象是函数在运行时基于函数的执行环境而绑定的”。如在全局环境中执行的函数，this就等于window，而当使用object调用函数时this就执行了这个object。好了，接下来就说说上面说的“因为代码

Javascript 阐述This对象的理解

最新发布

04-03

<think>嗯，我现在要详细理解JavaScript中的this关键字。之前学过一点，但总是容易混淆。首先，用户提供的引用里提到，this的值取决于函数的调用方式，这在不同的上下文中会有不同表现。比如全局上下文和函数上下文中的this可能不一样。我记得在全局作用域里，this指向的是window对象，对吧？比如在浏览器环境中，直接console.log(this)应该会输出window。然后，函数中的this会根据调用方式变化。比如普通函数调用时，this可能指向window，严格模式下则是undefined。这点在引用[5]里提到过，严格模式下如果内部函数的this指向window会报错。所以需要注意是否启用了严格模式。接下来是对象方法中的this。比如，如果有一个对象obj，里面有一个方法getName，当调用obj.getName()时，方法里的this应该指向obj本身。但这里有个例子，在引用[4]里，箭头函数作为事件处理函数，它的this继承自外层函数的this。比如例子中的btn1.onclick使用了箭头函数，这时候箭头函数里的this实际上是外层getName方法的this，也就是obj对象。这跟普通函数不同，普通函数作为事件处理函数的话，this应该指向触发事件的元素，也就是按钮本身。不过箭头函数没有自己的this，所以会继承外层作用域的this。构造函数中的this应该指向新创建的实例。比如用new关键字调用函数时，this会绑定到新对象上。这部分可能需要注意，如果忘记使用new，this可能指向全局对象，导致意外的问题。还有显式绑定，比如使用call、apply或bind方法来设置this的值。比如函数.call(obj)会强制把this绑定到obj。bind方法会返回一个新函数，其this被永久绑定到指定的对象。箭头函数的this行为比较特殊，它们没有自己的this，而是继承自外层函数或全局作用域。这在引用[4]的例子中可以看到，箭头函数内部的this指向的是外层函数getName的this，也就是obj。而如果是普通函数，this可能会指向按钮元素或者window，具体要看调用方式。还有事件处理函数中的this，通常指向触发事件的DOM元素。但如果是箭头函数的话，可能不会这样，所以需要特别注意。总结一下，this的指向主要取决于函数的调用方式，而不是定义的位置。需要区分普通函数、箭头函数、方法调用、构造函数调用等情况。此外，严格模式也会影响this的值，尤其是在默认绑定情况下。现在用户的问题是关于this的详解和作用域规则，我需要把这些点整理清楚，结合引用中的例子，特别是箭头函数和严格模式的影响。可能需要分点说明不同的调用方式下的this指向，以及如何显式控制this的值。同时，注意使用正确的LaTeX格式，比如行内公式用$...$，独立公式用$$...$$，但这个问题主要涉及JavaScript代码，可能用不到数学表达式，不过如果有相关例子，比如闭包中的作用域，可能需要用变量名如$scope$等，但暂时不需要。重点还是用用户提供的引用内容来支持回答，并在适当的位置添加引用标识。</think>### JavaScript中的this关键字详解及作用域规则 #### 一、this的基本概念 JavaScript中的`this`是一个动态绑定的关键字，其值取决于**函数的调用方式**，而非定义位置[^1][^2]。它主要用于在函数内部引用当前执行上下文的对象。 --- #### 二、不同场景下的this指向规则 1. **全局上下文** 在全局作用域或普通函数调用中，`this`默认指向全局对象（浏览器中是`window`，Node.js中是`global`）。 ```javascript console.log(this); // 输出: window（浏览器环境） ``` 2. **函数调用** - **普通函数**：非严格模式下，`this`指向全局对象；严格模式下为`undefined`[^5]。 ```javascript function test() { console.log(this); // 普通调用输出: window（非严格模式） } test(); ``` - **对象方法**：当函数作为对象的方法调用时，`this`指向该对象。 ```javascript const obj = { name: 'kobe', getName() { console.log(this.name); // 输出: 'kobe'（this指向obj） } }; obj.getName(); ``` 3. **构造函数** 使用`new`调用构造函数时，`this`指向新创建的实例。 ```javascript function Person(name) { this.name = name; // this指向新实例 } const p = new Person('Alice'); ``` 4. **显式绑定** 通过`call`、`apply`或`bind`强制指定`this`： ```javascript function greet() { console.log(`Hello, ${this.name}`); } const user = { name: 'Bob' }; greet.call(user); // 输出: Hello, Bob ``` 5. **箭头函数** 箭头函数没有自己的`this`，其值继承自外层作用域[^4]： ```javascript const obj = { getName: function() { setTimeout(() => { console.log(this); // 继承外层函数的this（指向obj） }, 100); } }; obj.getName(); ``` 6. **事件处理函数** DOM事件处理函数中，`this`默认指向触发事件的元素： ```html <button onclick="console.log(this)">点击</button>  ``` --- #### 三、作用域与this的关系 - **词法作用域**：JavaScript采用词法作用域，变量查找基于代码定义位置。 - **动态作用域**：`this`的绑定是动态的，取决于调用方式。例如： ```javascript const obj = { value: 'obj', getValue() { return this.value; } }; const getValue = obj.getValue; console.log(getValue()); // 输出: undefined（严格模式）或全局对象的value（非严格模式） ``` --- #### 四、常见问题与解决方法 1. **this丢失问题** 当方法被赋值给变量或作为回调时，`this`可能丢失。解决方案： - 使用`bind`显式绑定：`const boundFunc = obj.method.bind(obj);` - 使用箭头函数保留外层`this`。 2. **严格模式的影响** 严格模式下，未绑定的`this`为`undefined`，避免意外修改全局对象。 --- #### 五、总结规则表 | 场景 | this指向 | 示例 | |---------------------|--------------------------------|-------------------------------| | 全局作用域 | 全局对象（如`window`） | `console.log(this)` | | 对象方法调用 | 调用该方法的对象 | `obj.method()` | | 构造函数调用 | 新创建的实例 | `new Constructor()` | | 显式绑定 | `call`/`apply`/`bind`指定的对象 | `func.call(ctx)` | | 箭头函数 | 外层作用域的`this` | `() => { console.log(this) }` | ---