首页 > 编程札记 > 编程

50~75(函数的定义何调用+this+严格模式+高阶函数+闭包+递归)

阅读：评论：0

1 函数的定义和调用

1.1 函数的定义方式

函数声明方式function关键字(命名函数)
函数表达式(匿名函数)
new Function()

var fn = new Function(‘参数1’, ‘参数2’…,‘函数体’)

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

eg:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 函数的定义方式// 1. 自定义函数(命名函数)function fn() {};// 2. 函数表达式(匿名函数)var fun = function() {};// 3. 利用 new Function('参数1','参数2', '函数体');var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);// 4. 所有函数都是 Function 的实例(对象)console.dir(f);// 5. 函数也属于对象console.log(f instanceof Object);</script>
</body>
</html>

1.2 函数的调用方式

普通函数
对象的方法
构造函数
绑定事件函数
定时器函数
立即执行函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数的调用方式</title>
</head>
<body><script>// 1. 普通函数function fn() {console.log('人生的巅峰');}// fn();  fn.call()// 2. 对象的方法var o = {sayHi: function() {console.log('人生的巅峰');}}o.sayHi();// 3. 构造函数function Star() {};new Star();// 4. 绑定事件函数lick = function() {} // 点击了按钮就可以调用这个函数// 5. 定时器函数setInterval(function() {}, 1000); // 这个函数是定时器自动1秒钟调用一次// 6. 立即执行函数(function() {console.log('人生的巅峰');})();// 立即执行函数是自动调用</script>
</body>
</html>

2 this

2.1 函数内this的指向

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数的调用方式</title>
</head>
<body><button>点击</button><script>// 函数的不同调用方式决定了this的指向不同// 1. 普通函数 this指向windowfunction fn() {console.log('普通函数this' + this);}window.fn();// 2. 对象的方法 this指向的是ovar o = {sayHi: function() {console.log('人生的巅峰');}}o.sayHi();// 3. 构造函数 this 指向ldh这个实例对象 原型对象里面的this 指向的也是ldh这个实例对象function Star() {};Star.prototype.sing = function() {}var ldh = new Star();// 4. 绑定事件函数 this指向的是函数的调用者 btn这个按钮对象var btn = document.querySelector('button');lick = function() {console.log('绑定事件函数的this:' + this);};// 5. 定时器函数  this指向的也是windowwindow.setInterval(function() {console.log('定时器的this:' + this);}, 1000); // 6. 立即执行函数 this还是指向window(function() {console.log('人生的巅峰');})();// 立即执行函数是自动调用</script>
</body>
</html>

2.2 改变函数内部this指向

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 改变函数内this指向 js提供了三种方法 call() apply()  bind()// 1. call()var o = {name: 'andy'}function fn(a, b) {console.log(this);console.log(a + b);};fn.call(o, 1, 2);// call 第一个可以调通函数 第二个可以改变函数内的this指向// call 的主要作用可以实现继承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('刘德华', 18, '男');console.log(son);</script>
</body>
</html>

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

fun.apply(thisArg, [argArray])

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 改变函数内this指向 js提供了三种方法 call() apply() bind()// 2. apply() 应用 运用的意思var o = {name: 'yaya'};function fn(arr) {console.log(this);console.log(arr); // 'pink'};fn.apply(o, ['pink']);// 1. 也是调用函数 第二个可以改变函数内部的this指向// 2. 但是它的参数必须是数组(伪数组)// 3. apply的主要应用  比如说可以利用apply借助于数学内置对象求最大值// Math.max();var arr = [1, 66, 3, 99, 4];// var max = Math.max.apply(Math, arr);var max = Math.max.apply(Math, arr);var min = Math.min.apply(Math, arr);console.log(max, min);</script>
</body>
</html>

bind方法
bind()方法不会调用函数。但是能改变函数内部this指向

fun.bind (thisArg, arg1, arg2, …)

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button>点击</button><button>点击</button><button>点击</button><script>// 3. bind()绑定 捆绑的意思var o = {name: 'andy'};function fn(a, b) {console.log(this);console.log(a + b);}var f = fn.bind(o, 1, 2);f();// // 1. 不会调用原来的函数 可以改变原来函数内部的this指向// // 2. 返回的是原函数改变this之后产生的新函数// // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向 此时用bind// // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮// var btn = document.querySelector('button');// lick = function() {//     this.disabled = true; // 这个this指向的是btn这个按钮//     // var that = this;//     setTimeout(function() {//         // that.disabled = false; // 定时器函数里面的this 指向的是window//         this.disabled = false; //此时定时器函数里面的this 指向的是btn//     }.bind(this), 3000)  // 这个this指向的是btn这个对象// }var btns = document.querySelectorAll('button');for (var i = 0; i < btns.length; i ++ ) {btns[i].onclick = function() {this.disabled = true;setTimeout(function() {this.disabled = false;}.bind(this), 2000);}}</script>
</body>
</html>

2.3 call apply bind总结

相同点:

都可以改变函数内部的this指向.

区别点:

call和apply会调用函数,并且改变函数内部this指向.
call和apply传递的参数不一样 call传递参数aru1, aru2…形式apply 必须数组形式[arg]
bind 不会调用函数可以改变函数内部this指向.

主要应用场景

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

3 严格模式

3.1 什么是严格模式

JavaScript除了提供正常模式外,还提供了严格模式(strict mode)。ES5的严格模式是采用具有限制性JavaScript变体的一种方式,即在严格的条件运行JS代码。

严格模式在IE10以上版本的浏览器中才会被支持, 旧版本浏览器中会被忽略。

严格模式对正常的JavaScript语义做了一些更改:

消除了Javascript语法的一些不合理、不严谨之处,减少了一些怪异行为。
消除代码运行的一些不安全之处,保证代码运行的安全。
提高编译器效率,增加运行速度。
禁用了在ECMAScript的未来版本中可能会定义的一些语法,为未来新版本的Javascript做好铺垫。比如一些保留字如: class, enum, export, extends, import, super不能做变量名

3.2 开启严格模式

严格模式可以应用到整个脚本或个别函数中。因此在使用时,我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。

为脚本开启严格模式
为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语句"use strict";('use strict';)

<script>'use strict';console.log('这是严格模式');
</script>

有的script基本是严格模式,有的script脚本是正常模式,这样不利于文件合并,所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他script脚本文件。

为函数开启严格模式
要给某个函数开启严格模式,需要把"usestrict" ; (或'use strict';)声明放在函数体所有语句之前。
h

<script>(function() {"use strict";var num = 10;function fn() {}})();
</script>

eg:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 为整个脚本(script标签)开启严格模式 --><script>'use strict';// 下面的js代码就会按照严格模式执行代码</script><script>(function() {'use strict';})();</script><!-- 为某个函数开启严格模式 --><script>// 此时只是给fn函数开启严格模式function fn() {'use strict';// 下面的代码按照严格模式执行}ufunction fun() {// 里面的还是按照普通模式执行}</script>
</body>
</html>

3.3 严格模式中的变化

严格模式对Javascript的语法和行为,都做了一些改变。

变量规定

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

严格模式下this指向问题

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

函数变化

函数不能有重名的参数。
函数必须声明在顶层新版本的JavaScript会引入"块级作用域"(ES6中已引入)。为了与新版本接轨,不允许在非函数的代码块内声明函数。

更多严格模式要求参考:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>'use strict';// 1. 我们的变量名必须先声明再使用// num = 10;// console.log(num);var num = 10;console.log(num);// 2. 我们不能随意删除已经声明好的变量// delete num;// 3. 严格模式下全局作用域中的this是undefined// function fn() {//     console.log(this); // undefined// }// fn();// 4. 严格模式下 如果构造函数不加new调用 this指向的是undefined 如果给他赋值会报错// function Star() {//     this.sex = '男';// }// // Star();// var ldh = new Star();// console.log(ldh.sex);// 5. 定时器this还是指向window// setTimeout(function() {//     console.log(this);// }, 2000);// a = 1;// b = 2;// 6. 严格模式下函数里面的参数不允许有重名// function fn(a, a) {//     console.log(a + a);// }// fn(1, 2);</script>
</body>
</html>

4 高阶函数

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

<script>
function fn(callback) {callback&&callback();
}
fn(function() { alert('hi')})
</script>

<script>
function fn() {return function() {}
}
fn();
</script>

此时fn就是一个高阶函数

函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用.最典型的就是作为回调函数

eg:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="jquery.min.js"></script><style>div {position: absolute;width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div></div><script>// 高阶函数-函数可以作为参数传递function fn(a, b, callback) {console.log(a + b);}fn(1, 2, function() {console.log('我是最后调用的');});$("div").animate({left: 500}, function() {$("div").css("backgroundColor", "purple");})</script>
</body>
</html>

5 闭包

5.1 变量作用域

变量根据作用域的不同分为两种:全局变量和局部变量。

函数内部可以使用全局变量。
函数外部不可以使用局部变量。
当函数执行完毕,本作用域内的局部变量会销毁。

5.2 什么是闭包

闭包(closure)指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 闭包(closure)指有权访问另一个函数作用域中变量的函数// 闭包: 我们fun 这个函数作用域 访问了另外一个函数fn 里面的局部变量 numfunction fn() {var num = 10;function fun() {console.log(num);}fun();}fn();</script>
</body>
</html>

5.3 闭包的作用

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 闭包(closure)指有权访问另一个函数作用域中变量的函数// 闭包: 我们fun 这个函数作用域 访问了另外一个函数fn 里面的局部变量 num// fn外面的作用域可以访问fn内部的局部变量// 闭包的主要作用:延伸了变量的作用范围function fn() {var num = 10;function fun() {console.log(num);}return fun;}var f = fn();f();// 类似于// var f = function fun() {//     console.log(num);// }</script>
</body>
</html>

5.4 闭包案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="nav"><li>榴莲</li><li>臭豆腐</li><li>鲱鱼罐头</li><li>大猪蹄子</li></div><script>// 闭包应用-点击li输入当前li的索引号// 1. 我们可以利用动态添加属性的方式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(i);console.log(this.index);}}// 2. 利用闭包的方式得到当前小li的索引号for (var i = 0; i < lis.length; i ++ ) {// 利用for循环创建了4个立即执行函数// 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量(function(i) {// console.log(i);lis[i].onclick = function() {console.log(i); }})(i);}</script>
</body>
</html>

5.5 闭包案例

循环注册点击事件。
循环中的setTimeout().

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="nav"><li>榴莲</li><li>臭豆腐</li><li>鲱鱼罐头</li><li>大猪蹄子</li></div><script>// 闭包应用-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);}</script>
</body>
</html>

5.6 闭包案例

循环注册点击事件。
循环中的setTimeout().
计算打车价格。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><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)); // 23console.log(car.yd(true)); // 33console.log(car.price(1)); // 13console.log(car.yd(false)); // 13</script>
</body>
</html>

5.7 思考题

<!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>
</head><body><script>// 思考题 1：var name = "The Window";var object = {name: "My Object",getNameFunc: function() {return function() {return this.name;};}};console.NameFunc()())var f = NameFunc();// 类似于var f = function() {return this.name;}f();// 思考题 2：// var name = "The Window";　　// var object = {　　　　//     name: "My Object",//     getNameFunc: function() {//         var that = this;//         return function() {//             return that.name;//         };//     }// };// console.NameFunc()())</script>
</body></html>

5.8 闭包总结

闭包是什么?
闭包是一个函数(一个作用域可以访问另外一个函数的局部变量)
闭包的作用是什么?
延伸变量的作用范围

6 递归

6.1 什么是递归?

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

简单理解:函数内部自己调用自己，这个函数就是递归函数

递归函数的作用和循环效果一样

由于递归很容易发生"栈溢出"错误(stack overflow),所以必须要加退出条件return。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 递归函数: 函数内部自己调用自己 这个函数就是递归函数var num = 1;function fn() {console.log('我要打印6句话');if (num == 6) {return; // 递归里面必须加推出条件}num++;fn();}fn();</script>
</body>
</html>

6.2 利用递归求数学题

求1 * 2 * 3 … * n阶乘

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * .. nfunction fn(n) {if (n == 1) {return 1;}return n * fn(n - 1);}console.log(fn(3));console.log(fn(4));// 详细思路 假如用户输入的是3// return 3 * fn(2)// return 3 * (2 * fn(1))// return 3 * (2 * 1)// return 3 * (2)// return 6</script>
</body>
</html>

求斐波那契数列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 利用递归函数求斐波那契数列(兔子序列)  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));console.log(fb(6));</script>
</body>
</html>

6.3 利用递归求:根据id返回对应的数据对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var data = [{id: 1,name: '家电',goods: [{id: 11,gname: '冰箱',goods: [{id: 111,gname: '海尔'}, {id: 112,gname: '美的'}, ]},{id: 12,gname: '洗衣机'}]}, {id: 2,name: '服饰'}];// 我们想要做输入id号 就可以返回的数据对象// 1. 利用forEach去遍历里面的每一个对象function getID(json, id) {var o = {};json.forEach(function(item) {// console.log(item); // 2个数组元素if (item.id === id) {o = item;} else if (ds && ds.length > 0) {o = ds, id);}});      return o;}console.log(getID(data, 1));console.log(getID(data, 2));;console.log(getID(data, 11));;console.log(getID(data, 12));;console.log(getID(data, 111));;console.log(getID(data, 112));;</script>
</body>
</html>

6.4 浅拷贝和深拷贝

浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用.
深拷贝拷贝多层，每一级别的数据都会拷贝.
Object.assign(target,…sources) es6新增方法可以浅拷贝

浅拷贝:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var obj = {id: 1, name: 'yaya',msg: {age: 18}};var o = {};// for (var k in obj) {//     // k是属性名 obj[k]是属性名//     o[key] = obj[key];// }// console.log(o);// o.msg.age = 20;// console.log(obj);console.log('----------------');Object.assign(o, obj);console.log(o);o.msg.age = 20;console.log(obj);</script>
</body>
</html>

深拷贝:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var obj = {id: 1,name: 'yaya',msg: {age: 18},color: ['pink', 'red']};var o = {};// 封装函数function deepCopy(newobj, oldobj) {for (var k in oldobj) {// 判断属性值属于哪种类型// 1. 获取o属性值 oldobj[k]var item = oldobj[k];// 2. 判断这个值是否为数组if (item instanceof Array) {newobj[k] = [];o.color = [];} else if (item instanceof Object) {// 3. 判断这个值是否是对象newobj[k] = {};deepCopy(newobj[k], item);} else {// 4. 属于简单数据类型newobj[k] = item;}   }}deepCopy(o, obj);console.log(o);var arr = [];console.log(arr instanceof Object);o.msg.age = 20;console.log(obj);</script>
</body>
</html>

本文发布于:2024-01-31 01:26:11，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170663557424347.html

上一篇：【算法练习】查找树中元素

下一篇：vue学习53~60（Vue组件化编程）

标签：递归函数高阶定义模式

留言与评论（共有 0 条评论）