• this指向问题，闭包以及递归

    this指向问题

    这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同

    一般指向我们的调用者.

    函数调用this指向
    普通函数调用window
    构造函数调用实例对象，原型对象里面的方法也指向实例对象
    对象方法调用改方法所属对象
    事件绑定方法绑定事件对象
    定时器函数window
    立即执行函数window

    改变函数内部 this 指向(call、apply、bind)

    call方法

    call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向

    应用场景: 经常做继承.

    1. 可以调用函数

    fn.call()

    2.可以改变函数内this指向
    var o = {
	name: 'andy'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn(1,2)// 此时的this指向的是window 运行结果为3
fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为3

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    3.可以实现继承
    function Father(uname, age, sex) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
        }
        function Son(uname, age, sex) {
            Father.call(this, uname, age, sex);
        }
        var son = new Son('lisi', 18, '男');
        console.log(son);//输出结果为age: 18  sex: "男"  uname: "lisi"

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    apply方法

    apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。

    应用场景: 经常跟数组有关系

    var o = {
	name: 'andy'
}
 function fn(a, b) {
      console.log(this);
      console.log(a+b)
};
fn()// 此时的this指向的是window 运行结果为3
fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为3

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    bind方法

    bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数

    如果只是想改变 this 指向，并且不想调用这个函数的时候，可以使用bind

    应用场景:不调用函数,但是还想改变this指向

     var o = {
 name: 'andy'
 };

function fn(a, b) {
	console.log(this);
	console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
f();//调用新函数  this指向的是对象o 参数使用逗号隔开

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    call、apply、bind三者的异同

    • 🔴共同点 : 都可以改变this指向

    • 🟠 不同点:

      • call 和 apply 会调用函数, 并且改变函数内部this指向.
      • call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
      • bind 不会调用函数, 可以改变函数内部this指向

    • 🟡应用场景

      1. call 经常做继承.
      2. apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
      3. bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

    闭包

    闭包（closure）指有权访问另一个函数作用域中变量的函数。

    简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。

    详解JS中定时器setInterval和setTImeout的this指向问题
    pdf 0星 超过10%的资源 51KB
    下载

    闭包有三个特性：

    ①函数嵌套函数

    ②函数内部可以引用函数外部的参数和变量

    ③参数和变量不会被垃圾回收机制回收

    闭包的主要作用: 延伸了变量的作用范围

     function fn() {
   var num = 10;
   function fun() {
       console.log(num);
 	}
    return fun;
 }
var f = fn();
f();//函数f（）可以使用num的数值

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    闭包比较难理解，这里可以结合以下的案例来加深印象和理解

    闭包案例：3秒钟之后,打印所有li元素的内容

    html
<ul>
        <li>臭豆腐li>
        <li>螺狮粉li>
        <li>榴莲li>
        <li>鲱鱼罐头li>
    ul>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    js

var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
            (function (i) {
                setTimeout(function () {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i);
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    这里使用立即执行函数将i的值传入函数
    在这里插入图片描述

    闭包案例：计算打车价格

    需求分析:
    打车起步价13(3公里内),
    之后每多一公里增加 5块钱.
    用户输入公里数就可以计算打车价格
    如果有拥堵情况,总价格多收取10块钱拥堵费

    <body>
    <script>
        var car = (function () {
            var start = 13; // 起步价  局部变量
            var total = 0;// 总价  局部变量
            return {
                // 正常的总价
                price: function (n) {
                    if (n <= 3) {
                        total = start;
                    } else {
                        total = start + (n - 3) * 5;
                    }
                    return total;
                },
                // 拥堵之后的费用
                yd: function (falg) {
                    return falg ? total + 10 : total;
                }
            }
        })();
        console.log(car.price(5)); // 23
        console.log(car.yd(true)); //23
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    背包问题的递归实现代码
    cpp 0星 超过10%的资源 1KB
    下载

    递归

    什么是递归

    递归： 如果一个函数在内部可以调用其本身，那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数

    注意： 递归函数的作用和循环效果一样，由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return。

    利用递归求1~n的阶乘

    //利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
 function fn(n) {
     if (n == 1) { //结束条件
       return 1;
     }
     return n * fn(n - 1);
 }
 console.log(fn(4));//24

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    参数4传入，经过if判断到达return，在经过递归方法在将参数值为3的函数在调用一边，依次类推直到参数n的值为1时输出；
    在这里插入图片描述

    // 利用递归函数求斐波那契数列(兔子序列) 1、1、2、3、5、8、13、21…

    // 利用递归函数求斐波那契数列(兔子序列)  1、1、2、3、5、8、13、21...
// 用户输入一个数字 n 就可以求出 这个数字对应的兔子序列值
// 我们只需要知道用户输入的n 的前面两项(n-1 n-2)就可以计算出n 对应的序列值
function fb(n) {
  if (n === 1 || n === 2) {
        return 1;
  }
  return fb(n - 1) + fb(n - 2);
}
console.log(fb(3));

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    利用递归遍历数据

    // 我们想要做输入id号,就可以返回的数据对象
 var data = [{
   id: 1,
   name: '家电',
   goods: [{
     id: 11,
     gname: '冰箱',
     goods: [{
       id: 111,
       gname: '海尔'
     }, {
       id: 112,
       gname: '美的'
     },

            ]

   }, {
     id: 12,
     gname: '洗衣机'
   }]
 }, {
   id: 2,
   name: '服饰'
}];
//1.利用 forEach 去遍历里面的每一个对象
 function getID(json, id) {
   var o = {};
   json.forEach(function(item) {
     // console.log(item); // 2个数组元素
     if (item.id == id) {
       // console.log(item);
       o = item;
       return o;
       // 2. 我们想要得里层的数据 11 12 可以利用递归函数
       // 里面应该有goods这个数组并且数组的长度不为 0 
     } else if (item.goods && item.goods.length > 0) {
       o = getID(item.goods, id);
     }
   });
   return o;
 
}
 console.log(getID(data, 1));
 console.log(getID(data, 11));


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    记得一键三连哦 👍 💗 💬

    请添加图片描述

  • 相关阅读:
    【JavaSE】泛型通关教程
    Jetsonnano B01 笔记1：基础理解—网络配置—远程连接
    Rust星号(*)的作用-基础篇
    vue使用elementUI的upload上传文件封装
    GaussDB(for Redis)双活容灾支持4大应用场景，为业务安全保驾护航
    AI 游戏工具收集
    实体链指（2）EL：Disambiguation-Only
    RL强化学习总结（三）——Q-Learning算法
    计算机二级--java篇
    周公解梦|做梦的解释|鬼压床|为什么会做梦
  • 原文地址：https://blog.csdn.net/m0_53619602/article/details/125999081