vue小记——this(1)

原生和Vue中使用this的这几个坑你都知道吗? - 掘金 (juejin.cn)

在JavaScript中,this是一个特殊的关键字,它在函数被调用时自动定义。this的值在函数被调用时决定,取决于调用的上下文(context),它代表了函数运行时的当前对象。

让我们来看几种不同的情况下this的指向:

全局上下文:在全局作用域中,this指向全局对象。在浏览器环境中,全局对象是window

console.log(this); // window 对象

对象方法:当一个函数作为某个对象的方法被调用时,this指向调用该方法的对象。

const obj = {  prop: 'Hello',  method: function() {  console.log(this.prop); // 输出 'Hello'  }  
};  obj.method(); // 调用 obj 的 method 方法,此时 this 指向 obj

单独调用:如果函数是单独调用的(不是作为对象的方法,也不是通过new关键字),那么this通常指向全局对象(在浏览器中是window)。

function testFunc() {  console.log(this); // window 对象  
}  testFunc(); // 单独调用函数

构造函数:当函数通过new关键字被调用时,它作为一个构造函数,此时this指向新创建的对象实例。

function Person(name) {  this.name = name;  
}  const john = new Person('John'); // 创建一个新的 Person 实例,this 指向 john  
console.log(john.name); // 输出 'John'

事件监听器:在事件监听器内部,this通常指向触发事件的元素。

const button = document.getElementById('myButton');  
button.addEventListener('click', function() {  console.log(this); // 指向 button 元素  
});

箭头函数:箭头函数不绑定自己的this,它继承自包围它的函数或全局作用域的this

function OuterFunction() {  this.value = 'outside';  const innerFunc = () => {  console.log(this.value); // 输出 'outside',而不是 'inside'  };  this.innerFunc = innerFunc;  
}  const outer = new OuterFunction();  
outer.innerFunc(); // 调用箭头函数,this 继承自 OuterFunction 的上下文

Vue 实例中的 this

当你在 Vue 实例的方法中使用 this 时,它指向的是该 Vue 实例。这允许你访问 Vue 实例的 datamethodscomputed 等属性。

new Vue({  el: '#app',  data: {  message: 'Hello Vue!'  },  methods: {  showMessage: function() {  console.log(this.message); // 这里的 this 指向 Vue 实例  }  },  created: function() {  this.showMessage(); // 调用实例方法  }  
});

Vue 组件中的 this

在 Vue 组件中,this 同样指向组件实例。你可以在组件的 methodscomputedwatchmounted 等选项中使用 this

Vue.component('my-component', {  data: function() {  return {  localMessage: 'Hello from component!'  };  },  methods: {  showLocalMessage: function() {  console.log(this.localMessage); // 这里的 this 指向组件实例  }  },  mounted: function() {  this.showLocalMessage(); // 调用组件方法  }  
});

箭头函数中的 this

在 Vue 中使用箭头函数时,this 的行为会有所不同。箭头函数不会创建它自己的 this 上下文,因此 this 在箭头函数中指向的是定义时所在的上下文。如果你在 Vue 的方法中使用了箭头函数,那么 this 将不会指向 Vue 实例,而是指向定义该箭头函数时的上下文。

new Vue({  el: '#app',  data: {  message: 'Hello Vue!'  },  methods: {  showMessage: () => {  console.log(this.message); // 这里的 this 不指向 Vue 实例,而是指向定义时的上下文,可能会导致错误  }  },  created: function() {  this.showMessage(); // 调用实例方法  }  
});

在上面的例子中,showMessage 方法是一个箭头函数,因此 this 在 showMessage 中不会指向 Vue 实例。这通常不是 Vue 中推荐的做法,因为它可能导致混淆和难以调试的错误。


在 Vue 实例的方法中定义一个普通函数时,这个函数的 this 上下文确实会被绑定到 Vue 实例上。这是因为 Vue 在创建实例时会自动绑定方法中的 this。所以,在 Vue 的方法中使用普通函数时,this 会指向 Vue 实例,而不是全局对象(在浏览器中是 window)。

new Vue({  el: '#app',  data: function() {  return {  message: 'Hello Vue!'  };  },  methods: {  showMessage: function() {  console.log(this.message); // 这里的 this 指向 Vue 实例  }  },  created: function() {  setTimeout(this.showMessage, 1000); // 这里的 this 仍然指向 Vue 实例  }  
});

在这个例子中,即使 showMessage 方法是作为 setTimeout 的回调函数传递的,this 仍然指向 Vue 实例,因为 Vue 在创建实例时已经确保了方法的 this 上下文。

然而,如果您在 Vue 实例的方法之外定义了一个函数,并且这个函数被用作回调函数或其他情况,那么您需要确保 this 的正确上下文。在这种情况下,您可以使用箭头函数来捕获 Vue 实例的 this 上下文,因为箭头函数不会创建自己的 this 上下文。

例如:

new Vue({  el: '#app',  data: function() {  return {  message: 'Hello Vue!'  };  },  methods: {  startTimer: function() {  let vm = this; // 保存 Vue 实例的引用  setInterval(() => { // 使用箭头函数  console.log(vm.message); // 通过保存的引用来访问 message  }, 1000);  }  },  created: function() {  this.startTimer();  }  
});

在这个例子中,我们使用了一个箭头函数作为 setInterval 的回调函数。由于箭头函数不绑定自己的 this,它会继承包围它的函数的 this 上下文,即 Vue 实例。因此,我们不需要在 startTimer 方法中创建一个额外的变量来保存 this 的引用,可以直接通过 this.message 来访问数据属性。

总结来说,在 Vue 实例的方法中直接使用普通函数时,this 会正确指向 Vue 实例。但是,当您需要将函数作为回调函数或其他情况使用时,可能需要使用箭头函数来确保 this 的正确上下文。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/694416.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

盘点 Udemy 上最受欢迎的免费编程课程

之前给大家推荐过一些油管上的免费学习资源,如果您还没有看过的话可以点击这里前往。 今天再给大家推荐一批Udemy上超高质量并且免费的编程课程,有需要的小伙伴可以学起来了。 1. JavaScript Essentials 第一门免费课程是:JavaScript Essen…

h5网页和 Android APP联调,webview嵌入网页,网页中window.open打开新页面,网页只在webview中打开,没有重开一个app窗口

我是h5网页开发,客户app通过webview嵌入我的页面 点击标题window.open跳转到长图页面,客户的需求是在app里新开一个窗口展示长图页面,window.open打开,ios端是符合客户需求的,但是在安卓端他会在当前webview打开 这…

IDEA实现ssh远程连接本地Linux服务器

文章目录 1. 检查Linux SSH服务2. 本地连接测试3. Linux 安装Cpolar4. 创建远程连接公网地址5. 公网远程连接测试6. 固定连接公网地址7. 固定地址连接测试 本文主要介绍如何在IDEA中设置远程连接服务器开发环境,并结合Cpolar内网穿透工具实现无公网远程连接&#xf…

Unity3d Shader篇(七)— 纹理采样

文章目录 前言一、什么是纹理采样?1. 纹理采样的工作原理2. 纹理采样的优缺点优点缺点 二、使用步骤1. Shader 属性定义2. SubShader 设置3. 渲染 Pass4. 定义结构体和顶点着色器函数5. 片元着色器函数 三、效果四、总结使用场景 前言 纹理采样是一种常用的图形学技…

打造智能物品租赁平台:Java与SpringBoot的实践

✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 |…

力扣:869. 重新排序得到 2 的幂

枚举和回溯 1.先把int值转换成char数组,之后再用回溯来枚举出全部的排列顺序,在回溯排列过程中要防止同一个数据的重新使用,同时要计算排列中的数字总和,在进行判断这个数据是否是2的幂,使用递归的方式进行&#xff0…

SparkSQL学习01

目录 1.SparkSQL特点1.1易整合1.2统一的数据访问1.3兼容Hive1.4标准的数据连接 2 SparkSQL编程模型DataFrameDataSet2.1 SQL2.2 DataFrame是什么2.3 DataSet是什么2.4 RDD,DataSet,DataFrame 3 SparkSQL核心编程3.1 编程入口3.2 SparkSQL基本编程3.2.1编…

掌握web控件定位技巧,提升页面操作效率!

简介 在做 Web 自动化时,最根本的就是操作页面上的元素,首先要能找到这些元素,然后才能操作这些元素。工具或代码无法像测试人员一样用肉眼来分辨页面上的元素。那么要如何定位到这些元素,本章会介绍各种定位元素的方法。 web 控…

15. 三数之和 - 力扣(LeetCode)

题目描述 给你一个整数数组 nums ,判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ,同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意:答案中不可以包含重复的三元组…

用Python编写计算字母或数字个数的程序

小编简单写了一个实现计算字母数字的程序 实例代码: str_n input("输入一段文本:") int_n 0 zimu_n 0 qita_n 0for i in str_n:if i.isdigit():int_n 1elif i.isalpha():zimu_n 1else:qita_n 1 # 其他字符(包括空格、标点…

人脸比对-欧氏距离

欧氏距离人脸比对 欧氏距离判断是否同一人脸 embedding_reshape np.array(face.embedding).reshape((1, -1)) face.embedding_normalize preprocessing.normalize(embedding_reshape) # 欧式距离 diffnp.subtract( self.fixed_face.embedding_normalize,face.embedding_nor…

P9063 [yLOI2023] 分解只因数

题目描述 给定一个正整数 n,对 n 分解质因数。 设 np1​p2​p3​⋯px​,其中 pi​ 均为质数。 如果 pi​ 均为奇数,则称 n 为『只因数』。 现在,给出若干个 n,请你判断 n 是不是『只因数』。 输入格式 本题单测试…

Ant Design Pro 快速入门

文章目录 为什么要学习 Ant Design Pro视频教程未来规划 为什么要学习 Ant Design Pro Ant Design Pro 作为阿里巴巴开源的前端优秀项目,开箱即用,从技术新颖程度和架构设计,都非常值得学习。 作为后端为主要技术栈的同学,越好上…

【前端】前端三要素之DOM

写在前面:本文仅包含DOM内容,JavaScript传送门在这里,BOM传送门在这里。 本文内容是假期中刷的黑马Pink老师视频(十分感谢Pink老师),原文保存在个人的GitLab中,如果需要写的网页内容信息等可以评…

ORA-600 kclchkblk_4和2662故障---惜分飞

有客户恢复请求:由于未知原因导致aix环境的rac两台主机同时重启之后数据库无法正常启动,初步判断是由于写丢失导致故障(ORA-00742 ORA-00353) Wed Feb 21 09:23:06 2024 ALTER DATABASE OPEN This instance was first to open Abort recovery for domain…

vue3 + ts + echart 实现柱形图表

首先封装Echart一个文件 代码如下 <script setup lang"ts"> import { ECharts, EChartsOption, init } from echarts; import { ref, watch, onMounted, onBeforeUnmount } from vue;// 定义props interface Props {width?: string;height?: string;optio…

pclpy 窗口可视化多个点云

pclpy 窗口可视化多个点云 一、算法原理二、代码三、结果1.可视化结果 四、相关数据五、问题与解决方案1.问题2.解决 一、算法原理 原理看一下代码写的很仔细的。。目前在同一个窗口最多可视化两个点云。。 二、代码 from pclpy import pcldef CloudShow(cloud1, cloud2):&q…

04 动力云客之登录后获取用户信息+JWT存进Redis+Filter验证Token + token续期

1. 登录后获取用户信息 非常好实现. 只要新建一个controller, 并调用SS提供的Authentication对象即可 package com.sunsplanter.controller;RestController public class UserController {GetMapping(value "api/login/info")public R loginInfo(Authentication a…

C++ 基础算法 双指针 数组元素的目标和

给定两个升序排序的有序数组 A 和 B &#xff0c;以及一个目标值 x 。 数组下标从 0 开始。 请你求出满足 A[i]B[j]x 的数对 (i,j) 。 数据保证有唯一解。 输入格式 第一行包含三个整数 n,m,x &#xff0c;分别表示 A 的长度&#xff0c;B 的长度以及目标值 x 。 第二行包…

使用静态CRLSP配置MPLS TE隧道

正文共&#xff1a;1591 字 13 图&#xff0c;预估阅读时间&#xff1a;4 分钟 静态CRLSP&#xff08;Constraint-based Routed Label Switched Paths&#xff0c;基于约束路由的LSP&#xff09;是指在报文经过的每一跳设备上&#xff08;包括Ingress、Transit和Egress&#xf…