Javascript归纳与总结——this指向及其改变、new关键字与原型链、异步、闭包和函数防抖与节流

本文主要是介绍Javascript归纳与总结——this指向及其改变、new关键字与原型链、异步、闭包和函数防抖与节流,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

this指向及其改变

普通函数在调用时,this为obj.obj1.fun(),this->obj1,箭头函数在声明定义时this->obj。

Javascript中bind、call、apply區別-CSDN博客

new关键字与原型链

 从原型链视角解读VueComponent与Vue关系_vue中重要的原型链关系-CSDN博客

prototype这个属性只有函数对象才有!(构造)函数的原型对象

_proto_所以对象都有此属性,总之想对应(构造)函数的原型对象

 

异步 

Promise其实也不难-CSDN博客

async与await

在JavaScript中,async 和 await 关键字是处理异步操作的重要工具,它们让异步代码看起来和写起来更像是同步代码。async 函数是返回一个Promise对象的函数,而await关键字则用于等待Promise解决(resolve)或拒绝(reject),并暂停async函数的执行,直到Promise处理完成。

async 函数

一个async函数会自动将它的返回值封装在一个Promise中。如果函数执行正常结束(即没有遇到return语句或异常),它返回的Promise会被解决(resolve),其解决的值是undefined。如果函数通过return语句返回了一个值,这个值会被封装在一个被解决的Promise中。如果函数抛出了一个异常,返回的Promise会被拒绝(reject),异常值会被用作拒绝的原因。

await 关键字

await关键字只能在async函数内部使用。当await一个Promise时,async函数会暂停执行,直到Promise解决(resolve)或拒绝(reject),然后函数继续执行,并返回解决的值或抛出拒绝的原因。

经典示例

假设我们有两个异步操作:fetchData1() 和 fetchData2(),它们都返回Promise。我们想要先执行fetchData1(),并在其完成后执行fetchData2()。使用asyncawait,我们可以这样写:

async function fetchDataSequentially() {  console.log('开始执行 fetchData1');  const data1 = await fetchData1(); // 等待 fetchData1 完成  console.log('fetchData1 完成,数据:', data1);  console.log('开始执行 fetchData2');  const data2 = await fetchData2(); // 等待 fetchData2 完成  console.log('fetchData2 完成,数据:', data2);  
}  // 假设的异步函数,返回Promise  
function fetchData1() {  return new Promise((resolve) => {  setTimeout(() => {  resolve('数据1');  }, 1000); // 假设这个操作需要1秒  });  
}  function fetchData2() {  return new Promise((resolve) => {  setTimeout(() => {  resolve('数据2');  }, 500); // 假设这个操作需要0.5秒  });  
}  // 调用函数  
fetchDataSequentially();  // 控制台输出将会是:  
// 开始执行 fetchData1  
// fetchData1 完成,数据: 数据1  
// 开始执行 fetchData2  
// fetchData2 完成,数据: 数据2

在这个例子中,fetchDataSequentially 函数首先打印出“开始执行 fetchData1”,然后等待fetchData1()返回的Promise解决,并打印出解决的值。接着,它打印出“开始执行 fetchData2”,并等待fetchData2()返回的Promise解决,最后打印出fetchData2()的解决值。

闭包

闭包的定义

简单来说,闭包就是能够访问另一个函数作用域中变量的函数。这通常发生在一个函数内部创建另一个函数时,内部函数可以访问外部函数作用域中的变量

闭包的创建

闭包在以下情况中自然产生:

  1. 函数嵌套函数:当内部函数引用了外部函数的变量时,就创建了一个闭包。
  2. 函数作为返回值一个函数返回了另一个函数,而返回的函数又引用了外部函数的变量
  3. 函数作为参数传递:一个函数接收了另一个函数作为参数,而接收的函数又引用了外部作用域的变量。

闭包的用途

  1. 数据封装和私有变量:通过闭包,我们可以创建私有变量,这些变量只能通过特定的函数访问和修改。
  2. 创建模块:闭包可以用来模拟私有方法和变量,实现模块化的JavaScript代码。
  3. 函数工厂:创建并返回特定功能的函数,这些函数可以访问和修改闭包中的变量。
  4. 记忆功能:闭包可以记住并访问其词法作用域,即使该函数是在其作用域之外执行。

示例

function createCounter() {  let count = 0; // 私有变量  return function() { // 闭包  count = count + 1; // 访问并修改外部函数的变量  return count;  };  
}  const counter = createCounter();  
console.log(counter()); // 输出: 1  
console.log(counter()); // 输出: 2

函数防抖与节流

防抖:用户已知触发莫格函数,触发的事件间隔如果小于设定的事件间隔,则只执行依次

节流:在设定之间间隔内只执行依次

函数防抖(Debounce)与节流(Throttle)是前端开发中常用的两种优化技术,用于限制函数的执行频率,以提高页面性能和用户体验。下面将分别对这两种技术进行详细解析。

一、函数防抖(Debounce)

概念
函数防抖是指在事件被连续频繁触发时,只有最后一次触发的事件才会被执行处理函数,如果在指定的时间间隔内再次触发事件,则重新计算时间间隔。简单来说,就是“等一等再执行”,确保函数在事件停止触发后才执行。

应用场景

  • 搜索框实时搜索:用户输入文字时,不需要每输入一个字符就发送请求,而是等用户停止输入后再发送请求。
  • 窗口大小调整(resize):只在窗口大小调整完成后执行一次函数,而不是在调整过程中频繁执行。
  • 表单验证:在用户停止输入后,再对表单进行验证。

实现原理
函数防抖通常通过setTimeout来实现,设置一个定时器,在事件触发时清除之前的定时器并重新设置,确保只有在最后一次触发后指定的时间间隔内没有再次触发事件时,才执行函数。

示例代码

function debounce(fn, delay) {  let timer = null;  return function() {  if (timer) clearTimeout(timer);  timer = setTimeout(() => {  fn.apply(this, arguments);  }, delay);  };  
}  // 使用示例  
window.onresize = debounce(function() {  console.log('窗口大小已调整');  
}, 500);-------------------------------axios+防抖---------------------------
// 防抖函数  
function debounce(fn, delay) {  let timer = null;  return function (...args) {  if (timer) clearTimeout(timer);  timer = setTimeout(() => {  fn.apply(this, args);  }, delay);  };  
}  // 假设的Axios请求函数  
function fetchData() {  axios.get('https://api.example.com/data')  .then(response => {  console.log(response.data);  })  .catch(error => {  console.error('Error fetching data:', error);  });  
}  // 创建一个防抖的fetchData  
const debouncedFetchData = debounce(fetchData, 500);  // 绑定到某个事件,比如按钮点击  
document.getElementById('myButton').addEventListener('click', debouncedFetchData);

二、函数节流(Throttle)

概念
函数节流是指在一定时间内,无论事件被触发多少次,函数只会被执行一次。它确保函数在指定的时间间隔内只执行一次,而不是在每次事件触发时都执行。简单来说,就是“按时间间隔执行”,确保函数不会过于频繁地被调用。

应用场景

  • 滚动事件(scroll):在滚动过程中,不需要每次滚动都执行函数,而是每隔一定时间执行一次。
  • 拖拽操作(mousemove):在拖拽过程中,限制函数的执行频率,避免性能问题。
  • 射击游戏:限制子弹的发射频率,避免过快射击。

实现原理
函数节流可以通过setTimeoutrequestAnimationFrame来实现,也可以通过时间戳来判断是否达到指定的时间间隔。

示例代码(使用setTimeout)

function throttle(fn, delay) {  let lastTime = 0;  return function() {  const now = Date.now();  if (now - lastTime >= delay) {  fn.apply(this, arguments);  lastTime = now;  }  };  
}  // 使用示例  
window.onscroll = throttle(function() {  console.log('滚动事件被触发');  
}, 1000);------------------axios+节流-----------------
// 节流函数  
function throttle(fn, limit) {  let lastFunc;  let lastRan;  return function (...args) {  const context = this;  if (!lastRan) {  fn.apply(context, args);  lastRan = Date.now();  } else {  clearTimeout(lastFunc);  lastFunc = setTimeout(function () {  if ((Date.now() - lastRan) >= limit) {  fn.apply(context, args);  lastRan = Date.now();  }  }, limit - (Date.now() - lastRan));  }  };  
}  // 假设的Axios请求函数(同上)  
function fetchData() {  // ...  
}  // 创建一个节流的fetchData  
const throttledFetchData = throttle(fetchData, 1000);  // 绑定到某个事件,比如滚动事件  
window.addEventListener('scroll', throttledFetchData);

这篇关于Javascript归纳与总结——this指向及其改变、new关键字与原型链、异步、闭包和函数防抖与节流的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1126567

相关文章

springboot自定义注解RateLimiter限流注解技术文档详解

《springboot自定义注解RateLimiter限流注解技术文档详解》文章介绍了限流技术的概念、作用及实现方式,通过SpringAOP拦截方法、缓存存储计数器,结合注解、枚举、异常类等核心组件,... 目录什么是限流系统架构核心组件详解1. 限流注解 (@RateLimiter)2. 限流类型枚举 (

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原

Spring AI使用tool Calling和MCP的示例详解

《SpringAI使用toolCalling和MCP的示例详解》SpringAI1.0.0.M6引入ToolCalling与MCP协议,提升AI与工具交互的扩展性与标准化,支持信息检索、行动执行等... 目录深入探索 Spring AI聊天接口示例Function CallingMCPSTDIOSSE结束语

Java获取当前时间String类型和Date类型方式

《Java获取当前时间String类型和Date类型方式》:本文主要介绍Java获取当前时间String类型和Date类型方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录Java获取当前时间String和Date类型String类型和Date类型输出结果总结Java获取

Spring Boot Actuator应用监控与管理的详细步骤

《SpringBootActuator应用监控与管理的详细步骤》SpringBootActuator是SpringBoot的监控工具,提供健康检查、性能指标、日志管理等核心功能,支持自定义和扩展端... 目录一、 Spring Boot Actuator 概述二、 集成 Spring Boot Actuat

OpenCV在Java中的完整集成指南分享

《OpenCV在Java中的完整集成指南分享》本文详解了在Java中集成OpenCV的方法,涵盖jar包导入、dll配置、JNI路径设置及跨平台兼容性处理,提供了图像处理、特征检测、实时视频分析等应用... 目录1. OpenCV简介与应用领域1.1 OpenCV的诞生与发展1.2 OpenCV的应用领域2

在Java中使用OpenCV实践

《在Java中使用OpenCV实践》用户分享了在Java项目中集成OpenCV4.10.0的实践经验,涵盖库简介、Windows安装、依赖配置及灰度图测试,强调其在图像处理领域的多功能性,并计划后续探... 目录前言一 、OpenCV1.简介2.下载与安装3.目录说明二、在Java项目中使用三 、测试1.测

Spring Bean初始化及@PostConstruc执行顺序示例详解

《SpringBean初始化及@PostConstruc执行顺序示例详解》本文给大家介绍SpringBean初始化及@PostConstruc执行顺序,本文通过实例代码给大家介绍的非常详细,对大家的... 目录1. Bean初始化执行顺序2. 成员变量初始化顺序2.1 普通Java类(非Spring环境)(

Spring Boot 中的默认异常处理机制及执行流程

《SpringBoot中的默认异常处理机制及执行流程》SpringBoot内置BasicErrorController,自动处理异常并生成HTML/JSON响应,支持自定义错误路径、配置及扩展,如... 目录Spring Boot 异常处理机制详解默认错误页面功能自动异常转换机制错误属性配置选项默认错误处理

java如何实现高并发场景下三级缓存的数据一致性

《java如何实现高并发场景下三级缓存的数据一致性》这篇文章主要为大家详细介绍了java如何实现高并发场景下三级缓存的数据一致性,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 下面代码是一个使用Java和Redisson实现的三级缓存服务,主要功能包括:1.缓存结构:本地缓存:使