ES6中的this指向问题，【最全总结】

于 2024-03-30 02:46:11 发布
阅读量409 收藏 10
点赞数 3
分类专栏： 2024年程序员学习 文章标签： es6 前端 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61549984/article/details/137161184
版权

点击

注意：constructor中在btn和get之前都必须加this。否则是不知道哪一个实例对象调用的。

只不过我们在点击按钮时输出的是undefined，这又是为什么呢？

普通函数this取决于谁调用，谁调用我，this就指向谁，跟如何定义，定义在哪无关

如果我们在下面打印stu.get()的时候，this指向的还是实例对象，当只有我们点击按钮时，get中的this才指向btn

我们在get里面打印this，看看在点击按钮时输出的是什么：

这个get方法里面的this指向的是btn这个按钮，因为是这个按钮调用了它

一句话总结：constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者

最后一个问题：我们就想实现点击按钮时打印’小杰’，应该怎么办呢？

最低0.47元/天 解锁文章
洪湖顶级程序员
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于JavaScript中的this指向问题总结篇
12-09
在javascript中this的指向一直是前端同事的心头病，也同时是各面试题的首选，现在我们就来总结一下js中this的指向。首先需要了解一下几个概念： 1:全局变量默认挂载在window对象下 2:一般情况下this指向它的调用者 3:es6的箭头函数中，this指向创建者，并非调用者 4:通过call、apply、bind可以改改变this的指向 下面我们具体分析一下 1:在函数调用时 　　（非严格模式) const func = function () { console.log(this); const func2 = function () { con
关于ES6箭头函数中的this问题
08-27
ES6箭头函数中的this问题 ES6中新增了箭头函数这种语法，箭头函数以其简洁性和方便获取this的特性...ES6箭头函数中的this问题需要我们深入理解箭头函数中的this指向的固定化，避免混淆一般函数定义的函数的this指向。
简单学习Es6中的this指向
憧憬个人博客
01-19 2088
前言对于一个前端初学者来说，this的指向是一个必须要掌握的知识点，尤其是es6之后的this指向更加变得飘忽不定，我们今天就来了解一下各种情况下this的指向。什么是this首先，this不是一个函数也不是某个对象，它具体指向什么东西取决于我们在哪里去调用这个this，只有函数调用的时候才会发生this的绑定1.全局作用域console.log(this ===...
ES6类里面this指向
小超人日常码字
09-22 301
构造函数里this指向实例对象 方法里this指向调用者 不调用时候this指向原型对象 调用时候指向调用者 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
【ES6】es6箭头函数的this指向
余浩的博客
03-19 740
对于普通函数来说，内部的`this`指向函数运行时所在的对象，但是这一点对箭头函数不成立。 箭头函数没有自己的`this`对象，内部的`this`就是定义时上层作用域中的`this`。 也就是说，箭头函数内部的`this`指向是固定的，相比之下，普通函数的this指向是可变的。 **总之，箭头函数根本没有自己的`this`，导致内部的`this`就是它所在的外层父级函数代码块的`this`。正是因为它没有`this`，所以也就不能用作构造函数。**
ES6中箭头函数中的this指向
Alley
09-05 899
箭头函数的this，指向和function定义的函数不同 箭头函数this的定义是在函数定义的时候绑定的而不是在执行函数的时候绑定
es6 箭头函数this指向问题 简单易懂 仅供初学者参考
lingengxian的博客
05-15 384
只需要弄明白2点即可 1 箭头函数本身没有this,其this是继承于父级作用域中的this的指向。 2 何为父级作用域：即是箭头函数定义所在的函数作用域，非函数作用域是
深入理解React中es6创建组件this的方法
09-01
本文将深入探讨在React中如何理解和处理`this`，以及在ES6类组件中`this`的绑定问题。 首先，`this`在JavaScript中是动态绑定的，它并不受作用域的影响，而是与函数的执行上下文紧密关联。在React中，当我们创建一...
ES6之this指向详细解析(转)
m0_47230916的博客
08-21 456
** 转载地址：this 指向详细解析（箭头函数） ** 前言 this 指向问题是入坑前端必须了解知识点，现在迎来了ES6时代，因为箭头函数的出现，所以感觉有必要对 this 问题梳理一下，遂有此文 在非箭头函数下， this 指向调用其所在函数的对象，而且是离谁近就是指向谁（此对于常规对象，原型链， getter & setter等都适用）；构造函数下，this与被创建的新对象绑定；DOM事件，this指向触发事件的元素；内联事件分两种情况，bind绑定， call & apply 方法
ES6箭头函数内this指向问题
weixin_44054088的博客
03-14 548
ES6箭头函数内this指向问题 function foo(){ console.log(this); return function(){ console.log(this); } } var fn=foo.call({name:'zx'});//Obj fn();//window 以上代码...
ES6中箭头函数的this指向和注意事项
weixin_44526436的博客
10-17 627
先说结论： 箭头函数this指向： 箭头函数没有this指向，箭头函数内部的this只能通过查找作用域链来确定 箭头函数使用注意事项： 使用箭头函数，函数内部没有arguments 箭头函数不能使用new 关键字来实例化对象。 箭头函数this指向 例子： let pageHandle = { id:123, init:function(){ document.addEventListener
es6和es5中的this指向
su的博客
09-30 3000
先看一段代码： var name = "window"; var obj = { name: 'obj', //普通函数 one: function(){ console.log(this.name) }, //箭头函数 two: ()=> { console.log(this.name) }, /...
JavaScript中ES6常见新增语法（this指向问题）
qq_45799465的博客
02-11 1581
目录 一、立即执行函数 1.1 定义 1.2 语法形式 1.2.1 不带参数形式 1.2.2 带有参数形式 1.3 注意 二、箭头函数 2.1 定义 2.2 关键作用 2.3 语法形式 三、this指向 3.1 定义 3.2 this指向的理解 3.3 不同函数的具体的this指向 3.3.1 普通函数 3.3.2 声明式函数 赋值式函数 定时器 延时器 forEach .... 3.2 箭头函数的this指向 3.3 改变this指向 3.3....
es6箭头函数以及this的指向问题
lishundi的博客
08-14 1913
es3，es5中的构造函数与es6中的箭头函数区别： es3 es5中的函数的写法： function (){ } es6中的箭头函数的写法： ()=&gt;{ } 注意：如果参数只有一个，并且函数体内直接将参数作为返回值，则可以省略()和{}。 { var array = [1,2,3,4,5]; var adds = array.map(function (...
es6-箭头函数中的this使用
杨前露的博客
11-24 7286
看网上资料对es6箭头函数中的this总结：箭头函数中的this指向的是定义时的this，而不是执行时的this。 刚开始不明白是什么意思 在项目中也是稀里糊涂的用，现在自己就总结一下。。。来看看this的一个使用案例：//定义一个对象 var obj = { x:100, //属性x show(){ //延迟500毫秒，输出x的值
ES6语法-箭头函数-this-高阶函数
m0_67212141的博客
12-08 510
快来学习吧，原创不易，多多支持呀！每篇都是干货!
ES6语法之：this的由来
王同学LM的专栏
09-23 479
今天在看阮一峰《ECMAScript 6入门》“Class的基本用法”这一章时，this关键字又引起我的注意，心想，JavaScript中的this和C++中的this一样吗？ 我们先来看看传统面向对象语言C++中的this： #include <iostream> using namespace std; class Student { public: Studen...
ES6箭头函数的this指向详解
最新发布
weixin_51737813的博客
11-20 39
，作用域是指函数内部，这里的箭头函数，也就是sayHello，所在的作用域其实是最外层的js环境，因为没有其他函数包裹；然后最外层的js环境指向的对象是winodw对象，所以这里的this指向的是window对象。这样就做到了永远指向A对象了，我们再根据“，而不是使用时所在的作用域指向的对象。一开始，我重点标注了“
Vue实例中的this指向问题
05-12
在 Vue 实例中，this 指向当前组件的实例对象。这个实例对象包含了组件的所有属性和方法，可以通过 this 访问这些属性和方法。 然而，在某些情况下，this 的指向可能会出现问题，主要有两种情况： 1. 在回调函数中，this 的指向可能会丢失。这是因为回调函数中的 this 默认指向全局对象（即 window 对象）而不是 Vue 实例对象。为了解决这个问题，可以使用箭头函数代替传统的函数表达式，因为箭头函数不会创建自己的 this，而是使用它所在的上下文的 this。 2. 在异步代码中，this 的指向可能会出现问题。例如，在组件的 mounted 钩子函数中发起异步请求获取数据，如果在回调函数中使用 this 访问组件的实例属性，可能会发现 this 的值已经变成了 undefined。这是因为回调函数是在异步操作完成后才执行的，此时 this 的值已经不再指向组件的实例对象。为了解决这个问题，可以在组件的 created 钩子函数中使用箭头函数绑定 this，或者使用 ES6 的 Promise 或 async/await 来处理异步操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值