logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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

 印度阿三17 2020-03-12

JavaScript学习笔记—函数进阶

目标：

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

1. 函数的定义和调用

1.1 函数的定义方式
  1. 函数声明方式 function 关键字（命名函数）
function fn(){};
  1. 函数表达式 （匿名函数）
var fun=function(){};
  1. new Function()
var fn = new Function('参数1','参数2',...,'函数体');

 - Function里面参数都必须是字符串格式
 - 第三种方式执行效率低，也不方便书写，因此较少使用
 - 所有函数都是Function的实例（对象）
1.2 函数的调用方式
  1. 普通函数
fn();    或    fn.call();
  1. 对象的方法
obj.sing();
  1. 构造函数
function Star() {};
        new Star();
  1. 绑定事件
触发了事件就调用
  1. 定时器函数
定时器自动x秒钟调用一次
  1. 立即执行函数
(function(){})();

2. this

2.1 函数内的this指向

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

  1. 普通函数——this 指向window
  2. 对象的方法——this 指向的是对象
  3. 构造函数——this 指向实例对象
    （原型对象里面的this 也指向这个实例对象）
  4. 绑定事件函数——this 指向这个函数的调用者
  5. 定时器函数——this 指向的是window
  6. 立即执行函数——this 指向的是window
2.2 改变函数内this指向：

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

1. call方法
  1. 可以调用函数
  2. 可以改变函数的this指向
  • 主要应用：实现继承
fun.call(thisArg,arg1,arg2,...)
2. apply方法
  1. 可以调用函数
  2. 可以改变函数的this指向
  3. 注意：它的参数必须是数组（伪数组）
  • 主要应用：例如我们可以利用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方法
  1. 不会调用函数
  2. 可以改变函数内部this指向
  3. 返回的是 原函数改变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语义做了一些更改：

  1. 消除了JavaScript语法的一些不合理、不严谨之处，减少了一些怪异行为
  2. 禁用了一些语法，为未来新版本的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. 变量规定

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

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

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

3. 函数变化

  1. 函数不能有重名的参数

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

4. 高阶函数

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

5. 闭包

5.1 什么是闭包

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

5.2 闭包的作用

延伸了变量的作用范围

5.2 闭包案例
  1. 循环注册点击事件 --面试常考题
<!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>
  1. 循环中的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>
  1. 计算打车价格
 <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 例子
  1. 求阶乘
<script type="text/javascript">
function fn(n){
 if(n==1){
  return 1
 }else{
  return n*fn(n-1);
 }
}
console.log(fn(5));
</script>
  1. 求斐波那契数列
<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>
  1. 根据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 浅拷贝和深拷贝
  1. 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用（浅拷贝是把地址给新对象）
  2. ES6 新增可浅拷贝方法：Object.assign(target,…sources)
  3. 深拷贝拷贝多层，每一级别的数据都会拷贝

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://www./content-1-657351.html

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 印度阿三17 > 《开发》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多