目录
8.获取计算后样式—getComputedStyle(el)
函数的基本概念、声明及调用；函数作用域、作用域链、闭包；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指向
-
<script>
-
function fn(a,b){
-
console.log(
this,
arguments);
-
}
-
//直接调用函数，this指向window
-
console.log(
"直接调用函数，this指向window:");
-
fn(
1,
2);
//window
-
-
//使用函数的bind方法
-
console.log(
"使用函数的bind方法，返回新的函数:");
-
var fn2 = fn.bind(
document,
3,
4);
-
console.log(fn2 == fn);
//false 新函数和旧函数不是同一个
-
-
console.log(
"原函数的this指向:");
-
fn(
5,
6);
//原函数的this指向不变，依然是window，且还可以继续调用bind方法
-
-
console.log(
"新的函数的this指向:");
-
console.log(
"如果新的函数调用时传入新的参数，会将绑定的参数和新传入的参数进行合并:");
-
fn2(
7,
8);
//3,4,7,8 新函数的this指向即原函数绑定的this指向
-
-
//新函数的this指向在修改原函数this指向时就已经被绑定，一旦被绑定不能再次修改,且被绑定的参数也不能再被修改
-
//只是如果调用新函数时传入新参数，会合并两次的参数
-
console.log(
"新函数的this指向再修改原函数this指向时就已经被绑定，一旦被绑定不能再次修改:");
-
fn2.call(
window,
9,
0);
//这里即使再次更改this指向，fn2新函数的this指向永远不会再改变
-
-
//再次调用fn的bind方法
-
console.log(
"再次调用fn的bind方法，返回新的函数:");
-
var fn3 = fn.bind(
document.body,
'a',
'b');
-
console.log(fn3 == fn);
-
fn3(
'c',
'd');
-
</script>
结果：
16.4 bind方法原理分析：
为什么调用bind生成的新函数，this指向被绑定后就不能再绑定了？bind方法在ES5.1后才出来，如果想实现此功能，可以自己写可以再次绑定的bind方法。
自己实现bind方法：
参数：fn 要绑定this函数；_this返回新函数this指向谁
-
<script>
-
//为什么调用bind生成的新函数，this指向被绑定后就不能再绑定了
-
//自己实现bind方法的原理
-
//fn要绑定的新函数，_this给新函数绑定的this指向，...arg传参（展开运算符ES6新增）
-
function bind(fn,_this,...arg){
-
return
function(...args2){
-
fn.call(_this,...arg,...args2);
-
};
-
}
-
-
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
