let that = this 重要性

最新推荐文章于 2024-05-08 16:41:41 发布
最新推荐文章于 2024-05-08 16:41:41 发布
阅读量1.1k 收藏 2
点赞数 2
分类专栏： Node JavaScript面向对象 文章标签： js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45499478/article/details/114803160
版权

阅读其他人代码的时候，可能会遇到这样一段代码

let that = this

不要小看这段话，作用大了去了。
原因是：this 会随着上下文环境而变换它的指向，在当前作用域中设置一个变量用来存储 this 可以防止在其他地方找不到 this 的错误。

【AI 大模型论文中英双语阅读】让我们一步步验证 Let’s Verify Step by Step
AI天才研究院
09-22 655
最后，我们研究主动学习的影响。为了训练每个更大的奖励模型，我们选择 N 每个问题的样本 80% 是最有说服力的（根据 PRMselector ）错误答案样本，以及 20% 是剩下的最有说服力的样本（正确或错误的答案）。尽管我们有时会出现正确的解决方案（通过手动注入正确的解决方案或由于自动评分中的错误），但我们在此阶段收集的绝大多数标签都是错误的解决方案。我们发布了 PRM800K，这是用于训练我们最先进的奖励模型的人类反馈的完整数据集，希望消除这一重大的进入障碍将促进大型语言模型对齐的相关研究。
Javascript语言精粹学习笔记之函数
Tendo的博客
07-12 372
- JavaScript中的函数 JavaScript中最好的特性就是它对函数的实现。它几乎无所不能。 但是,想必你也能预料到,函数在JavaScript里也并非万能药。 函数包含一组语句，它们是JavaScript 的基础模块单元， 用于代码复用、信息隐藏和组合调用。函数用于指定对象的行为。 一般来说，所谓编程就是将一组需求分解成一组函数与数据结构的技能。 1. 函数对象 函数的定义 函数是第一类对象（first-class object），被称为一等公民。函数与对象共存，我们也可以认为函
let that = this
初心不改，事在人为
08-21 2181
let that = this； 在回调中一定要使用
js中的_this
起风了
04-24 693
问题一:不知道楼主有没有接触过jquery jquery里边有一个特别典型的例子能说明用_this的作用$("#btn").click(function(){ var _this = this;//这里this和_this都代表了"#btn"这个对象 $(".tr").each(function(){ this;//在这里this代表的是每个遍历到的".tr"对象 ...
为什么let this=that
曲小强
10-09 8030
不知道大家有没有接触过jquery jquery里边有一个特别典型的例子能说明用_this的作用 $("#btn").click(function(){ var that = this;//这里this和that都代表了"#btn"这个对象 $(".tr").each(function(){ this;//在这里this代表的是每个遍历到的".tr"对象 ...
vue中let that=this的作用
晚风的博客
03-19 3550
this 会随着上下文环境而变换它的指向，在当前作用域中设置一个变量用来存储 this 可以防止在其他地方找不到 this 的错误。 ```javascript $("#btn").click(function(){ var that = this;//这里this和that都代表了"#btn"这个对象 $(".tr").each(function(){ this;//在这里this代表的是每个遍历到的".tr"对象 that;//仍代表"#btn"
微信小程序中为什么使用var that=this
12-09
在微信小程序或JavaScript开发中，`var that = this` 的使用常常被用来保存函数外部的上下文引用，尤其是在处理...正确理解并使用 `this` 和 `var that = this`，有助于避免常见的编程陷阱，提高代码的可读性和维护性。
this-or-that
04-01
在IT行业中，JavaScript是一种至关重要的编程语言，尤其在前端开发领域。标题"this-or-that"可能指的...标题"this-or-that"可能是对这种选择性使用"this"技巧的提示，提醒我们要灵活地根据具体情境来确定和使用"this"。
微信小程序之启动页的重要性
u010889990的专栏
02-11 1476
启动页在APP中是个很常见的需求，为什么对于小程序来说也非常重要呢？首先我描述一下我在开发过程中遇到的一些问题以及解决的步骤，到最后为什么要加启动页，看完你就明白了。 小程序的首页需要展示用户关注的小区信息，意味着一打开小程序我就得先执行登录的逻辑，只有登录了之后才能获取用户关注的小区信息。 在小程序启动的时候自动登录，目前没获取用户信息，所以不需要用户授权，这个逻辑放在根目录下的app.js的o...
JS中关于 let that = this 的理解
weixin_51795940的博客
07-21 1894
在JavaScript中，这种写法通常用于解决this关键字在不同作用域中指向不同对象的问题。在某些情况下，例如在嵌套函数或回调函数中，this关键字可能不再指向期望的对象。为了在这些情况下仍然能够访问外部作用域中的this，开发人员会创建一个新的变量（通常命名为that或self），并将其赋值为外部作用域中的this。这样，在嵌套函数或回调函数中，就可以通过访问that变量来访问外部作用域中的this。在上面的代码中，由于setTimeout的回调函数是在全局作用域中执行的，所以其中的this。
【小程序】为什么使用let that=this
karshey的博客
04-23 740
而不是使用时所在的作用域指向的对象。这与箭头函数的作用域有关。
vue let that = this的问题
axinxina的博客
05-08 427
vue 使用let that = this的问题
let that = this 或者 var that = this 有什么意义
boyikenan123的博客
04-06 1207
在vue 开发过程中我们经常会发现 let that = this 这样写有什么好处呢 首先要理解this,下面简述两点 this 永远指向一个对象 this 的指向取决于函数调用的位置 首先 this 指向的是一个对象，这个好理解，难就难在第二点，在JavaScript 中 一切都是对象，运行环境也是对象，this 的指向是动态的很难确定指向那个对象 $('#conten').click(function(){ //this是被点击的#conten var that =thi
js中，一个js中的函数，第一句var thiz = this; 为什么要这样做？
念念不忘丶又怎樣的博客
04-27 1793
第一种情况: $("#btn").click(function(){ var _this = this; //这里this和_this都代表了"#btn"这个对象 $(".tr").each(function(){ this;//在这里this代表的是每个遍历到的".tr"对象 _this;//仍代表"#btn"对象 }) })这种
Vue中能使用的最具有实用性传参方式
龘
04-23 300
父传子 //父组件 <template> <div id="app"> <Subassembly :Properties="Properties"/>//绑定一个属性挂载要传输的变量 </div> </template> <script> import Subassembly from '组件路径'; export default { components:{Subassembly,//... },//注册 data
vue中let that=this的作用及说明
OKMZY的专栏
06-21 1222
这里声明一个变量指向父函数的this, 用于 _this.DataNow = new Date();修改父函数的“DataNow”实现动态时间，如果这里改为this.DataNow = new Date() 就指向了mounted里面的DataNow 则没有了效果；_this只是一个变量名，this代表父函数，如果在子函数还用this，this的指向就变成子函数了，_this就是用来存储指向的。2.vue.js的this作用域问题。
微信小程序使用that=this原理
热门推荐
爱与自由，一生所求
03-07 1万+
微信小程序开发过程中发现一个很奇怪的问题，有些情况下用this.setData可以改变初始化数据data，有些情况下使用this.setData无效，比如：在wx.request({});方法调用成功或者失败之后，有时候需要使用this.setData修改初始化数据data，更新视图数据。需要使用 letthat = this; that.setData({ xx });使用...
let _this = this；作用讲解
有一颗前端心的后端开发小哥
12-08 3799
let _this = this;作用讲解 近日在学习vue方面，发现一个问题回答的挺好，在此记录下。 作用讲解：正常我们要获取vue变量或方法的时候，就使用this，但是在一些用到回调函数的时候，this指的就不是vue变量，而是回调函数本身，所以在一开始的时候，先定义_this=this，这样在任何位置都可以用_this来获取vue变量或方法 ...
<template> <view class="wrap"> <view class="dev-area"> <view style="width: 100%;padding: 20px;font-size: 24px;font-weight: bold;">实时数据监测</view> <view class="dev-cart"> <view class=""> <view class="dev-name">土壤湿度</view> <image class="dev-logo" src="../../static/temp.png" mode=""></image> </view> <view class="dev-data">{{(datas.Intelligent1)}} ℃</view> </view> <view class="dev-cart"> <view class=""> <view class="dev-name">人体检测</view> <image class="dev-logo" src="../../static/shuiwei.png" mode=""></image> </view> <view class="dev-data">{{datas.HC}} Pa</view> </view> <view class="dev-cart"> <view class=""> <view class="dev-name">天气</view> <image class="dev-logo" src="../../static/qiti.png" mode=""></image> </view> <view class="dev-data">{{ datas.rain >= 0 && datas.PRESSURE <= 100? '闲置' : (datas.PRESSURE > 100 && datas.PRESSURE <= 200? "已穿鞋" : (datas.PRESSURE > 200? '行走' : 0)) }}</view> </view> <view class="dev-cart"> <view class=""> <view class="dev-name">光照强度</view> <image class="dev-logo" src="../../static/gz.png" mode=""></image> </view> <view class="dev-data">{{datas.LDR1}} %</view> </view> <!-- <view style="width: 100%;padding: 20px;font-size: 24px;font-weight: bold;"></view> --> <!-- <view class="dev-cart"> <view class=""> <view class="dev-name">喂食状态</view> <image class="dev-logo" src="../../static/qiti.png" mode=""></image> </view> <view class="dev-data">{{datas.FEED111START==1? '正在喂食' :'暂停'}} </view> </view> <view class="dev-cart"> <view class=""> <view class="dev-name">报警状态</view> <image class="dev-logo" src="../../static/led.png" mode=""></image> </view> <view class="dev-data">{{datas.FEED111ALARM==1? '报警' :'关闭'}} </view> </view> --> <view style="width: 100%;padding: 20px;font-size: 24px;font-weight: bold;">远程控制</view> <button :type="active? 'primary' : 'default'" @click="autoMode('aaa','mode')">自动模式</button> <!--<button :type="active? 'default' : 'danger'" @click="autoMode('ddd','mode')">退出手动</button>--> <button :type="active? 'default' : 'primary'" @click="autoMode('bbb','mode')">手动模式</button> <!-- <view class="dev-cart"> <view class="" style="width: 200px;"> <view class="dev-name">喂食量:{{datas.FEED111LIM}}g</view> <image class="dev-logo" src="../../static/sd.png" mode=""></image> </view> <input class="dev-data" v-model="FEED111LIM" placeholder="输入" /> <button class="small-button" @click="setBfyVal('FEED111LIM','s')">提交</button> </view> <view class="dev-cart"> <view class="" style="width: 200px;"> <view class="dev-name">定时喂食:{{datas.FEED111TIME}}</view> <image class="dev-logo" src="../../static/speed.png" mode=""></image> </view> <picker mode="time" :value="FEED111TIME2" start="09:00" end="17:30" @change="bindTimeChange"> <view style="font-size: 12px;">{{FEED111TIME2?FEED111TIME2:'选择时间'}}</view> </picker> <button class="small-button" @click="setBfyVal('FEED111TIME','s')">提交</button> </view> --> <!-- <view class="dev-cart"> <view class="" style="width: 200px;"> <view class="dev-name">光照阈值:{{datas.BARN111lightLIM}}</view> <image class="dev-logo" src="../../static/gz.png" mode=""></image> </view> <input class="dev-data" v-model="BARN111lightLIM" placeholder="输入" /> <button class="small-button" @click="setBfyVal('BARN111lightLIM','s')">提交</button> </view> <view class="dev-cart"> <view class="" style="width: 200px;"> <view class="dev-name">气体阈值:{{datas.BARN111gasLIM}}</view> <image class="dev-logo" src="../../static/qiti.png" mode=""></image> </view> <input class="dev-data" v-model="BARN111gasLIM" placeholder="输入" /> <button class="small-button" @click="setBfyVal('BARN111gasLIM','s')">提交</button> </view> --> <!--</view> <view v-if="!active"> <view style="width: 100%;padding: 20px;font-size: 24px;font-weight: bold;">灯光控制</view> <view class="dev-cart" style="width: 640rpx;"> <button class="small-button" style="background-color: #2b9939;" @click="autoMode('LEDN')">开启</button> <button v-else class="small-button" style="background-color: #999192;" @click="autoMode('LEDF')">开启</button> <button class="small-button" style="background-color: #2b9939;" @click="autoMode('LEDF')">关闭</button> <button v-else class="small-button" style="background-color: #999192;" @click="setBfyVal2('BARN111CONT',1)">关闭</button> </view> <button v-if="datas.BARN111CONT==2" class="small-button" style="background-color: #2b9939;" @click="setBfyVal2('BARN111CONT',2)">强制关闭</button> <button v-else class="small-button" style="background-color: #999192;" @click="setBfyVal2('BARN111CONT',2)">强制关闭</button> <view style="width: 100%;padding: 20px;font-size: 24px;font-weight: bold;">水泵控制</view> <view class="dev-cart" style="width: 640rpx;"> <button class="small-button" style="background-color: #2b9939;" @click="autoMode('BON')">开启</button> <button v-else class="small-button" style="background-color: #999192;" @click="autoMode('LEDF')">开启</button> <button class="small-button" style="background-color: #2b9939;" @click="autoMode('BOFF')">关闭</button> <button v-if="datas.BARN111CONT==0" class="small-button" style="background-color: #2b9939;" @click="setBfyVal2('BARN111CONT',0)">开启</button> <button v-else class="small-button" style="background-color: #999192;" @click="setBfyVal2('BARN111CONT',0)">开启</button> <button v-if="datas.BARN111CONT==1" class="small-button" style="background-color: #2b9939;" @click="setBfyVal2('BARN111CONT',1)">关闭</button> <button v-else class="small-button" style="background-color: #999192;" @click="setBfyVal2('BARN111CONT',1)">关闭</button> --> <view v-if="!active"> <!-- 灯光控制 --> <view style="width: 100%; padding: 20px; font-size: 24px; font-weight: bold;">灯光控制</view> <view class="dev-cart" style="width: 640rpx;"> <!-- 开启按钮逻辑 --> <button v-if="lightOpenCondition" class="small-button" style="background-color: #2b9939;" @click="autoMode('LEDN')">开启</button> <button v-else class="small-button" style="background-color: #999192;" @click="autoMode('LEDF')">开启</button> <!-- 关闭按钮逻辑 --> <button v-if="lightCloseCondition" class="small-button" style="background-color: #2b9939;" @click="autoMode('LEDF')">关闭</button> <button v-else class="small-button" style="background-color: #999192;" @click="setBfyVal2('BARN111CONT',1)">关闭</button> </view> <!-- 强制关闭按钮逻辑 --> <button v-if="datas.BARN111CONT === 2" class="small-button" style="background-color: #2b9939;" @click="setBfyVal2('BARN111CONT',2)">强制关闭</button> <button v-else class="small-button" style="background-color: #999192;" @click="setBfyVal2('BARN111CONT',2)">强制关闭</button> <!-- 水泵控制 --> <view style="width: 100%; padding: 20px; font-size: 24px; font-weight: bold;">水泵控制</view> <view class="dev-cart" style="width: 640rpx;"> <!-- 开启按钮逻辑 --> <button v-if="pumpOpenCondition" class="small-button" style="background-color: #2b9939;" @click="autoMode('BON')">开启</button> <button v-else class="small-button" style="background-color: #999192;" @click="autoMode('LEDF')">开启</button> <!-- 关闭按钮逻辑 --> <button v-if="pumpCloseCondition" class="small-button" style="background-color: #2b9939;" @click="autoMode('BOFF')">关闭</button> <button v-if="datas.BARN111CONT === 0" class="small-button" style="background-color: #2b9939;" @click="setBfyVal2('BARN111CONT',0)">开启</button> <button v-else class="small-button" style="background-color: #999192;" @click="setBfyVal2('BARN111CONT',0)">开启</button> <button v-if="datas.BARN111CONT === 1" class="small-button" style="background-color: #2b9939;" @click="setBfyVal2('BARN111CONT',1)">关闭</button> <button v-else class="small-button" style="background-color: #999192;" @click="setBfyVal2('BARN111CONT',1)">关闭</button> </view> </view> </view> </view> </view> </template> <script> const { createCommonToken } = require('@/key.js') export default { data() { return { //active: 1, productId: '799knCKRru', deviceName: "test", temp: '', humi: '', led: true, bee: true, //datas: {}, uid: 'a86461193caac133ec583a2dd6e5c8c3', TUL004: '', HUL004: '', LUL004: '', FEED111LIM: '', FEED111TIME2: '', FEED111TIME: '1000', active: false, datas: { BARN111CONT: 0 }, // 新增灯光控制条件变量 lightOpenCondition: true, lightCloseCondition: true, // 新增水泵控制条件变量 pumpOpenCondition: true, pumpCloseCondition: true }; }, onLoad() { const params = { author_key: 'OkuBMchdHrZPKiGNt6kl2fUYSJ8UNbEiznFEArJt/OhmRUvWLKYoGJGE9BUITojxlqnB0cN61//gll6vFEtjauw==', version: '2022-05-01', user_id: '4053575', product: this.productId, device: this.deviceName, } this.token = createCommonToken(params); this.fetchDevData(); setInterval(() => { this.fetchDevData(); }, 3000) }, // computed: { // result() { // if (this.datas.PRESSURE >= 0 && datas.PRESSURE <= 100) { // return '闲置'; // } else if (this.datas.PRESSURE > 100 && this.datas.PRESSURE <= 200) { // return '已穿上'; // } else if (this.datas.PRESSURE > 200) { // return "行走"; // } // } // }, onShow() {}, methods: { autoMode(param) { // 自动模式方法逻辑 console.log('执行自动模式操作', param); }, setBfyVal2(key, value) { // 设置值方法逻辑 console.log('设置值操作', key, value); this.datas[key] = value; // autoMode(msg, mode) { // if (mode == 'mode') { // this.active = !this.active // } // wx.request({ // url: 'https://apis.bemfa.com/va/postJsonMsg', //api接口，详见接入文档 // method: "POST", // data: { // uid: this.uid, // topic: "LED", // type: 3, // msg: msg // }, // success(res) { // console.log(res, 'kkkkkkkk') // // that.fetchDevData(); // } // }) // }, bindTimeChange(e) { this.FEED111TIME2 = e.target.value; this.FEED111TIME = e.target.value.replace(':', ''); }, fetchDevData() { var that = this; uni.request({ url: 'https://apis.bemfa.com/va/alltopic?uid=' + this.uid + "&type=3", //get接口，详见巴法云接入文档 data: { uid: this.uid, type: 3, }, success(res) { var dataArr = res.data.data; var datas = {}; for (let obj of dataArr) { datas[obj.topic] = obj.msg; that.datas = datas; } } }) }, setBfyVal(val, t) { var that = this; var msg = parseInt(this[val]); if (t == 's') { msg = msg + '' } wx.request({ url: 'https://apis.bemfa.com/va/postJsonMsg', //api接口，详见接入文档 method: "POST", data: { uid: this.uid, topic: val, type: 3, msg: msg }, success(res) { console.log(res.data) that.fetchDevData(); } }) }, setBfyVal2(val, t) { var that = this; wx.request({ url: 'https://apis.bemfa.com/va/postJsonMsg', //api接口，详见接入文档 method: "POST", data: { uid: this.uid, topic: val, type: 3, msg: t + '' }, success(res) { console.log(res.data) that.fetchDevData(); } }) }, setFlagVal(flag) { var params = {}; flag = "" + flag; params[flag] = parseInt(this[flag]); uni.request({ url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', method: 'POST', data: { product_id: this.productId, device_name: this.deviceName, params: params }, header: { 'authorization': this.token //自定义请求头信息 }, success: () => { console.log('dantemp updated successfully:'); }, fail: (error) => { console.error('Request failed:'); } }); }, // onDANHUMISwitch(event) { // console.log('Submitting dantemp:', this.dantemp); // 日志输出 // console.log(event.detail.value); // let value = event.detail.value; // uni.request({ // url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', //仅为示例，并非真实接口地址。 // method: 'POST', // data: { // product_id: '799knCKRru', // device_name: 'test', // params: { // "tar_humi": parseInt(this.danhumi) // } // }, // header: { // 'authorization': this.token //自定义请求头信息 // }, // success: () => { // console.log('danhumi updated successfully'); // }, // fail: (error) => { // console.error('Request failed:', error); // } // }); // }, } } </script> <style> .zt { background-color: #2b9939; } .wrap { padding: 30rpx; } .dev-area { display: flex; justify-content: space-between; flex-wrap: wrap; } .dev-cart { height: 150rpx; width: 320rpx; border-radius: 30rpx; margin-top: 30rpx; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 0 15rpx #ccc; } .dev-name { font-size: 20rpx; text-align: center; color: #6d6d6d; } .dev-logo { width: 70rpx; height: 70rpx; margin-top: 10rpx; } .dev-data { font-size: 30rpx; color: #6d6d6d; } .small-button { padding: 10rpx 20rpx; font-size: 24rpx; border-radius: 15rpx; background-color: #2b9939; color: white; border: none; } </style> 检测代码是否有问题
最新发布
05-13
另外，引用[2]提到多人协作时统一代码风格的重要性，所以需要建议用户确保项目中有统一的ESLint配置，可能使用.prettierrc或.editorconfig文件，并且所有成员都遵循这些规则。同时，可以建议在IDE中配置自动格式化...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值