网站首页前端文档正文

JavaScript学习笔记—函数进阶(调用、this指向、闭包、递归）

作者：是行是行啊更新时间： 2021-12-15 前端文档

JavaScript学习笔记—函数进阶

目标：

能够说出函数的多种定义和调用方式
能够说出和改变函数内部this的指向
能够说出严格模式的特点
能够把函数作为参数和返回值传递
能够说出闭包的作用
能够说出递归的两个条件
能够说出深拷贝和浅拷贝的区别

1. 函数的定义和调用

1.1 函数的定义方式

函数声明方式 function 关键字（命名函数）

function fn(){};

函数表达式（匿名函数）

var fun=function(){};

new Function()

var fn = new Function('参数1','参数2',...,'函数体');

 - Function里面参数都必须是字符串格式
 - 第三种方式执行效率低，也不方便书写，因此较少使用
 - 所有函数都是Function的实例（对象）

1.2 函数的调用方式

普通函数

fn();    或    fn.call();

对象的方法

obj.sing();

构造函数

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

绑定事件

触发了事件就调用

定时器函数

定时器自动x秒钟调用一次

立即执行函数

(function(){})();

2. this

2.1 函数内的this指向

函数的不同调用方式决定了 this的指向不同

普通函数——this 指向window
对象的方法——this 指向的是对象
构造函数——this 指向实例对象
（原型对象里面的this 也指向这个实例对象）
绑定事件函数——this 指向这个函数的调用者
定时器函数——this 指向的是window
立即执行函数——this 指向的是window

2.2 改变函数内this指向：

call( )、 apply( )、bind( ) 三种方法

1. call方法

可以调用函数
可以改变函数的this指向

主要应用：实现继承

fun.call(thisArg,arg1,arg2,...)

2. apply方法

可以调用函数
可以改变函数的this指向
注意：它的参数必须是数组（伪数组）

主要应用：例如我们可以利用apply借助于数学内置对象求数组最大值

//apply  应用的意识
fun.apply(thisArg,[argsArray])

thisArg:在fun函数运行时指定的this值
argsArray:传递的值，必须包含在数组里面
返回值就是函数的返回值，因为他就是调用函数？？？

例子：利用apply借助于数学内置对象求数组最大值

var arr=[1,22,4,66,8,99];
var max=Math.max.apply(Math,arr);
var min=Math.max.apply(Math,arr);
console.log(min,max);

3. bind方法

不会调用函数
可以改变函数内部this指向
返回的是原函数改变this指向之后产生的新函数

主要应用：如果有的函数我们不需要立即调用，但是又想改变这个函数内部的this指向，此时，使用bind

// bind() 绑定 捆绑的意思
fun.bind(thisArg,arg1,arg2,...);

thisArg:在fun函数运行时指定的this值
arg1，arg2:传递的其他参数
返回由指定的this 值和初始化参数改造的原函数拷贝

案例：按钮禁用3s

一个按钮时：
<body>
<button>click</button>
</body>
<script>
// 1.
var btn=document.querySelector('button');
// 2.
btn.onclick=function(){
 this.disabled=true;
 var that=this ;
 setTimeout(function(){
  // this.disabled=false;
  //定时器函数里面的this 指向的是window 而我们要的是btn 所以外面声明一个变量
  // that.disabled=false;
  this.disabled=false;}.bind(this ),3000); //这个this 指向的是btn 这个对象
}
</script>

多个按钮时：
<body>
<button>click</button>
<button>click1</button>
<button>click2</button>
<button>click3</button>
</body>
<script>
// 1.
var btns=document.querySelectorAll('button');
// 2.
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
  this.disabled=true;
  setTimeout(function(){
   this.disabled=false;
  }.bind(this),2000) //bind改变了定时器的指向
// }
}
</script>

【tab栏案例】可以尝试使用这个方法而不使用 var that=this 的方法

3. 严格模式

3.1 什么是严格模式

对正常的JavaScript语义做了一些更改：

消除了JavaScript语法的一些不合理、不严谨之处，减少了一些怪异行为
禁用了一些语法，为未来新版本的JavaScript做好铺垫。比如一些保留字：class、enum，export，extends，import，super 不能做变量名

3.2 如何开启严格模式

1. 为脚本开启严格模式

//法一：
<script>
"use strict" // 写在开头部分，所有语句之前
</script>

//法二
<script>
(function(){
"use strict";
})()
</script>

2. 为函数开启严格模式

function fn(){
"use strict" //声明放在函数体所有语句之前
}

3.3 严格模式中的变化

严格模式对JavaScript的语法和行为，都做了一些改变
1. 变量规定

在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用var声明，然后再使用。
严禁删除已经声明的变量。例如，delete x；语法是错误的

2. 严格模式下this指向问题

以前在全局作用域中函数中的this指向window对象，严格模式下 this是undefined
以前构造函数不加new也可以调用，当普通函数，this指向全局对象
严格模式下，如果构造函数不加new调用，this指向的是undefined 如果给它赋值则会报错
new实例化的构造函数指向创建的对象实例
定时器this还是指向window
事件、对象还是指向调用者

3. 函数变化

函数不能有重名的参数

*更多严格模式要求可去查询

4. 高阶函数

高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出

5. 闭包

5.1 什么是闭包

闭包（Closure）指有权访问另一个函数作用域中的变量
就是，一个作用域可以访问另外一个函数内部的局部变量

5.2 闭包的作用

延伸了变量的作用范围

5.2 闭包案例

循环注册点击事件 --面试常考题

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
<ul class="nav">
 <li>niunian</li>
 <li>choudouhu</li>
 <li>feiyufuantou</li>
 <li>dazhudizi</li>
</ul>
<script type="text/javascript">

//闭包的应用-点击li输出当前li的索引号

// 1.获取元素
var lis=document.querySelector('.nav').querySelectorAll('li');
// 2.利用动态添加属性的方式 
// for(var i=0;i<lis.length;i++){
//     lis[i].index=i; //为什么这样就设置了index 不需要通过设置属性的方法
//     lis[i].οnclick=function(){
//         console.log(this.index);
//     }
// }
// 3.利用闭包的方式
for(var i=0;i<lis.length;i++){
    // 利用for循环创建了4个立即执行函数
    //立即执行函数也成为小闭包。 因为立即执行函数里面的任何一个函数都可以使用它的a变量
    (function(a){
        lis[a].onclick=function(){
            console.log(a);
        }
    })(i);//传入参数
}
</script>
</body>

循环中的setTimeout()

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
<ul class="nav">
 <li>niunian</li>
 <li>choudouhu</li>
 <li>feiyufuantou</li>
 <li>dazhudizi</li>
</ul>
<script type="text/javascript">
// // 这是没用使用闭包现象的打印
// var lis=document.querySelector('.nav').querySelectorAll('li');
// var nav=document.querySelector('.nav')
// setTimeout(function(){
//  for(var i=0;i<lis.length;i++){
//   console.log(lis[i].innerHTML);
//  }
// },3000);
// console.log(nav.innerHTML);

// 使用闭包
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);
}
</script>
</body>
</html>

计算打车价格

 <script>
        // 闭包应用-计算打车价格 
        // 打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
        // 如果有拥堵情况,总价格多收取10块钱拥堵费
        // function fn() {};
        // fn();
        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(flag) {
                    return flag ? total + 10 : total;
                }
            }
        })();
        console.log(car.price(5)); // 23
        console.log(car.yd(true)); // 33
	
	console.log(car.price(2)); // 13
        console.log(car.yd(false)); // 13

tip：
for循环–生成立即执行函数。就可以避免直接到i=4的情况了

6. 递归

6.1 什么是递归

函数内部自己调用自己
递归函数的作用和循环效果一样
递归很容易发生“栈溢出”错误，所以必须要加退出条件 return

6.2 例子

求阶乘

<script type="text/javascript">
function fn(n){
 if(n==1){
  return 1
 }else{
  return n*fn(n-1);
 }
}
console.log(fn(5));
</script>

求斐波那契数列

<script type="text/javascript">
// 利用递归函数求斐波那契数列，特点：前两项和正好是第三项的和 1、1、2、3、5、8、13.
function fb(n){
// 1.先想好跳出的条件
if(n===1||n===2){
 return 1;
}else{
 return fb(n-1)+fb(n-2); //此处！！一开始做错了。不能是 （n-1）+fb(n-2) 因为它是指前面一项数，而不是前一位数字奥
}
};
console.log(fb(8));
console.log(fb(2));
</script>

根据id返回对应的数据对象（会常用的）

<script type="text/javascript">
var data=[{
 id:1,
 name:'家电',
 goods:[{
  id:11,
  gname:'冰箱'
 },{
  id:12,
  gname:'洗衣机'
 }]
},{
 id:2,
 name:'服饰'
}];
// 我么们想要输入一个id号，就返回他的数据对象
// 
function fn(arr,identity){
var o={};
arr.forEach(function(a){
 if(identity==a.id){
  console.log(a);
  //想要它返回出来，不是console。log出来
  o=a;
  return o;
 }
 // console.log(a.id);
 // 2. 我们想要里层的数据 11 12 可以利用函数递归
 // 里面应该有goods这个数组并且数组的长度不为0
 else if(a.goods&&a.goods.length>0){
  o=fn(a.goods,identity);
 }
});
return o;
}
console.log(fn(data,1));
console.log(fn(data,2));
console.log(fn(data,12));
</script>

注意理解：
在这里插入图片描述

6.3 浅拷贝和深拷贝

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用（浅拷贝是把地址给新对象）
ES6 新增可浅拷贝方法：Object.assign(target,…sources)
深拷贝拷贝多层，每一级别的数据都会拷贝

1.怎么样拷贝属于浅拷贝或深拷贝？
通过语法糖或者是自己写一个函数

在这里插入图片描述

深拷贝封装方法：

var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };
var o={};

function deepCopy(newobj,oldobj){
for(var k in oldobj){
//判断我们的属性值属于那种数据类型
// 1.获取属性值 oldobj[k]
var item=oldobj[k];
// 2.判断这个值是否是数组
if(item instanceof Array){
newobj[k]=[];
deepCopy(newobj[k],item);
}else if{
// 3.判断这个值是否是对象
newobj[k]={};
deepCopy(newobj[k[,item);
}else{
// 4.数据简单数据类型
newobj[k]=item;
}
}
}

Learning from pink 老师

原文链接：https://blog.csdn.net/weixin_45655555/article/details/104627749

上一篇：JS高级-函数定义与调用、函数内的this指向、改变this
下一篇：前端页面阻尼效果实现

网站首页 前端文档 正文