#JavaScript(进阶完结)

已于 2023-09-23 17:14:58 修改
阅读量86 收藏 1
点赞数
文章标签： javascript 前端 开发语言
于 2023-09-23 16:48:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79501633/article/details/133206648
版权

目录

一，深浅拷贝(重点）

1.1原理

1.2，Lodash实现

1.3，JSON.stringify  JSON.parse实现

二，抛出异常

2.1，throw抛异常

2.2，try/catch捕获错误信息

2.3，finally

2.4，debbuger【关键字】(打断点)

三，this的指向

3.1，普通函数，谁调用我 this就指向谁

3.2，箭头函数 this 指向最近作用域中的this

四，处理this的指向

4.1，call()    *

4.2，apply()   ***

4.3，bind()   *******

五，防抖

六，节流

一，深浅拷贝(重点）

1.1原理

1.2，Lodash实现

_.cloneDeep(obj)

1.3，JSON.stringify  JSON.parse实现

二，抛出异常

2.1，throw抛异常

会中断执行

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function fn(x, y) {
      if (!x || !y) {
        throw new Error('none arguments delivered')
      }
      return x + y
    }
    console.log(fn());
  </script>
</body>

</html>

2.2，try/catch捕获错误信息

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>123</p>
  <script>
    function fn() {
      //可能发生的代码放在try里
      try {
        const p = document.querySelector('.p')
        p.style.color = 'red'
      } catch (err) {
        //拦截错误 提示浏览器提供的错误信息，但是不中断程序的执行
        console.log(err.message);
        //需要return中断程序
        return
      }

      console.log(11);
    }
    fn()
  </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>123</p>
  <script>
    function fn() {
      //可能发生的代码放在try里
      try {
        const p = document.querySelector('.p')
        p.style.color = 'red'
      } catch (err) {
        //拦截错误 提示浏览器提供的错误信息，但是不中断程序的执行
        console.log(err.message);
        throw new Error('傻逼你写错了')
        //需要return中断程序
        // return
      }

      console.log(11);
    }
    fn()
  </script>
</body>

</html>

2.3，finally

不管代码有没有错误都执行

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>123</p>
  <script>
    function fn() {
      //可能发生的代码放在try里
      try {
        const p = document.querySelector('.p')
        p.style.color = 'red'
      } catch (err) {
        //拦截错误 提示浏览器提供的错误信息，但是不中断程序的执行
        console.log(err.message);
        throw new Error('傻逼你写错了')
        //需要return中断程序
        // return
      }
      finally{
        //不管代码对不对 代码都执行
        console.log(111);
      }

      console.log(11);
    }
    fn()
  </script>
</body>

</html>

2.4，debbuger【关键字】(打断点)

三，this的指向

3.1，普通函数，谁调用我 this就指向谁

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击</button>
  <script>

    //普通函数谁调用我 我就指向谁
    console.log(this);
    function fn() {
      console.log(this);
    }

    window.fn()
    window.setInterval(function () {
      console.log(this);
    }, 1000)

    document.querySelector('button').addEventListener(function(){
      console.log(this); //指向button
    })

    const obj = {
      sayHi:function(){
        console.log(this);  //指向obj
      }
    }
  </script>
</body>

</html>

3.2，箭头函数 this 指向最近作用域中的this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const user = {
      name:'xxx',
      age:18,
      walk:() =>{
        console.log(this);
      }
    }
  </script>
</body>
</html>

四，处理this的指向

4.1，call()    *

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const obj = {
      uname:'H',

    }
    function fn(x,y){
      console.log(this
      );

    }
    //调用函数
    //改变this指向
    fn.call(obj,1,2)
  </script>
</body>
</html>

4.2，apply()   ***

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>

    const obj = {
      age: 18
    }
    function fn(x, y) {
      console.log(this);  //指向 Obj
      console.log(x + y);
    }

    //调用函数 
    //改变this指向    apply第二个参数是数组
    fn.apply(obj, [1, 2])
    //返回值 -->就是函数的返回值
    //因为apply本身就是在调用函数
    //使用场景    求数组最大值
    //apply有两个参数 一this指向谁  二参数
    const arr = [1, 2, 3, 8, 9, 4]
    const max = Math.max.apply(Math, arr)
    console.log(max);
    const min = Math.min.apply(Math, arr)
    console.log(min);

    
    console.log(Math.max(...arr));
    console.log(Math.min(...arr));
  </script>
</body>

</html>

4.3，bind()   *******

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    //bind不会调用函数去改变this指向
    const obj = {
      age: 85
    }
    function fn() {
      console.log(this);
    }

    //能改变this 的指向   拷贝经过更改  返回值是函数
    const fun = fn.bind(obj)
    console.log(fun);

    fun()  //指向函数  函数内This指向85
  </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击</button>
  <script>
    //bind不会调用函数去改变this指向
    const obj = {
      age: 85
    }
    function fn() {
      console.log(this);
    }

    //能改变this 的指向   拷贝经过更改  返回值是函数
    const fun = fn.bind(obj)
    console.log(fun);

    fun()  //指向函数  函数内This指向85

    //案例  Bind的妙用
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      //禁用按钮
      this.disabled = true
      window.setTimeout(function () {
        // 在普通函数里面由原来的window改为btn
        this.disabled = false
      }.bind(this), 2000)   //用bind()改变this指向
    })
  </script>
</body>

</html>

五，防抖

相当于回城时被打断 回城重新开始

https://www.lodashjs.com/docs/lodash.debounce#_debouncefunc-wait0-options

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box"></div>
  <script>
    
    //手搓防抖函数
    //核心seTimeout
    //每次事件触发的时候 先判断是否有定时器 如果有先清除以前的定时器
    //如果没有定时器，则开启定时器，存入到定时器变量里面
    //定时器里面写函数调用
    function debounce(fn,t){
      let timer
      //return返回一个匿名函数
      return function(){
        if(timer) clearTimeout(timer)
        setTimeout(function(){
          fn()
        },t)
      }

      box.addEventListener('mousemove',debounce(mouseMove,500))
      // debounce(mouseMove, 500)
      // debounce(mouseMove,500) =  function () { }
    }
  </script>
</body>
</html>

六，节流

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function throttle(fn,t){
      let timer = null
      if(!timer){
        timer = setTimeout(function(){
          fn()
          //清空定时器
          timer = null
        })
      }
    }
    box.addEventListener('mousemove', throttle(mouseMove, 500))
  </script>
</body>
</html>

总结 

目录

一，深浅拷贝(重点）

1.1原理

1.2，Lodash实现

1.3，JSON.stringify  JSON.parse实现

二，抛出异常

2.1，throw抛异常

2.2，try/catch捕获错误信息

2.3，finally

2.4，debbuger【关键字】(打断点)

三，this的指向

3.1，普通函数，谁调用我 this就指向谁

3.2，箭头函数 this 指向最近作用域中的this

四，处理this的指向

4.1，call()    *

4.2，apply()   ***

4.3，bind()   *******

五，防抖

六，节流

ChipSsssssss
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javascript进阶版纯手写课件
04-09
### JavaScript进阶知识点详解 #### 1. 函数防抖与节流 在JavaScript中，函数防抖（debounce）和节流（throttle）是两种常见的性能优化手段，主要应用于处理高频触发的事件。 **防抖**技术是通过设置一个延时器，...
Javascript 面向对象的JavaScript进阶
08-13
### JavaScript面向对象进阶知识点详解 #### 8.1 面向对象编程的基本特性 在探讨面向对象的JavaScript之前，我们首先需要了解面向对象编程（Object-Oriented Programming, OOP）的基本特性：封装性、抽象性、继承...
javascript进阶
u012536120的博客
08-13 526
【背景】 工作是用VS，感觉太笨重，随便安装下就10G+，后来接触了JS，python这些只用几M的解释型语言，就很喜欢。 后来看过很多JS的教程，包括w3cschool的教程、JS权威指南、JS语言精粹...... 写得不好，感觉没有说到点子上（仅代表个人感受） 最近看了《JavaScript启示录》英文版的。跟我们平常看的语法书思考角度不同，有一些【进阶】意义，所以就想把里面的一些东西...
JavaScript进阶部分知识总结
guai_guai_guai的博客
04-22 984
局部作用域分为函数作用域和块作用域。
Javascript进阶内容
triggerV的博客
04-08 967
JavaScript的一些进阶内容：作用域、函数进阶、解构赋值、深入对象、内置构造函数、深入面向对象、深浅拷贝、异常处理、处理this、防抖节流
JavaScript 进阶
lsp54188的博客
04-24 1336
学习作用域、变量提升、闭包等语言特征，加深对 JavaScript 的理解，掌握变量赋值、函数声明的简洁语法，降低代码的冗余度。
JavaScript进阶：如何写出优雅的JavaScript代码
热门推荐
学Java，找哪吒
04-05 1万+
目录一、可维护性代码二、编码规范-可读性三、变量和函数命名四、松散耦合1、解耦HTML和JavaScript2、解耦CSS和JavaScript3、解耦应用程序逻辑和事件处理程序五、编码惯例六、作用域意识1、避免全局查找2、不适用with语句七、优化循环1、简化终止条件2、简化循环体3、使用后测试循环4、展开循环八、语句最少化1、多个变量声明2、插入迭代性值3、使用数组和对象字面量九、优化DOM交互1、实时更新最小化2、使用innerHTML3、使用委托事件4、注意HTMLCollection 一、可维护性
JavaScript 进阶问题列表，包含完整答案
05-10
《JavaScript进阶问题列表》是一份全面覆盖JavaScript高级知识点的问题集合，旨在帮助开发者深入理解JavaScript语言的各个方面，并掌握进阶技巧。每个问题都提供了详细的答案和解析，涵盖了JavaScript的高级特性、...
JavaScript进阶面试题_30题.pdf_前端面试题
09-01
JavaScript进阶面试题_30题.pdf_前端面试题 从这份文件中，我们可以总结出以下的知识点： 1. ECMAScript6 中的类语法糖：ECMAScript6 中引入了类语法糖，这使得有 OOP 基础的人更容易上手 JavaScript。虽然对熟悉 ...
JavaScript进阶基础-3
12-20
【JavaScript进阶基础-3】 在JavaScript中，进阶基础涉及到很多重要的概念，尤其是面向对象、前后端交互、Cookie以及JSONP。以下是对这些概念的详细解析： **面向对象基础** 面向对象是一种编程范式，它关注的是...
JavaScript代码片段
weixin_66128399的博客
08-26 1764
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 1033
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 528
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 7640
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
jQuery基础——DOM
m0_54066656的博客
08-27 1558
JQ基础——DOM操作
【项目】云备份系统笔记
m0_73713491的博客
08-27 958
就包含一个类，config，是读取配置文件的类，因为配置文件只有一份，所以可以采用单例模式，把config类的构造函数私有化，只能通过一个公共成员函数getinstance（）来创建对象（new config（）），在类的内部可以调用私有化构造函数，构造函数里面再调用读取配置文件的函数，用自己实现的工具类读取配置文件，将读到的内容放到一个字符串中，然后再将字符串用Json进行序列化，然后给类中的成员变量进行赋值，类中的成员变量就包含了cloud.conf里面包含的信息，一一对应。
vue ref和reactive区别
灰海
08-25 3431
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 528
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
JavaWeb——前端工程化
m0_50460160的博客
08-30 362
通过解构赋值，可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性;ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。该语句将数组 [1,2,3]中的第一个值赋值给a变量，第二个值赋值给b变量，第三个值赋值给c变量。ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序;并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动;
深入理解JavaScript进阶：Ajax、JSON与Prototype
总结来说，JavaScript进阶学习中，Ajax通过异步通信提升页面交互性，XMLHttpRequest是其实现的核心；JSON提供了数据交换的便捷格式；而Prototype库则为开发者提供了丰富的工具来更高效地构建复杂的前端应用。理解并...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值