关于js中的 =＞ 和 this. 是怎么使用的

最新推荐文章于 2025-10-09 08:22:14 发布
原创 最新推荐文章于 2025-10-09 08:22:14 发布 · 6.4k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

这篇博客深入浅出地介绍了JavaScript中基础且重要的两个概念：this关键字及其在不同场景下的行为，以及箭头函数的使用方式和特点。通过实例解析，帮助读者更好地理解和应用这两种语法。
三个案例掌握this.$nextTick()方法的使用/Vue中的$nextTick()
天命爱心职责的博客
02-14 2万+
his.$nextTick() 解释为在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM. 也就是说，当dom元素发生改变，重新渲染dom树后，再执行vue.$nextTick()里面的内容。
深度剖析 JS 的箭头函数 = ＞ 与普通函数 function 的区别
czjl6886的博客
02-11 5728
ES6 中添加了箭头函数的规范，在常用的前端框架，如 Vue，也会经常使用到箭头函数，今天我们就来深度学习箭头函数(arrow function)。本文主要介绍箭头函数的概念，重点介绍它与普通函数(function)的区别，包括基本语法、this指向、使用场景等。
JS-()=>{}使用判断this
xiaye_go的博客
11-10 775
使用方法1：x=>x+x 等同于 function(x){return x + x} 使用方法2:当多个参数时得加(): （x, y）=>x+y 等同于function(x,y){retutn x+y} 使用方法3：当函数体有多个表达式则加{}:(x,y)=>{...}   ()=>{}使用的时候注意，函数体内的this为使用该函数时的上下文执行环境中的this，如...
【js】this=>>4种用法
IT1125275074的博客
10-08 229
JS中this的四种用法 1.在一般函数方法中使用this指代全局对象 functiontest(){　　this.x=1;alert(this.x);}test()//1 2.作为对象方法调用，this指代上级对象 　　functiontest(){　　alert(this.x);}va...
JavaScript中的箭头函数（=＞）用法详解
最新发布
Rysxt_的博客
10-09 1017
​，通过。
彻底搞懂 JS 中 this 机制
Jungle
04-08 2万+
彻底搞懂 JS 中 this 机制 摘要：本文属于原创，欢迎转载，转载请保留出处：https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规则 绑定规则的优先级 绑定例外 扩展：箭头函数 this 是什么 理解this之前， 先纠正一个观点，this 既不指向函数自身，也不指函数的词法作用域。如果仅通过thi...
JS中箭头函数=＞的最全用法及详细讲解
xia1140418216的博客
03-09 7943
JS中箭头函数的运用
js中 => 的含义
热门推荐
小白菜的专栏
01-20 5万+
=>是es6语法中的arrow function (x) => x + 6 相当于 function(x){ return x + 6; };
2020 零基础 Vue快速入门 Vue2.0使用ES6语法的箭头函数=> 对this作用域的理解 【整理】
超逸の学习技术博客
01-14 2643
文章目录1、引言2、简单介绍3、普通函数4、箭头函数 =>5、实例演示6、结束语 1、引言 最近，学Vue相关知识时，学到了axios，发现axios请求之后的回调函数里this并不指向当前vue实例，在浏览器按F12报了错，赶紧想着去解决问题，后面才知道原来还有箭头函数这个简便操作，一起来了解一下把~ 2、简单介绍 关于它们两个的比较，我就以请求一个随机获取笑话的api为例了，来说明它们的...
echarts 与 this.$nextTick
见贤思齐焉，见不贤内自省
12-11 2407
使用变量改变dom后，需要使用this.$nextTick来获取更新后的dom元素。 简单使用方法 ： 使用变量改变dom后，在nextTick回到函数中再调用方法 小案例： <template > <div class="container"> <button @click="changeShow(1)">显示p1</button> <button @click="changeShow(2)">显示p2</button&
报错The engine “node“ is incompatible with this module. Expected version “＞=10.16.0“. Got “10.15.0“
Anny1272667988的博客
08-19 4216
yarn add vue-router@4.0.0-beta.6时报错 error vite@1.0.0-rc.4: The engine "node" is incompatible with this module. Expected version ">=10.16.0". Got "10.15.0" error Found incompatible module. 意思是：vite@1.0.0-rc.4：引擎“节点”与此模块不兼容。预期node版本“>=10.16.0”，现在是“10.
=>和this
weixin_33871366的博客
06-11 267
比如说有这么一段代码： var O = function(data){ this.data = data } O.prototype.selfCall = function(data){ if(data.length>1){ data.forEach(function(e){console.log(this)}) ...
js---this、箭头函数
muzidigbig的博客
12-13 1280
函数的时候绑定，而不是在执行函数的时候绑定，所以this指向定义时所在的作用域的this（它只会从自己的作用域链的上一层沿用thi s）。箭头函数中的this引用的是最近作用域中的this；即向外层作用域中，一层层的查找直到this的定义。箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是。 为什么class中的方法可以使使用箭头函数
js中的this详解
weixin_47450807的博客
01-20 1316
this的指向一直都是js中的一大难点，接下来将会从以下方面对this的指向进行总 结，包含一些面试题。 一、this的默认绑定 function foo() { console.log(this) //window } foo() function test1() { console.log(this) //window test2() } function test2() { console.log(this) //window test3() } function
js （this,原型与闭包）
html标签-meta
12-01 1059
this 有对象指向对象； 没对象指向全局变量（window）; 有new指向new出的新对象； bind,call&amp;apply改变this的指向； setTimeout/setInterval this指向window； 箭头函数 this 是由函数定义时候确定的 var adder = {   base : 1,        add : function(a) {   ...
JS中的this指向问题(详细版)
LoveyL0201的博客
10-23 1万+
JS中的this指向问题() 在全局作用域中 =>this -> window <script> console.log(this); //this->window </script> 在普通函数中 =>this取决于谁调用，谁调用我，this就指向谁，跟如何定义无关 var obj = { fn1:function() { console.log(this);
js学习之路（六）——this，箭头函数，对象操作
等风来的博客
03-03 849
js学习之路（六）
ES6中的=>（箭头函数）与this
乱世之牙
09-06 397
地球变暖和你们作死的添加JavaScript有莫大的关系。每个人的浏览器多执行两个函数，CPU使用就要往上蹿一点，能耗就会增加，气温就会升高。一个网页被访问的人越多，地球的生态就会越发危险。比起空调，JavaScript 才是罪魁祸首。你看到的每一个爆款页面，后面都是北极熊和企鹅的血泪。从我做起，克制JavaScript的使用，让网页回到没有交互没有特效几乎啥也干不了的年代。否则，我们的子孙...
this.formData.longlistSupplierList = this.formData.longlistSupplierList.filter(item1 => !this.nameListIds.some(item2 => item1 == item2))这段代码有什么问题
09-18
代码 `this.formData.longlistSupplierList = this.formData.longlistSupplierList.filter(item1 =>!this.nameListIds.some(item2 => item1 == item2))` 的目的是从 `this.formData.longlistSupplierList` 数组中过滤掉那些存在于 `this.nameListIds` 数组中的元素。不过，这段代码可能存在以下潜在问题： ### 数据类型比较问题 代码里使用了 `==` 进行比较，`==` 在比较时会进行类型转换，这也许会引发意外的结果。例如，`'1' == 1` 会返回 `true`，但有时候我们期望的是严格相等。若需要严格比较，建议使用 `===`。 ```javascript this.formData.longlistSupplierList = this.formData.longlistSupplierList.filter(item1 =>!this.nameListIds.some(item2 => item1 === item2)); ``` ### 性能问题 当 `this.nameListIds` 数组非常大时，`some` 方法会对 `this.formData.longlistSupplierList` 中的每个元素都遍历一遍 `this.nameListIds`，这会使时间复杂度达到 $O(n * m)$，其中 $n$ 是 `this.formData.longlistSupplierList` 的长度，$m$ 是 `this.nameListIds` 的长度。为了提升性能，可以将 `this.nameListIds` 转换为 `Set`，因为 `Set` 的查找操作时间复杂度是 $O(1)$。 ```javascript const nameListIdsSet = new Set(this.nameListIds); this.formData.longlistSupplierList = this.formData.longlistSupplierList.filter(item1 =>!nameListIdsSet.has(item1)); ``` ### 空数组或未定义问题 如果 `this.formData.longlistSupplierList` 或 `this.nameListIds` 为 `undefined` 或者 `null`，代码会抛出错误。在使用之前，最好先进行空值检查。 ```javascript if (this.formData.longlistSupplierList && this.nameListIds) { const nameListIdsSet = new Set(this.nameListIds); this.formData.longlistSupplierList = this.formData.longlistSupplierList.filter(item1 =>!nameListIdsSet.has(item1)); } ``` ### 原数组修改问题 这段代码直接修改了 `this.formData.longlistSupplierList` 的值。在某些情况下，可能需要保留原数组，只创建一个新的过滤后的数组。如果是这种情况，代码本身没有问题，但要注意这一点。 ### 相关问题 1. 如何对过滤后的 `this.formData.longlistSupplierList` 数组进行排序？ 2. 如果 `this.formData.longlistSupplierList` 中的元素是对象，该如何修改过滤逻辑？ 3. 使用 `Set` 进行过滤会有什么潜在的内存问题吗？ 4. 除了 `filter` 和 `some` 方法，还有其他方法可以实现相同的过滤功能吗？
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

唐开甲

共勉

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值