JS函数详解

最新推荐文章于 2024-07-03 14:07:58 发布

平安喜乐Alice

最新推荐文章于 2024-07-03 14:07:58 发布

阅读量182

点赞数

分类专栏： js 文章标签： js

原文链接：https://blog.csdn.net/qq_34569497/article/details/95379260

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

转自：https://blog.csdn.net/qq_34569497/article/details/95379260

5.函数的不定参（可变参）—关键字arguments

6.函数返回值

7.封装获取元素的方法

8.获取计算后样式—getComputedStyle(el)

8.JS预解析机制（变量提升Hoisting）

16.2 function.apply()

16.3 function.bind()

16.4 bind方法原理分析：

函数的基本概念、声明及调用；函数作用域、作用域链、闭包；this指向及修改和绑定this指向等。

1.函数概念，声明及调用

JS中的函数：把一段需要重复使用的代码，用function语法包起来，方便重复调用，分块和简化代码。复杂一点的，也会加入封装、抽象、分类等思想。

声明方式：严格意义上两种方式，但还有匿名函数

方式一：

function 方法名(){
     //要执行的代码
}

方式二：ES6中声明方式箭头函数，()=>{}
方式三：匿名函数，将函数存到变量里 var func = function(){};

函数调用：两种方式调用

调用方式一：名字(); 函数可以多次调用

//函数声明
function fn(){
    console.log(1);
}
 
//函数的调用
fn();

调用方式二：在事件中调用，直接写函数名，不使用括号

//函数声明
function fn(){
    console.log(1);
}
 
//函数在事件中的调用
document.onclick = fn;

2.函数表达式（匿名函数）

函数表达式：就是把函数存到变量里。

匿名函数：没有名字的函数；

匿名函数在使用时只有两种情况：

匿名函数自执行：声明后不需要调用就直接执行

(function(){
    console.log("匿名函数自执行");
})();

函数表达式：把函数存到变量，或将函数存到数组的对应位置里等，调用时通过变量或数组对应位置进行调用。调用时需要写括号。

//2，函数表达式：把函数存到变量或数组等里，调用时通过变量进行调用
var fn = function(){
    console.log("函数表达式：将函数存到变量里");
};
fn();//调用时需要写括号
 
//2，函数表达式：把函数存到数组第0位，调用时通过数组第0位进行调用
var arr = [];
arr[0] = function(){
     console.log("函数表达式：将函数存到数组的对应位置");
};
arr[0]();//调用时需要写括号要写括号

结果：

事件函数扩展：给元素添加事件的说法是不正确的。事件时元素本身就具有的特征，只是触发事件后，默认没有相关的一些处理。这种操作其实就是给元素的某个事件添加一个事件处理函数。当事件被触发后，判断到属于该事件类型，就触发该事件函数的处理函数。

可以通过console.dir()把对象的所有属性和方法打印出来，查看对象或元素本身具有的事件。

<script>
//事件时元素本身就具有的特征，只不过，触发事件后，默认没有相关的一些处理。事件函数其实就是给元素的某个时间添加一个事件处理函数。
//可以通过console.dir()把对象的所有属性和方法打印出来
document.onclick = function(){
console.log("事件的处理函数");
};
//当被触发后，判断到属于该事件类型，就触发该事件函数的处理函数
if(typeof document.onclick == "function"){
document.onclick();
}
</script>

结果：

3.函数传参

获取元素，最好从父级元素获取，全部从document中获取，可能会出现混乱。

形参：形式上的参数——给函数声明一个参数；
实参：实际的参数——在函数调用时给形参赋的值

function func(形参1,形参2){
//函数执行代码
}
func(实参1,实参2);//调用时传参

什么时候使用到传参？当有两段代码本身的功能极其相似，只有个别地方不一样时，就可以把两段代码合并成一个函数，然后把两段代码中不一致的内容通过传参传进去。

案例：自定义（多个模块）选项卡封装

<!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">
<script src="../index.js"></script>
<title>选项卡封装</title>
<style>
body { margin: 0; padding: 0; }
.tab .active { background: red; }
.cont div { display: none; }
.cont .show { background: #000; font-size: 60px; color: white; width: 220px; height: 220px; display: block; }
</style>
</head>
<body>
<div id="wrap1" class="wrap">
<div class="tab">
<button class="active">选项卡一</button>
<button>选项卡二</button>
<button>选项卡三</button>
</div>
<div class="cont">
<div class="show">内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</div>
<div id="wrap2" class="wrap">
<div class="tab">
<button class="active">选项卡一</button>
<button>选项卡二</button>
<button>选项卡三</button>
</div>
<div class="cont">
<div class="show">内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</div>
<div id="wrap3" class="wrap">
<div class="tab">
<button class="active">选项卡一</button>
<button>选项卡二</button>
<button>选项卡三</button>
</div>
<div class="cont">
<div class="show">内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
</div>
<script>
//通过id获取元素
/*
var wrap1 = _id("wrap1");
var wrap2 = _id("wrap2");
var wrap3 = _id("wrap3");
tab(wrap1);
tab(wrap2);
tab(wrap3);
*/
//通过数组方式获取一组
var wraps = _selectorAll(document,".wrap");//注意这里的parent父级已经是body了，所以最好使用document
for (var i = 0; i < wraps.length; i++) {
tab(wraps[i]);
}
function tab(wrap){
var btn = _selectorAll(wrap,".tab button");
var divs = _selectorAll(wrap,".cont div");
var num = 0;//记录当前样式
for (var i = 0; i < btn.length; i++) {
btn[i].index = i;
btn[i].onclick = function(){
//清除当前样式
btn[num].classList.remove("active");
divs[num].classList.remove("show");
this.classList.add("active");
divs[this.index].classList.add("show");
num = this.index;
};
}
}
</script>
</body>
</html>

index.js:

function _id(idName){
return document.getElementById(idName);
}
function _selector(parent,selector){
return parent.querySelector(selector);
}
function _selectorAll(parent,selectors){
return parent.querySelectorAll(selectors);
}

结果：

4.修改input的值

value和innerHTML都可以用来获取和修改元素的值（或内容）；value只能获取特定的textarea和input的值，但是innerHTML可以获取所有HMTL元素的值。

不同之处如下：
1）value可以用来修改（获取）textarea和input的value属性的值或元素的内容；
2）innerHTML用来修改（获取）HTML元素（如div）html格式的内容。

<!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">
<script src="../index.js"></script>
<title>修改input的值</title>
<style>
.wrap input, .wrap button { display: none; }
li { height: 30px; line-height: 30px; }
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>
<span id="first">这是第一个列表</span>
<a href="javascript:;">修改</a>
<input type="text">
<button>确定</button>
</li>
<li>
<span>这是第二个列表</span>
<a href="javascript:;">修改</a>
<input type="text">
<button>确定</button>
</li>
<li>
<span>这是第三个列表</span>
<a href="javascript:;">修改</a>
<input type="text">
<button>确定</button>
</li>
<li>
<span value="asf">这是第四个列表</span>
<a href="javascript:;">修改</a>
<input type="text">
<button>确定</button>
</li>
</ul>
</div>
<script>
var lis = _selectorAll(document,"li");
for (var i = 0; i < lis.length; i++) {
modify(lis[i]);
}
function modify(li){
var modify = _selector(li,"a");
var span = _selector(li,"span");
var input = _selector(li,"input");
var btn = _selector(li,"button");
//1.点击修改，“这是第一个列表”span标签隐藏，“修改”标签隐藏；input和确定按钮显示
modify.onclick = function(){
span.style.display = "none";
this.style.display = "none";
input.style.display = "inline-block";
btn.style.display = "inline-block";
//注意：span标签只能通过.innerHTML获取元素的值，而不能通过.value
//2.将span标签的文字内容赋值给input输入框
input.value = span.innerHTML;
};
//3.点击确定按钮，先验证是否为空；再还原会span标签和修改a标签
btn.onclick = function(){
var txt = input.value;
if(txt === ""){
alert("请输入内容");
}else{
input.style.display = "none";
this.style.display = "none";
span.style.display = "inline-block";
modify.style.display = "inline-block";
//4.将修改后的值赋给span标签
span.innerHTML = txt;
}
};
}
</script>
</body>
</html>

结果：

5.函数的不定参（可变参）—关键字arguments

案例：购物车商品累计。事先不知道用户买多少商品

不定参（可变参）使用关键字：arguments，代表所有实参的集合。通过下标获取参数的每一位；通过length获取实参的个数；

集合是类数组，可以使用下标，但是没有数组中的各种方法。

<!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>可变参（不定参）：arguments</title>
</head>
<body>
<script>
//arguments 代表所有实参的集合（类数组），可以通过下标获取各个实参，通过length获取集合长度
function args(){
console.log(arguments);
console.log("arguments的各个参数为：");
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
args(23,45,999,10.90,"can","不定参");
</script>
</body>
</html>

结果：

6.函数返回值

函数返回值即函数执行之后的返回结果。

所有函数都会有函数返回值即函数执行后一定会返回一个结果，如果没有定义默认返回undefined；
在函数中，return后定义返回值；
在函数中，return之后的代码就不会再执行了
return只能用于函数中，用在其他地方会报错

<script>
function func1(){
console.log("函数func1执行内容");
}
function func2(){
console.log("函数func2执行内容");
return 1;
var a = 2;
console.log(a);
}
//如果没有定义默认返回undefined
console.log("func1返回结果："+func1());//undefined
console.log("func2返回结果"+func2());//1
</script>

结果：发现return后的代码没有继续执行

7.封装获取元素的方法

封装通过id/CSS选择器获取（一般在父级下获取，所以传入父级和选择器名字）获取多个元素的方法，然后返回获取到的值

//通过id名获取元素
function _id(idName){
return document.getElementById(idName);
}
//通过CSS选择器获取一个元素
function _selector(parent,selector){
return parent.querySelector(selector);
}
//通过CSS选择器获取一组元素
function _selectorAll(parent,selectors){
return parent.querySelectorAll(selectors);
}

使用：

var wrap1 = _id("wrap1");
var wrap2 = _id("wrap2");
var wrap3 = _id("wrap3");
var wraps = _selectorAll(document,".wrap");
var btn = _selectorAll(wraps,".tab button");
var divs = _selectorAll(wraps,".cont div");

8.获取计算后样式—getComputedStyle(el)

点击时获取box的宽度，在原有基础上+100

从style中获取的是行间样式，但是通常样式不会写在行间；
获取计算后样式：getComputedStyle(el)获取元素的计算后样式。属于window的方法，即window.getComputedStyle(el)。在JS中使用window下的方法时，window可以不写；
getComputedStyle(el)方法不兼容IE6,7,8；
计算后样式：优先级最高的样式，即当前显示出来的样式
使用getComputedStyle(el)是获取window下所有的样式，getComputedStyle(el)['样式名']即可获取到特定样式
写样式名时，使用驼峰样式的名字（否则IE下会有兼容问题），如margin-left必须写成marginLeft。
IE下获取元素的计算后样式，需要使用el.currentStyle['样式名']
兼容IE和其他浏览器：判断el.currentStyle返回true即表示IE，否则就是其他浏览器，然后在对应浏览器下使用对应方法
获取计算后样式会经常使用，因此可以封装成方法，进行复用
getComputedStyle(el)和el.currentStyle获取不到伪元素的样式，因为伪元素不是DOM的内容
伪类样式计算后样式可以获取到，伪元素获取不到

标准浏览器下：transition:.5s;设置过渡效果的时间，否则div会直接变到从100+100的宽度

<!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">
<script src="../index.js"></script>
<title>getComputedStyle(el)</title>
<style>
#box { width: 100px; height: 100px; background: red; transition:.5s; }
</style>
</head>
<body>
<div id="box"></div>
<script>
//需求：点击div，div的width在原有基础上+100px
var box = _id("box");
var ss = 0;
box.onclick = function(){
//直接获取box.style.width是获取不到的，因为样式时写到style标签，而非行间样式
//console.log(box.style.width);//获取不到值
//使用getComputedStyle(el)['样式名']即可获取到当前显示出来的样式
var curStyle = getComputedStyle(box)['width'];
//获取到的结果是“100px”，需要将其进行转为数字。width最后有可能会有小数点，所以最好使用parseFloat()。大多数情况下parseInt()亦可
//但是parseInt(curStyle);才能去掉px进行相加
//注意px前面的数字千万不要加引号
this.style.width = parseInt(curStyle) + 100 + 'px';
};
</script>
</body>
</html>

结果：

不断点击后：

兼容问题：发现在IE6,7，8下并不支持getComputedStyle(el)方法

解决：通过el.currentStyle判断返回true代表在IE浏览器下，为false就不是在IE浏览器下。在IE浏览器下必须使用el.currentStyle才行

//解决浏览器兼容问题：通过el.currentStyle判断返回true代表在IE浏览器下，为false就不是在IE浏览器下。在IE浏览器下必须使用el.currentStyle才行
function currStyle(el,styleName){
// var curStyle = '';
// if(el.currentStyle){
// curStyle = el.currentStyle[styleName];
// }else{
// curStyle = getComputedStyle(el)[styleName];
// }
// return curStyle;
//使用三元获取返回值
return el.currentStyle?el.currentStyle[styleName]:getComputedStyle(el)[styleName];
}

<!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">
<script src="../index.js"></script>
<title>getComputedStyle(el)</title>
<style>
#box { width: 100px; height: 100px; background: red; transition:.5s; }
</style>
</head>
<body>
<div id="box"></div>
<script>
//需求：点击div，div的width在原有基础上+100px
var box = _id("box");
box.onclick = function(){
//直接获取box.style.width是获取不到的，因为样式时写到style标签，而非行间样式
//console.log(box.style.width);//获取不到值
//使用getComputedStyle(el)['样式名']即可获取到当前显示出来的样式
// var curStyle = getComputedStyle(box)['width'];
var curStyle = currStyle(box,'width');
//获取到的结果是“100px”，需要将其进行转为数字。width最后有可能会有小数点，所以最好使用parseFloat()。大多数情况下parseInt()亦可
//但是parseInt(curStyle);才能去掉px进行相加
//注意px前面的数字千万不要加引号
this.style.width = parseInt(curStyle) + 100 + 'px';
};
</script>
</body>
</html>

结果：

8.JS预解析机制（变量提升Hoisting）

JS预解析机制（变量提升（Hoisting））：JS在读取到一个script标签（或者一个函数作用域）时，会先进行一个预解析的过程，在这个过程中，会把var声明的变量和function声明的函数体，提升到整个scriptt标签（或者一个函数作用域）最前边去。在预解析完之后，JS才会从上到下一行一行解析代码并执行。

var在预解析时，会把声明提升到最前边（赋值前打印返回undefined）。只提升声明，不会把赋值过程进行提升。
function的函数体在预解析时，会把整个函数体提升至最前边。（函数体：function fn(){ console.log(1);}）
函数表达式（函数表达式：var fn = function(){};）只会提升函数表达式的声明，不会执行（真正执行函数表达式前调用会返回undefined）
在预解析时，会先预解析var（包括变量声明和函数表达式的变量声明），把var放在最前面，然后再预解析function，所以当var和function重名时，function会覆盖var;

//JS var变量的预解析
console.log("var变量的预解析："+a);//undefined
var a = 0;
//JS函数体的预解析
console.log("函数体的预解析:"+fn);
function fn(){
console.log("函数");
}
//JS函数表达式的预解析
console.log("函数表达式的预解析:"+fnn);
var fnn = function(){
console.log("函数表达式");
};

结果：

在预解析时，会先预解析var，把var放在最前面，然后再预解析function，所以当var和function重名时，function会覆盖var：

/*
解析过程：先预解析var声明的a,再预解析函数体a，后面覆盖前面，所以最后结果是function函数体
var a;
function a(){console.log("函数a");};//此函数体解析后会覆盖变量a
*/
console.log(a);
var a = 0;
function a(){
console.log("函数a");
}

结果：

JS预解析示例：

//JS预解析过程：遇到Script标签或一个函数作用域，会先进行预解析，先预解析var声明的变量(包括普通变量声明和函数表达式声明)，再声明function函数体，如果有重名function声明会覆盖var声明
/*
预解析之后代码：
var a;//变量a
var a;//函数表达式a(函数表达式也是var声明)
function a(){//函数体
console.log(1);
};
console.log(a);//打印函数体a
var a = 10;
console.log(a);//10
console.log(a);//10
a = function(){
console.log(2);//打印函数表达式a
};
console.log(a);
*/
console.log(a);
var a = 10;
console.log(a);
function a(){
console.log(1);
};
console.log(a);
var a = function(){
console.log(2);
};
console.log(a);

结果：

JS预解析机制不是良好的编码习惯，不利于代码维护，建议不要使用，编码时建议先声明，再使用。

扩展：从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。

ES6之后就不能像JS预解析这么编写JS代码了。

9.作用域

通常来说一段程序代码中使用的变量和函数并不总是可用的，限定其可用性的范围即作用域，作用域的使用提高了程序逻辑的局部性，增强程序的可靠性，减少名字冲突。

通俗的说，作用域：数据起作用的范围（某条数据可以在什么范围内使用）

前端权威官方MDN：https://developer.mozilla.org/en-US/docs/Glossary/Scope

作用域的分类：

- 全局作用域：通过var或function声明在全局（声明在任意函数之外和代码块之外）中的数据，在全局的任意地方都可以调用或修改（即全局变量）和在window下的属性
- 局部作用域：

函数作用域：声明在函数内部的某个数据（var，function，参数）,就只能在函数内部使用（函数的局部作用域）
块级作用域（ES6新增）

全局作用域：

//声明在全局中的变量
var a = 0;
console.log(a);//可在全局任意地方调用
function fn(){
console.log(a);//可在函数中调用
a = 10;//可在任意地方修改全局中的变量
}
fn();
console.log(a);

结果：

10.window

在JS中，默认情况下 var声明的全局变量和function声明的全局函数会挂载在window上(所以要避免声明全局变量和全局函数)
在JS中，默认全局数据都会保存在window下（ES6之前）
另外window是JS在浏览器里的顶层对象，所以window的属性和方法也都是全局的
在JS中，调用window下的属性和方法，默认可以不写window，所以如果在函数里面声明变量没有写var，会把其当做window的一个属性；（不规范写法，要避免）

//var声明的全局变量和function声明的全局函数，都默认挂载在window上
var a = 0;
console.log(window);
function fn(){
b = 10;
console.log(1);
}
fn();
console.log(b);//此处b没有写声明的var所以，b=10即为window.b = 10;相当于挂载在window上的全局变量
//在JS中，默认全局数据都会保存在window下
//window是浏览器的最顶层对象，所以默认window下的属性和方法都是全局的。所以window下的方法和属性，默认可以不写window

结果：全局变量a和全局函数fn()都默认挂载在window上。而且，此处b没有写声明的var，所以，b=10即相当于window.b = 10;也是挂载在window上的全局变量：

11.全局污染（命名冲突问题）

全局变量污染：大家都在全局中写代码，很容易造成命名冲突，导致代码冲突。ES6中代码冲突会直接报错。所以要养成好的习惯不要在全局去声明变量。

<!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>全局污染</title>
</head>
<body>
<div id="list"></div>
<div class="memulist"></div>
<script>
var list = document.getElementById("list");
var list = document.querySelector(".memulist");
console.log(list);
</script>
</body>
</html>

结果：发现最后获取的只有一个元素，所以很容易造成代码冲突

解决：不要声明全局变量

(function(){
var list = document.getElementById("list");
console.log(list);
})();
(function(){
var list = document.querySelector(".memulist");
console.log(list);
})();

结果：

JS中提供了id使用的简便方法，直接调用id名即可：但尽量不要这么写，不规范：

console.log(list);

匿名函数：匿名函数自执行本身就是为了避免在全局写代码，避免冲突的。匿名函数自执行也叫开启一个新的命名空间。即开启新的作用域，此作用域和其他的不会冲突。

12.作用域链（scope chain）

作用域链决定了哪些数据能被函数访问。当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。

作用域链：JS中数据的查找规则。

作用域链查找过程：在JS中我们调用一条数据时，会先在当前作用域进行查找，如果找不到，就从向上找父作用域的数据，还找不到就接着向上，一直找到全局作用域（window对象），window都找不到就报错。

//调用fn()时，在其子函数fn2()被调用时，首先会在fn2()自己的作用域内找变量a
//找不到就在其父级作用域即fn()作用域中找，即a=10，然后打印a=10
function fn(){
var a = 10;
function fn2(){
console.log(a);
}
fn2();
}
fn();

结果：

作用域链查找关系图：

作用域链示例：

<script>
function fn(){
var b = 0;
return function(){
b++;
console.log(b);
};
}
var f = fn();
console.log(f);//ƒ (){ b++; console.log(b); }
f();//1
f();//2
f();//3
fn()();//1
</script>

结果：

解析（函数拆分）三个f()：

注意：这里的var f = fn();是将函数fn()的返回值函数体f(){ b++; console.log(b); };赋给变量f，但是并没有执行该返回值函数体，当f()调用时，便执行了该函数体。f此时是fn的子函数，那它可以访问和更改父级fn的作用域中的b。

b变量会一直赋值，是因为JS的垃圾回收机制决定的，只要检测都有引用存在，就不会释放。

<!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>作用域链示例-函数拆分</title>
</head>
<body>
<script>
// function fn(){
// var b = 0;
// return function(){
// b++;
// console.log(b);
// };
// }
// var f = fn();
// f();//1
// f();//2
// f();//3
// fn()();//1
//这里的var f = fn();是将函数fn()的返回值函数体function(){ b++; console.log(b); };赋给变量f，但是并没有执行该返回值函数体，当f()调用时，便执行了该函数体
//即这里的三个f()相当于，在函数fn()中写了三个子函数，再进行调用
//由于b变量对于fn1(),fn2(),fn3()都是父级变量，所以每次b++都会将b的值+1,所以最后得到的值即1，2，3
function fn(){
var b = 0;
function fn1(){
b++;
console.log(b);
}
fn1();
function fn2(){
b++;
console.log(b);
}
fn2();
function fn3(){
b++;
console.log(b);
}
fn3();
}
fn();
</script>
</body>
</html>

结果：所以执行三个f();和执行三个fn();得到的结果是不一样的。

以上进一步分解：

<script>
// function fn(){
// var b = 0;
// return function(){
// b++;
// console.log(b);
// };
// }
// var f = fn();
// f();//1
// f();//2
// f();//3
// fn()();//1
//这里的var f = fn();是将函数fn()的返回值函数体function(){ b++; console.log(b); };赋给变量f，但是并没有执行该返回值函数体，当f()调用时，便执行了该函数体
//即这里的三个f()相当于，在函数fn()中写了三个子函数，再进行调用
//由于b变量对于fn1(),fn2(),fn3()都是父级变量，所以每次b++都会将b的值+1,所以最后得到的值即1，2，3
function fn(){
var b = 0;
// function fn1(){
// b++;
// console.log(b);
// }
// fn1();
// function fn2(){
// b++;
// console.log(b);
// }
// fn2();
// function fn3(){
// b++;
// console.log(b);
// }
// fn3();
function fnn(){
b++;
console.log(b);
}
fnn();
fnn();
fnn();
}
fn();
</script>

结果：所以调用三次f()和再fn()函数里执行三次fnn()是一样的

函数拆分fn()():

<!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>作用域链示例——函数拆分fn()()</title>
</head>
<body>
<script>
// function fn(){
// var b = 0;
// return function(){
// b++;
// console.log(b);
// };
// }
// var f = fn();
// f();//1
// f();//2
// f();//3
// fn()();//1
//此处的fn()();第一个括号表示执行fn()函数，第二个括号表示执行fn()函数中返回值中的函数，所以fn()()相当于整个fn函数再执行一次
//函数每次调用，都相当于把这个代码复制出来执行了一遍。所以fn()();每次执行都是重新执行一遍代码，相当于以下：
function fn(){
var b = 0;
return function(){
b++;
console.log(b);
};
}
function fnA(){
var b = 0;
return function(){
b++;
console.log(b);
};
}
fn()();//1
fnA()();//1
</script>
</body>
</html>

结果：

函数每次调用，如fn()和fnA()之间没有任何关联，都相当于把这个代码复制出来执行了一遍。

13.闭包

闭包是对作用域链的一种表现和使用。

函数对象可以通过作用域链相互关联起来，函数体内的数据(变量和函数声明)都可以保存在函数作用域内，这种特性在计算机科学文献中被称为“闭包”。既函数体内的数据被隐藏于作用于链内，看起来像是函数将数据“包裹”了起来。从技术角度来说，js的函数都是闭包：函数都是对象，都关联到作用域链，函数内数据都被保存在函数作用域内。

fn()();调用函数后的返回值还是一个函数，也对其进行执行

函数的每次执行之间没有任何关系。每次执行都相当于在JS内部吧代码重新写了一遍。

面试时：闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

闭包：

形式：函数嵌套函数；
作用：子函数可以访问父函数的作用域，但是父级不能访问子级的。

闭包示例：

<!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>闭包</title>
</head>
<body>
<script>
function fn(){
var a = 0;
function fn2(){
console.log(a);//fn2是fn的子函数，所以可以访问父级作用域的a
}
fn2();
}
fn();
console.log(a);//在fn函数作用域外，不能访问其子级作用域fn中的变量a
</script>
</body>
</html>

结果：

闭包应用：i传参给了fn函数，而点击事件是fn函数的子函数，所以也可以获取到fn函数中的i

<!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>闭包应用</title>
</head>
<body>
<button>按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
<script>
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
fn(i);
}
//i传参给了fn函数，而点击事件是fn函数的子函数，所以也可以获取到fn函数中的i
function fn(index){
btns[index].onclick = function(){
console.log(index);
};
}
</script>
</body>
</html>

结果：按钮进行循环后会将当前index传参给fn函数，当点击按钮时，再通过父级作用域获取到父级的index

闭包应用二：（匿名函数自执行方式）页面刷新时解析for循环并将index传给fn，并且立即执行fn函数，当点击按钮时，再通过父级作用域fn获取到index

<script>
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
(function fn(index){
btns[index].onclick = function(){
console.log(index);
};
})(i);
}
//i传参给了fn函数，而点击事件是fn函数的子函数，所以也可以获取到fn函数中的i
// function fn(index){
// btns[index].onclick = function(){
// console.log(index);
// };
// }
</script>

结果：

闭包应用三：点击按钮后，再立即执行一个匿名函数自执行。匿名函数自执行后，得到的是一个函数返回值，当点击时再执行该函数中的内容

<script>
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
//匿名函数自执行后，得到的是一个函数返回值，当点击时再执行该函数中的内容
btns[i].onclick = (function fn(index){
return function(){
console.log(index);
};
})(i);
}
</script>

结果：

14.this当前执行代码的环境对象

默认情况下：

函数外：window
函数内：函数中的this指向谁，取决于这个函数是怎么调用的
严格模式下，默认为undefined

作为对象的属性（方法，事件（方法的一种））调用，指向当前对象
其余情况执行window

<script>
//函数外：window
// 函数内：函数中的this指向谁，取决于这个函数是怎么调用的
// 作为对象的属性（方法）调用，指向当前对象
// 其余情况执行window
function fn(){
console.log(this);
}
//直接调用函数，this代表window
console.log("没有作为对象的属性进行调用，而是直接调用:");
fn();//this指向window
//作为对象的属性或方法调用
//作为对象的属性进行调用
console.log("作为对象的属性进行调用:");
document.fn = fn;
document.fn();//this 执行document
//事件里，把this绑定在事件上
console.log("作为对象的属性(事件)进行调用:");
document.onclick = fn;
document.onclick();//this 执行document
//数组里,把函数放到数组里，再由数组调用，此时this指向当前数组
console.log("作为对象(数组)进行调用:");
var arr = [fn,1,2];
arr[0]();//this指向当前数组
//obj对象里
console.log("作为对象(object对象)进行调用:");
var obj = {
fn:fn
};
obj.fn();//this指向object对象
</script>

结果：

15.严格模式下的this指向

在script标签最上面加上 'use strict';，加上'use strict'后预解析已经不能使用，会报错。

严格模式下的function指向问题：在严格模式下，function如果不是作为对象的属性和方法被调用（即直接调用方法）就指向undefined。

<script>
'use strict';
function fn(){
console.log(this);
};
console.log("严格模式下，函数直接被调用（没有通过函数的属性或方法被调用，this就指向undefined）:");
//严格模式下，函数直接被调用（没有通过函数的属性或方法被调用，this就指向undefined）
fn();
//通过函数的属性或方法被调用，就指向被调用的对象
console.log("通过函数的属性或方法被调用，就指向被调用的对象:");
document.onclick = fn;
document.onclick();
</script>

结果：

16.this指向的修改

16.1 function.call()

function.call(this指向谁，参数1，参数2...)调用函数，并修改函数中的this指向；
执行函数的call方法，会调用该函数，并且修改函数中的this指向；
call中的第0个参数，代表当前函数执行时，函数中的this指向谁
其他参数都是给函数传的实参
注意修改执行为body时，一定要使用document.body

<script>
function fn(a,b){
console.log(this,a,b);
}
//直接执行，this指向window
console.log("直接调用函数，this指向window:");
fn(1,2);//window
//通过call更改当前函数的this指向
//更改this指向为document
console.log("调用函数的call方法,更改this指向document:");
fn.call(document,'a','b');//document
//更改this指向为document.body
console.log("调用函数的call方法,更改this指向document.body:");
fn.call(document.body,'a','b');//body
</script>

结果：

16.2 function.apply()

function.apply(this指向谁，[参数1，参数2...])调用函数，并修改函数中的this指向
指向函数的apply方法，会调用该函数，并且修改函数中的this指向；
apply中的第0个参数，代表当前执行时，函数中的this指向谁；
apply中第1个参数是个数组，数组中代表了我们要往函数中传递的参数；且所有参数只能放在一个数组里，有多个数组时，除了第一个，其他数值的参数不会被接收
apply和call唯一的区别在于，call方法直接在方法里传参，而apply是将所有参数已数组形式进行传递；
注意修改执行为body时，一定要使用document.body

<script>
function fn(a,b){
console.log(this,a,b);
}
//直接调用，this指向window
console.log("直接调用，this指向window:");
fn('s','r');
//调用函数的apply方法,更改this指向为document
console.log("调用函数的apply方法,更改this指向document:");
fn.apply(document,['2','4']);
//调用函数的apply方法,更改this指向document.body
console.log("调用函数的apply方法,更改this指向document.body:");
fn.apply(document.body,['2','4']);
</script>

结果：

16.3 function.bind()

function.bind(指向，参数1，参数2,...)绑定this指向
调用函数的bind方法，会返回一个绑定了this执行的新函数；
第0个参数是bind返回的新函数的this指向
返回新函数的this指向被绑定了，不能再被更改
新函数的this指向在修改原函数this指向时就已经被绑定，一旦被绑定不能再次修改

总结：调用函数的bind方法，会生成新的函数，绑定的this指向是针对新函数的，新函数this指向被绑定后，不能再继续被绑定（call和apply也不行）；如果调用时再传入新的参数，会将新的参数和被绑定的参数进行合并，被绑定的参数会一直存在；而原函数的this指向一直没有变，还可以继续调用bind方法，生成新的函数，同时给新的函数绑定新的this指向