函数的定义和调用 + 改变this指向方法 + 闭包 + 递归

Posted 2021-07-19 鲸渔要加油

文章目录

• 一、函数的定义和调用
• • 1. 函数的定义
  • 2. 函数的调用 + this指向
• 二、改变函数内部的this指向
• • 1. `call()`
  • 2. `apply()`
  • 3. `bind()`
  • 4. `call` `apply` `bind` 的异同
• 三、严格模式
• • 开启严格模式
  • 严格模式中的变化
• 四、高阶函数
• 五、闭包
• 六、闭包小案例
• • • 1. 得到当前 li 的索引号
    • 2. 3秒钟之后打印所有 li 元素的内容
    • 3. 计算打车价格
    • 4. 思考
• 七、递归
• • • • 浅拷贝和深拷贝
• 八、递归小案例
• • • 1. 求1~n的阶乘
    • 2. 求斐波那契数列
    • 3. 遍历数据

一、函数的定义和调用

1. 函数的定义

1. 函数声明方式 function 关键字 (命名函数)
   function fn(){}

2. 函数表达式(匿名函数)
   var fn = function(){}

3. new Function()

 var f = new Function('a', 'b', 'console.log(a + b)');
 f(1, 2);

 var fn = new Function('参数1','参数2'..., '函数体')
 注意
 /* Function 里面参数都必须是字符串格式
 第三种方式执行效率低，也不方便书写，因此较少使用
 所有函数都是 Function 的实例(对象)  
 函数也属于对象 */

2. 函数的调用 + this指向

1. 普通函数 + this指向window

 function fn(){};
 fn();
 fn.call();

2. 对象的方法 + this指向对象

 var o = {
	 sayHi: function() {
		 console.log('远近渔');
	 }
 }
 o.sayHi();

3. 构造函数 + this指向实例对象

 function Star() {};
 new Star();

4. 绑定事件函数 + this指向绑定的
   btn.onclick = function() {};
   点击按钮就可以调用

5. 定时器函数 + this指向的window
   setInterval(function() {}, 1000);
   定时器自动1s调用一次

6. 立即执行函数 + this指向的window
   (function() {}) ()
   立即执行函数自动调用

二、改变函数内部的this指向

1. call()

• call() 可以调用函数
• call() 可以修改this的指向
• fn.call(this指向, 传参1, 传参2)
• call() 的主要作用是实现继承
  在子函数中用 call() 调用父函数

 function fn(x, y) {  }
 var o = {  }
 fn.call(o, 1, 2)

2. apply()

• apply() 可以调用函数
• apply() 可以修改this的指向
• fn.apply(this指向, 传参数组) 传参必须是数组
• apply() 的主要作用是比较数组大小

 var arr = [1, 2, 5];
 console.log(Math.max.apply(Math, arr));

3. bind()

• bind() 可以修改this的指向
• fn.bind(this指向, 传参1, 传参2)
  传参和 call() 一样
• bind() 不会调用函数， 但有一个返回值
  返回值是原函数改变this之后的新函数

 var o = {name: 'andy'};
 function fn(a, b) {};
 var aaa = fn.bind(o, 8, 9);
 aaa();

小案例：按钮点击3s禁用

 var btn = document.querySelector('button');
 btn.onclick = function () {
     this.disabled = true;
     setTimeout(function () {
         this.disabled = false;
     }.bind(this), 3000)
 }

4. call apply bind 的异同

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

• 不同点 :

  • call 和 apply 会调用函数
    bind 不会调用函数
  • call 和 apply传递的参数不一样
    call 传参数
    apply 传数组

• 应用场景

  • call 经常做继承
  • apply 经常跟数组有关系
  • bind 不调用函数，但是还想改变this指向.
    比如改变定时器内部的 this 指向

三、严格模式

开启严格模式

严格模式可以应用到整个脚本或个别函数中
'use strict';

严格模式中的变化

• 严格模式后使用未声明的变量
  num = 10;
• 严格模式不允许删除变量
  delete num;
• 严格模式下全局作用域中函数中的 this 是 undefined
• 严格模式下，如果构造函数不加 new 调用，this 指向的是 undefined 如果给他赋值则会报错
• 严格模式下，定时器 this 还是指向 window
• 函数里面的参数不允许重名

四、高阶函数

接收的参数为函数 或 输出的值为函数都叫做高阶函数
函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用，最典型的就是作为回调函数

五、闭包

1. 什么是闭包

闭包（closure）指有权访问另一个函数作用域中变量的函数，可以理解为一种现象

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

闭包是将函数内部和函数外部连接起来的桥梁

2. 闭包的作用

延伸变量的作用范围

3. 闭包的问题

内存泄漏（该回收的内存，没有回收）

4. 结论

将来写代码，能不用闭包就不用闭包

 function a(){
     var num = 1;
     function b() {
         console.log(num);
     }
     b()
 }
 a()
 // b 访问了 a 的变量 num，这就是闭包
 // b 就是闭包 a 是闭包函数

 function a() {
     var num = 1;
     return function () {
         console.log(num);
     }
 }
 var b = a();
 b();

六、闭包小案例

1. 得到当前 li 的索引号

 var lis = document.querySelector('.nav').querySelectorAll('li');
 // for (var i = 0; i < lis.length; i++) {
 //     lis[i].index = i;
 //     lis[i].onclick = function () {
 //         console.log(this.index);
 //     }
 // }

 // 每次循环创建一个立即执行函数
 // 产生了闭包
 for (var i = 0; i < lis.length; i++) {
     (function (i) {
         lis[i].onclick = function () {
             console.log(i);
         }
     })(i);
 }

2. 3秒钟之后打印所有 li 元素的内容

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

3. 计算打车价格

 var car = (function () {
     var star = 15;
     var num = 0;
     return {
         price: function (n) {
             if (n <= 3) {
                 num = star;
             } else {
                 num = (n - 3) * 5 + star;
             }
             return num;
         },
         yd: function (flag) {
             return flag ? num + 10 : num;
         }
     }
 })();
 car.price(5);
 car.yd(true);

4. 思考

 var name = "The Window";
   var object = {
     name: "My Object",
     getNameFunc: function() {
     return function() {
     return this.name;
     };
   }
 };
console.log(object.getNameFunc()())
-----------------------------------------------------------------------------------
var name = "The Window";　　
  var object = {　　　　
    name: "My Object",
    getNameFunc: function() {
    var that = this;
    return function() {
    return that.name;
    };
  }
};
console.log(object.getNameFunc()())

七、递归

如果一个函数在内部可以调用其本身，就是自己调用自己，那么这个函数就是递归函数

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

浅拷贝和深拷贝

八、递归小案例

1. 求1~n的阶乘

 function fn(n) {
     if (n === 1) {
         return 1;
     }
     return n * fn(n - 1);
 }
 console.log(fn(3));
 
 // 三元表达式法
 function f(n) {
     return n === 1 ? 1 : n * f(n - 1);
 }
 console.log(f(3));

2. 求斐波那契数列

 function fb(n) {
     if (n === 1 || n === 2) {
         return 1;
     }
     return fb(n - 1) + fb(n - 2);
 }
 console.log(fb(3));

3. 遍历数据

// 我们想要做输入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;
}