50~75(函数的定义何调用+this+严格模式+高阶函数+闭包+递归)
1 函数的定义和调用 1.1 函数的定义方式 函数声明方式关键字(命名函数)函数表达式(匿名函数)new ()
var fn = new (‘参数1’, ‘参数2’…,‘函数体’)
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>Documenttitle>
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. 绑定事件函数btn.onclick = 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');btn.onclick = 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(, 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>Documenttitle>
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(, [])
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>Documenttitle>
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 (, arg1, arg2, …)
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>Documenttitle>
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');// btn.onclick = 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 什么是严格模式
除了提供正常模式外,还提供了严格模式( mode)。ES5的严格模式是采用具有限制性变体的一种方式,即在严格的条件运行JS代码。
严格模式在IE10以上版本的浏览器中才会被支持, 旧版本浏览器中会被忽略。
严格模式对正常的语义做了一些更改:
消除了语法的一些不合理、不严谨之处,减少了一些怪异行为。消除代码运行的一些不安全之处,保证代码运行的安全。提高编译器效率,增加运行速度。禁用了在的未来版本中可能会定义的一些语法,为未来新版本的做好铺垫。比如一些保留字如: class, enum, , , , super不能做变量名 3.2 开启严格模式
严格模式可以应用到整个脚本或个别函数中。因此在使用时,我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。
为脚本开启严格模式
为整个脚本文件开启严格模式,需要在所有语句之前放一个特定语句"use ";('use ';)
<script>'use strict';console.log('这是严格模式');
</script>
有的基本是严格模式,有的脚本是正常模式,这样不利于文件合并,所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他脚本文件。
为函数开启严格模式
要给某个函数开启严格模式,需要把"" ; (或'use ';)声明放在函数体所有语句之前。
<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>Documenttitle>
head>
<body><script>'use strict';// 下面的js代码就会按照严格模式执行代码script><script>(function() {'use strict';})();script><script>// 此时只是给fn函数开启严格模式function fn() {'use strict';// 下面的代码按照严格模式执行}ufunction fun() {// 里面的还是按照普通模式执行}script>
body>
html>
3.3 严格模式中的变化
严格模式对的语法和行为,都做了一些改变。
变量规定 严格模式下this指向问题 函数变化
