JS高级-函数this三种指向,函数上下文调用,闭包,递归 深浅拷贝

已于 2023-04-18 14:57:30 修改
阅读量2k 收藏 17
点赞数 6
分类专栏： javascript进阶高级 文章标签： javascript 开发语言 ecmascript
于 2022-05-02 20:17:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68531033/article/details/124537390
版权

函数this的三种指向

01函数this的三种指向

1.环境对象 this : 谁调用我，this指向谁

            this相当于中文中的'我'

        2.this指向取决于函数的调用，函数调用有三种方式    

           (1) 普通函数；  函数名()  this->window

           (2)对象方法:    对象名.方法名  this->对象

           (3) 构造函数；  new 函数名() this-> new创建的实例对象

             一句话总结,this指向三选一   没点没new是window, 有new是实例,有点是点左边的对象

 <script>
        /* 
        1.环境对象 this : 谁调用我，this指向谁
            this相当于中文中的'我'
        2.this指向取决于函数的调用，函数调用有三种方式    
            普通函数；  函数名()  this-window
            对象方法:    对象名.方法名  this-对象
            构造函数；  new 函数名() this-new创建的实例对象
             一句话总结,this指向三选一  
        */
       function fn(){
          console.log(this);
       }
// (1)普通函数
fn() //this -window

// 
// (2)构造函数
 new fn() //this -new创建的实例对象
let obj={
    name:'张三',
    eat:fn
}
 // (3)对象方法
 obj.eat() //this-对象 
    </script>

02this指向测试

 <script>
        /* 
        环境对象 this : 
            普通函数；  
            对象方法:   
            构造函数； 
               
        */

      //作用域链
      let obj = {
        name: "张三",
        eat: function() {
          console.log(this)
          function fn() {
            console.log(this) 
          }
          fn()
        }
      }

      let eat = obj.eat
      obj.eat()
    </script>


02函数的上下文调用

01-call()调用函数

上下文调用 : 修改函数内部的this

1 函数名.call ({修改后的this指向},形参1,形参2…………)

   <script>
        /* 
        1.环境对象 this : 谁调用指向谁
            普通函数；函数名()  this-window
            对象方法:  对象名.方法名() this-对象
            构造函数；  new 函数名() this-new构造的实例对象
   *** 默认情况下,函数内的this是固定的,无法被修改
   *** 如果想要动态修改函数内部的this指向,啧需要使用上下文调用方法
     * 上下文调用 :函数作用域 上下文指向 修改函数作用域内部this指向

        2.上下文调用 : 
            2.1 函数名.call() call(修改的this,参数1,参数2)
            2.2 函数名.apply()
            2.3 函数名.bind()

        3. 面试必问:  call 和 apply 和 bind三者区别
        */
 function fn(a,b){
      console.log(this);
      console.log(a+b);
 }
    //  函数名.call(修改的this,参数1,参数2)
    fn.call({name:'张三'},10,20)  

    </script>

 call场景-伪数组转真数组

  //值类型

        // 字符串 数字 布尔 undefined null

  //引用类型      

        // 数组  函数  对象

        函数名.call() 应用:万能数据类型检测 
        
        1.typeof 数据:检测数据类型,但是有两种数据类型无法检测
         *typeof无法检测 数组和null两种数据类型得到的都是 object
        2.万能数据类型检测 :Object.prototype.toString.call(数据)
        加call的原因是 Object.prototype.toString 检测的是它自身的数据类型 

   <script>
        /* 函数名.call() 应用:万能数据类型检测 */
        
        /*  
        1.typeof 数据:检测数据类型,但是有两种数据类型无法检测
         *typeof无法检测 数组和null两种数据类型得到的都是 object
        2.万能数据类型检测 :Object.prototype.toString.call(数据)
        加call的原因是 Object.prototype.toString 检测的是它自身的数据类型
        */
  //值类型
        // 字符串 数字 布尔 undefined null
        let str='abc'
        let num=123
        let bol=true
        let und=undefined
        let nul=null

  //引用类型      
        // 数组  函数  对象 
        let arr=[1,2,3]
        let fn=function(){}
        let boj={name:'张三'}

        // 万能检测:
        console.log(Object.prototype.toString.call(str));  // [object String]
        console.log(Object.prototype.toString.call(num));  // [object Number]
        console.log(Object.prototype.toString.call(bol));  // [object Boolean]
        console.log(Object.prototype.toString.call(und));  // [object Undefined]
        console.log(Object.prototype.toString.call(unl));  // [object Null]
        console.log(Object.prototype.toString.call(arr));  // [object Array]
        console.log(Object.prototype.toString.call(fn));  // [object Function]
        console.log(Object.prototype.toString.call(obj));  // [object Object]
         // （1）Object.prototype.toString()内部会返回this的固定类型，得到固定格式字符串‘[object  数据类型 ]’
        // （2）使用object原型中的toString()要想得到数据类型，只需要把this修改成你想要检测的对象
        </script>

 apply()调用函数

函数名.apply()  apply(修改的this,数组/伪数组)

apply会自动帮你遍历数组，然后按照顺序逐一传参

 <script>
      
 function fn(a,b){
      console.log(this);
      console.log(a+b);
 }
    // (1) 函数名.call(修改的this,参数1,参数2)
    fn.call({name:'张三'},10,20)  
    // (2)函数名.apply(修改的this,数组/伪数组)
// apply会自动遍历数组和伪数组 ,然后逐一传参
fn.apply({name:'李四'},[50,60])
    </script>

 apply场景 :伪数组转数组

 apply()场景 :伪数组转真数组

        伪数组: 有 数组三要素(下标,元素 ,长度),不能使用数组的方法

         *伪数组的本质是 对象

<script>
        /* 
        apply()场景 :伪数组转真数组
        伪数组: 有 数组三要素(下标,元素 ,长度),不能使用数组的方法
         *伪数组的本质是 对象
        */
       let obj={
           0:10,
           1:20,
           2:30
       }
       console.log(obj);
    //    需求 有时候伪数组 想要使用真数组的方法 就需要把伪数组转换成真数组
    // (1)把伪数组的元素取出,push到真数组中
    let arr=[]
    // arr.push(obj[0],obj[1],obj[2]) 
    // console.log(arr)
    // (2)手动写循环遍历添加
    // for (let i = 0; i < obj.length; i++) {
    //    arr.push(obj[i])
    // }
    // (3)arr.push.apply(arr,伪数组)
    // 这里使用apply不是为了修改this ,而是借助apply的传参特点: 自动遍历伪数组/数组传参 所以第一个参数应该写arr(保持this不变)
    arr.push.apply(arr,obj)
    console.log(arr);

    // ES6 伪数组转真数组,固定静态方法 Array.from(伪数组)
    let newArr=Array.from(obj)
    console.log( newArr);
    </script>

ES6 语法

伪数组转真数组,固定静态方法 Array.from(伪数组)

 let newArr=Array.from(obj)

    console.log( newArr);

apply场景02求数组最大值

 apply()场景 :求数组最大值

 <script>
        /*
        apply()场景 :求数组最大值
        */
       let arr=[4,845,65,8,99,24,3]
    //    (1)js基础 :擂台思想
    let max=arr[0]
    for (let i = 1; i < arr.length; i++) {
      if(arr[i] >max){
          max=arr[i]
      }
        
    }
    console.log(max);
    // (2)js高级  Math.max
let max1=Math.max.apply(Math,arr)
console.log(max1);
// ES6 :Math.max(...arr)
// 功能类似于apply,也会自动的把数组给遍历
let max2=Math.max(...arr)
console.log(max2);
    </script>

 bind()调用函数

 1.环境对象 this : 谁调用指向谁

            普通函数；函数名()  this-window

            对象方法:  对象名.方法名() this-对象

            构造函数；  new 函数名() this-new构造的实例对象

   *** 默认情况下,函数内的this是固定的,无法被修改

   *** 如果想要动态修改函数内部的this指向,则需要使用上下文调用方法

     * 上下文调用 :函数作用域 上下文指向 修改函数作用域内部this指向

        2.上下文调用 :

            2.1 函数名.call() call(修改的this,参数1,参数2)

            2.2 函数名.apply()  apply(修改的this,数组/伪数组)

            2.3 函数名.bind() 函数名.bind(修改的this)

             *bind 不会立即执行函数,而是得到修改的this的新函数

             *bind() 一般修改:定时器函数 ,事件处理函数

<script>
     
 function fn(a,b){
      console.log(this);
      console.log(a+b);
 }
    // (1) 函数名.call(修改的this,参数1,参数2)
    fn.call({name:'张三'},10,20)  
    // (2)函数名.apply(修改的this,数组/伪数组)
// apply会自动遍历数组和伪数组 ,然后逐一传参
fn.apply({name:'李四'},[50,60])
   //(3)函数名.bind(修改的this)
    //bind 不会立即执行函数,而是得到一个修改的this之后的新函数
    let newFn=fn.bind({name:'王五'})
    newFn(22,33)
    </script>

 bind场景-修改定时器this

/* bind()场景: 修改定时器的this */

        // 定时器中的this默认指向window,如果要修改定时器的this,就需要使用this

 <script>
        /* bind()场景: 修改定时器的this */
        // 定时器中的this默认指向window,如果要修改定时器的this,就需要使用this
        let fn= function (){
         console.log(this);
        }
        let newFn=fn.bind({name:'1111'})
        setTimeout(newFn,2000)
      // 上面代码可以简写一行
        // setTimeout(function(){}.bind(),2000)
        setTimeout(function(){
          console.log(this);
        }.bind({name:'李四'}),2000)
        /* 
        变量:是内存空间 只有存储功能,没有运算功能
        变量只有两种语法 :存 ,取
        字面量 :是数据 .只有运算功能,没有存储功能
        */
      //  let arr=[10,20,30]
      //  [10,20,30][0]

    </script>

 经典面试题 call apply bind区别

3. 面试必问:  call 和 apply 和 bind三者区别

   相同点 都可以修改this指向

   不同点

     (1)传参方式不同 call是单个传参,apply是数组/伪数组传参

     (2)执行机制不同 call和apply会立即执行函数,bind不会立即执行而是得到修改this的新函数    

03闭包

 1.闭包closure是什么 :  两个条件 a:函数 b:函数内部还要访问 其他函数的变量

        其他函数的变量不能是全局变量,也不能是自己的变量,必须是其他函数的

            (1)闭包是一个 访问其他函数内部变量 的函数

            (2) 闭包 =函数 + 上下文引用

           

        2.闭包作用 : 解决变量污染

 <script>
//num +fn1()组成了闭包
let age=20
function fn(){
let num=20
function fn1(){
  console.log(num);
  console.log(age);
}
fn1()
}
  fn()    
    </script>

闭包案例

<script>

 //  打事件断点 从函数体开始 点击事件类型
        // 点击
        document.querySelector('.btn').addEventListener('click',function(){
            // (1)获取输入框文本
            let text=document.querySelector('input').value
            // (2)模拟网络请求
            setTimeout(function(){
                alert(`${text}的搜索结果为123456`)
            },1000)
        })
</script>

04递归

1.递归函数: 一个函数 在内部 调用自己

* 递归作用和循环类似的,也需要有结束条件

 1.递归函数:  在函数中调用自己

        *递归类似于循环,也要有结束条件

 <script>
        /* 
        1.递归函数:  在函数中调用自己
        *递归类似于循环,也要有结束条件
            

        2.递归应用:
        
        */    
function fn(){
    console.log('hh');
    // 递归调用
    fn()
}
    // 双函数递归
    function fn1(){
        console.log('嘿嘿');
        fn2()

    }
    function fn2(){
        console.log('呵呵');
        fn1()
    }
    </script>

 02浅拷贝与深拷贝json实现

 1. 浅拷贝与深拷贝 有两种实现方式  

        浅拷贝:拷贝地址,修改拷贝后的数据对原数据  有影响

        深拷贝 :拷贝数据,修改拷贝后的数据对原数据  没有影响

        2.深拷贝两种方式

        (1)  json方式  let newObj=JSON.parse(JSON.stringify(js对象))

        */  

浅拷贝

浅拷贝 :拷贝地址

浅拷贝如果是一层对象,不互相影响,可以直接拷贝值

如果是复杂类型的拷贝 ,出现多层拷贝会相互影响

<script>

 
        let obj = {
            name:'张三',
            age:20,
            sex:'男',
            hobby:['吃饭','睡觉','学习']
        }

let newObj=obj
newObj.name='李四'
 console.log(obj.newObj);
</script>

深拷贝

深拷贝拷贝的是对象,不是地址

常见方法

1,通过递归实现深拷贝

2.lodash/cloneDeep

3.通过JSON.stringfiy()实现

js库loadsh里面cloneDeep内实现了深拷贝

 json深拷贝

// json 深拷贝

//   (1)JSON.stringify(js对象):把js对象 ->json字符串(json 底层会自动深拷贝)

<script>
 let obj = {
            name:'张三',
            age:20,
            sex:'男',
            hobby:['吃饭','睡觉','学习']
        }
// let json =JSON.stringify(obj)
    //  (2) JSON.parse(json字符串)  :json字符串 ->js对象
        // let newObj=JSON.parse(json)
        // 简写一行
        let newObj=JSON.parse(JSON.stringify(obj))
        newObj.name='李四'
        newObj.hobby[0]='游戏'
        console.log(obj,newObj);

</script>

 03浅拷贝与深拷贝  递归实现

        2.递归应用:

            浅拷贝与深拷贝 :

            json方式  let newObj=JSON.parse(JSON.stringify(js对象))

               

            遍历dom树

如果是数据,直接进行拷贝 如果是数组或者对象 要 (1)声明一个空数组 (2)递归遍历旧的数组,把旧的数组里的数据追加给新的数组

(两者数组和对象的地址一样,所以修改新的数据的同时修改了旧的数据)

<script>
        /* 
        1.递归函数:  
            

        2.递归应用:
            浅拷贝与深拷贝 : 
            json方式  let newObj=JSON.parse(JSON.stringify(js对象))
                
            遍历dom树
        */  
       
        let obj = {
            name:'张三',
            age:20,
            sex:'男',
            hobby:['吃饭','睡觉','学习'],
            student:{
                name:"班长",
                score:90
            }
        }
// 深拷贝函数封装
function kaobei(obj,newObj){
    // 遍历obj ,把里面的数据拷贝给newObj
    for(let key in obj){
        // 判断是不是数组,如果是数组还需要继续遍历拷贝
        if(obj[key] instanceof Array){
            // (1)声明一个空数组
            newObj[key]=[]
            // (2)递归遍历数组
            kaobei(obj[key],newObj[key])
        }else if(obj[key] instanceof Object){
            // (1)声明一个空数组
            newObj[key]=[]
            // (2)递归遍历数组
            kaobei(obj[key],newObj[key])
        }else{
            newObj[key]=obj[key]
        }
    }
}

        
    </script>

递归遍历dom数 (了解)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .menu p {
        width: 100px;
        border: 3px solid;
        margin: 5px;
      }

      .menu > div p {
        margin-left: 10px;
        border-color: red;
      }

      .menu > div > div p {
        margin-left: 20px;
        border-color: green;
      }

      .menu > div > div > div p {
        margin-left: 30px;
        border-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="menu">
      <!-- <div>
        <p>第一级菜单</p>
        <div>
          <p>第二级菜单</p>
          <div>
            <p>第三级菜单</p>
          </div>
        </div>
      </div> -->
    </div>
    <script>
      //服务器返回一个不确定的数据结构,涉及到多重数组嵌套
      let arr = [
        {
          type: "电子产品",
          data: [
            {
              type: "手机",
              data: ["iPhone手机", "小米手机", "华为手机"]
            },
            {
              type: "平板",
              data: ["iPad", "平板小米", "平板华为"]
            },
            {
              type: "智能手表",
              data: []
            }
          ]
        },
        {
          type: "生活家居",
          data: [
            {
              type: "沙发",
              data: ["真皮沙发", "布沙发"]
            },
            {
              type: "椅子",
              data: ["餐椅", "电脑椅", "办公椅", "休闲椅"]
            },
            {
              type: "桌子",
              data: ["办公桌"]
            }
          ]
        },
        {
          type: "零食",
          data: [
            {
              type: "水果",
              data: []
            },
            {
              type: "咖啡",
              data: ["雀巢咖啡"]
            }
          ]
        }
      ]
 //  封装一个添加菜单的函数

 function addElement (arr,father) {
      for(let i = 0;i<arr.length;i++){
        let div = document.createElement('div')
        div.innerHTML = `<p>${arr[i].type || arr[i]}</p> `

        father.appendChild(div)

        if(arr[i].data) {
          addElement (arr[i].data,div) 
        }
      }
    }

    // 调用函数
    addElement (arr,document.querySelector('.menu')) 
    </script>
  </body>
</html>

学习吖
关注
  • 6
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
php基于闭包实现函数的自调用(递归)实例分析
12-19
同时，闭包也可以作为值进行传递，这样就可以在不同的上下文中使用同一个函数逻辑，而无需重复定义。 在实际应用中，闭包实现的递归可以用于处理各种复杂情况，例如无限级分类。在无限级分类的场景下，闭包可以用来...
Javascript闭包与函数柯里化浅析
10-22
闭包是一种机制，允许函数访问并操作其外部作用域的变量，即使在其定义的上下文之外。而函数柯里化是一种将多参数函数转换为一系列单参数函数的技术，通常用于提前绑定部分参数，创建更灵活的函数。 ### 一、闭包的...
[js学习] this 、$(this)
fronde2233的博客
08-25 3356
1.两者区别 $() = jquery(),即$(this)返回的是一个jQuery对象，能够调用jquery的方法，如click等 this 一般是全局变量，他指向的是函数执行的上下文对象。 比如：现在执行一个函数，该函数的功能为遍历某对象input，且找到该对象的属性。如下： <div id="mubiao"> <input type="checkbox" checked="" id="minCmax" disabled > <input typ...
菜鸟学习笔记1
weixin_34037977的博客
11-14 475
认识js中的function和this javascript中的函数不同于其他的语言，每个函数都是作为一个对象被维护和运行的。通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前，先看一下函数的使用语法：以下是引用片段：function func1(…){…}var func2=function(…){…};var func3=functi...
vue工程中，js文件中获取this指针
最新发布
ElectronStorm的专栏
05-27 249
如果在一个.js文件中，直接写this.xxxx会报this未定义。一、使用参数传进去。将this作为一个参数，传到函数中。在使用this对象的js文件中。
this的指向有哪几种？一个文章让你理解明白！从此不在为this指向犯愁！
CSON_Fuck的博客
04-23 1211
this的指向有哪几种？一个文章让你理解明白！从此不在为this指向犯愁！
JavaScript中的this详解
EmotionComputer
09-15 3856
箭头函数和普通函数的区别如下。 普通函数：根据调用我的人（谁调用我，我的this就指向谁） 箭头函数：根据定义时所在的对象，而不是使用时所在的对象。（我在哪个环境中，this就指向谁） 例如： function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; fo...
【JavaScript】访问外部作用域的同名变量或 this 的几种方法
高厉害 0w0
03-20 822
我们之前讨论过 python 和 js 在实现闭包时，使用变量的作用域差异 → https://blog.csdn.net/qq_16181837/article/details/104805151 今天又遇到了相关的问题 js 如何访问外部作用域的同名变量？ 在 python 中，我们有 nolocal 、 global 关键字，可以方便地声明某变量的作用域： def outer(): out...
JavaScript 函数的定义-调用、注意事项
10-20
4. **通过`call()`和`apply()`间接调用**：这两个方法可以改变函数的调用上下文，允许你指定`this`的值。例如，`add.call(o, 1, 2)`会使得`this`在`add`函数内部等于`o`。 **注意事项** - 在函数表达式中定义的...
深入理解JavaScript 中的执行上下文和执行栈
12-04
`this` 的值在全局上下文中通常指向全局对象，而在函数上下文中取决于函数调用的方式（如方法调用、构造器调用等）。 2. 执行阶段：在这个阶段，代码开始实际执行，变量和函数被分配内存，函数调用发生，值被计算和...
函数调用中堆栈的个人理解共4页.pdf.zip
10-30
当我们在代码中调用一个函数时，系统会利用内存中的数据结构——堆栈，来管理函数的执行上下文。堆栈是一种后进先出（LIFO）的数据结构，非常适合处理函数调用这类临时存储的需求。下面将详细解释函数调用时堆栈的...
JavaScript闭包+函数内部的this指向
星环
03-07 624
关于闭包，   什么是闭包？   看了不少博客没理解明白，百度百科写的是，闭包就是能够读取其他函数内部变量的函数（虽然这个也是引用的）。如果我们把 闭包 改称做 闭包函数 这样理解起来可能更容易一些。 闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接...
JS 关于 this 指向的几种情况
cookcyq__的博客
01-02 3778
一、this 指向 window 1、全局函数里面的 this 指向 window 2、箭头函数里面的 this 指向 window // 定义全局变量 title 与函数 foo var title = 'hello,world' // 注意：若使用 let 定义则不属于全局变量 function foo() { console.log(this.title) } function arrow() { let title = 'hello,arrow' return () => { re
this的三种用法 详解
Joker的Java世界
05-12 2万+
public class ThisTest2 { public static void main(String[] args) { // 测试this表示当前对象的引用 SelfObject aaa = new SelfObject(); aaa.test(); } }/** * 一、使用this引用成员变量 * 在一个类的方法或构造方法内部,可以使用"...
JAVA中this用法小结
热门推荐
fzfengzhi的专栏
03-12 10万+
我知道很多朋友都和我一样：在JAVA程序中似乎经常见到“this”，自己也偶尔用到它，但是到底“this”该怎么用，却心中无数！很多人一提起它，就说“当前对象”，可到底什么是当前对象，是什么当前对象，他自己也不清楚。现在让大家看一个小例子，给你分享一下JAVA中“this”的用法！/** * @author fengzhi-neusoft *  * 本示例为了说明this的三种用法
js函数中this的指向
qq_44388775的博客
10-21 1965
js函数中this的指向 函数在执行时内部会默认创建一个对象叫this，以不同的方式调用函数，内部的this指向是不一样的，this的指向在函数定义的时候是不能确定的，只有调用执行了函数以后才能确定this到底指向谁。谁直接调用了产生this的函数，this就指向谁。 函数的调用方式大概有6种，所以this的指向也可以大致按照这6种来区分。 函数名+小括号直接调用函数，this指向全局对象window。 因为以函数名加小括号的方式调用函数时相当于是window通过.调用了该函数，所以此时this指向win
深入理解JS函数中this指针的指向
weixin_30722589的博客
08-16 224
函数在执行时，会在函数体内部自动生成一个this指针。谁直接调用产生这个this指针的函数，this就指向谁。 怎么理解指向呢，我认为指向就是等于。例如直接在js中输入下面的等式： console.log(this===window);//true 情况不同，this指向的对象也不同。例如： 1. 函数声明的情况 var bj=10; function add(){ ...
第7章 高级函数.pptx
05-21
第7章 高级函数.pptx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值