彻底理解JS中this的指向

最新推荐文章于 2022-07-13 20:06:23 发布
转载 最新推荐文章于 2022-07-13 20:06:23 发布 · 471 阅读 · 0
文章标签：

#javascript #this

本文解析了JavaScript中this关键字的指向规则，包括函数未被对象调用时指向window（非严格模式下），被对象调用时指向该对象，及包含多个对象时的指向问题。补充介绍了严格模式下this的特殊行为及new操作符对this指向的影响。

【转载地址】https://mp.weixin.qq.com/s/LwnhJYQPVt1rSzjTjEDjBQ

初步理解：谁调用的就指向谁（后面会介绍到这句话不够准确）

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

进一步解析：

  1. 如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。

  2. 如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

    这里写图片描述

  3. 如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。

    这里写图片描述

知识点补充：

  • 在严格版中的默认的this不再是window，而是undefined
  • new操作符会改变函数this的指向问题
    这里写图片描述
彻底理解this指向
高山景行，一尘不染
12-22 402
首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。 　　为什么要学习this？如果你学过面向对象编程，那你肯定知道干什么用的，如果你没有学过，那么暂时可以不用看这篇文章，当然
前端面试——如何理解this指向？
DW14687的博客
10-24 2262
this指向真的是老生常谈的问题，在八股文当中也占据很重要的位置，面试过程中也会经常问道this指向问题，那么我们今天就来看看this指向和实践把~一、this在不同函数中的指向。
js 中的this用法
Alison_Z的博客
03-10 550
js中的this指向十分重要，了解js中this指向是每一个学习js的人必学的知识点，今天没事，正好总结了js中this的常见用法，喜欢的可以看看：全局作用域或者普通函数中this指向全局对象window。//直接打印 console.log(this) //window //function声明函数 function bar () {console.log(this)} bar() //win...
彻底弄懂js中的this指向
火玲珑的博客
02-13 575
js中的this指向十分重要，了解js中this指向是每一个学习js的人必学的知识点，今天没事，正好总结了js中this的常见用法，喜欢的可以看看：1. 全局作用域或者普通函数中this指向全局对象window。//直接打印 console.log(this) //window //function声明函数 function bar () {console.log(this)} bar() //...
【前端知识之JS】JS中的this对象的理解
weixin_44337386的博客
05-30 809
本系列主要整理前端面试中需要掌握的知识点。本节介绍JS中this对象应该怎么理解。
彻底搞懂js中的this指向
weixin_47750287的博客
02-04 1324
js的this指向 js中的this指向问题经常容易让人混淆，特别是在ES6引入箭头函数后，对于标准函数中的this指向和箭头函数中的this指向就更让人费解。 本文总结了js中标准函数和箭头函数的this指向问题，帮助大家理清js中的this指向。 并且介绍几个改变this指向的方法，改变this指向不管是在js的继承还是js的函数中都是很重要的。 一 抓住核心 我在网上看过一些关于this指向的博客，很多都是通过例子就直接开始讲解，虽然这样也可以帮助读者快速了解，但是在这里，我希望由一般到特殊，先指
彻底理解js中this的指向，不必硬背。
知之为知之，不知为不知
03-20 343
首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。
彻底理解js中this的指向
02-26
深度理解js中this的指向问题
彻底弄懂JavaScript中的this指向
01-08
我们都知道 this是JavaScript 函数中的一个关键字，也称之为this对象，this是函数中的一个对象，那么这个对象表示什么呢，这个很重要，因我们会经常使用到这个this，如果搞不清楚这个this到底指向谁，就是很大的一个...
web前端高级JavaScript - 一道题彻底理解函数中this指向和闭包作用域
lixiaosenlin的专栏
11-04 5810
关于函数中this指向和闭包作用域的一道练习题 javascript 代码 var x = 3, obj = {x: 5}; obj.fn = (function(){ this.x *= ++x; return function(y){ this.x *= (++x)+y; console.log(x); } })(); var fn = obj.fn; obj.fn(6); fn(4); console.log(obj.x, x); 文字解析： 首先还是浏览器开辟一块栈内
day034: 谈谈你对JS中this的理解。
杨兴元的博客
11-23 466
其实JS中的this是一个非常简单的东西，只需要理解它的执行规则就OK。在这里不想像其他博客一样展示太多的代码例子弄得天花乱坠， 反而不易理解。call/apply/bi...
js的this指针理解
jonson
06-18 250
因为发现身边的一些朋友对js的this指针的理解不是很全面。下面本人简单的讲解一下js的this指针的相关内容，仅供需要的朋友学习参考。 简单的，我先用一句话来概括javascript的this。在js里面，this指针代表的是执行当前代码的对象的所有者。 下面举几个简单的例子加以说明： var name="jonson"; function test(){alert("您好，...
如何理解js中的this
weixin_69830171的博客
07-13 1956
this的值取决于它所在的函数如何被调用。下面是this可以获得新值的6种不同方式：下面我们一起来看看this是如何在每个环境中被改变的。当this在任何函数外面被调用时，也就是说在全局环境中被调用，在浏览器中。它默认指向window对象。 一般在全局环境中，我们很少用this关键字 ，所以我们对它也没有那么在意，继续看下一个环境。当我们使用new关键字创建一个对象的新的实例时，this关键字指向这个实例。 通过上面的代码，我们会发现，greg是Human的一个实例，现在无论何时调用greg，thi
理解JS中的this
水荷的博客
12-02 527
先来说this的两个误解： 1.this指向自身 因为英文语义的关系，很多人把this理解成指向函数自身， this是在运行时绑定的，不是在编写时绑定的，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有关系，只与函数调用的顺序相关。 this是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。（默读3遍） 理解this的调用位置 function ba...
如何更好的理解js中的this
weixin_34326429的博客
12-25 345
function a(xx) { this.x=xx; return this }; var x = a(5); var y = a(6); console.log(x.x) // undefined console.log(y.x) // 6 复制代码Why? 其实这段代码还是比较有误导性的，我们来简化并且分解一下，简化后如下。 function a(xx) { this.x...
js中this的理解
gomQi的博客
08-05 1110
title: JS中this的理解 author: 26186 tags: JavaScript 前端 categories: 前端 date: 2019-07-26 14:52:00 this指向 开篇给结论：在 ES5 中 this 永远指向的是最后调用它的那个对象。 先给出一个简单的例子： var obj = { func () { console.log(this) ...
JS中this的理解
u012352278的博客
05-20 352
我们在编写代码的过程中经常会遇到this的指向问题，下面对this的指向做一个总结 一、THIS： 1）全局上下文中的this是window； 2）块级上下文中（如:判断体“{}”，循环体“{}”）中没有自己的this,它的this是继承所在上下文中的this的； 3）在函数的私有上下文中，this的情况会多种多样，也是接下来我们重点研究的； 二、函数中的THIS: THIS不是执行上下文(EC才是执行上下文)，THIS是执行主体 如何理解主体呢？ 如： 张三拿着加了五个鸡蛋的煎饼果子去北京大饭店吃早
彻底弄懂js中的this指向 js中各种this超详细解释 js this
，
09-17 3218
JavaScript this 关键字 面向对象语言中 this 表示当前对象的一个引用。在 js 中 this 不是固定不变的，它会随着执行环境的改变而改变。不管它发生什么改变，this 的指向都永远只能看this是谁调用的，而不是在哪里定义的，谁调用的函数，函数体里的this就指谁。 注：以下输出没有特殊说明的都是在浏览器环境下进行。 方法中的 this 当前对象中的方法，需要访问当前对象中的属性，this指向的是方法调用时.前的对象。 var student = { sname:'LiMing'
彻底理解JavaScript this关键字及其应用
在JavaScript编程中，"this"关键字是一个核心概念，它在理解函数作用域、对象实例以及原型链等方面起着至关重要的作用。"this"的关键特性在于它的动态绑定，其指向取决于调用它的上下文，而非简单的函数定义位置。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值