执行环境 & 作用域 & 闭包
执行环境 , 作用域 , 闭包 , 闭包应用
执行环境
- 执行环境定义了 当前环境的 变量或函数 有权访问的其他数据，决定了它们各自的行为。我们无法访问到这个对象, 但是解析器可以
- 环境中定义的所有==变量和函数== 储存在与之相关的 ==变量对象==中,是如何存在的呢?看第三点
-
执行环境 里有一个与之关联的 变量对象
- 全局执行环境中的变量对象 : 在浏览器中 , window对象被认为是 全局执行环境 , 变量对象 就是window对象,所有的全局变量和函数都是作为window对象的属性和方法创建的(结合这个例子理解第一点, 因为里面存在, 所有有权访问)
#全局执行环境中定义的 变量 a
var a = "shayu"
# 成为了window对象中的 属性
-
函数 执行环境中的 变量对象 : 变量对象在函数中有另外一个名字==活动对象== , 活动对象是在函数调用时创建的一个内部变量;
每个函数都有自己的执行环境，当执行流进入一个函数时，函数的执行环境就会被推入一个执行环境栈中。而在函数执行之后，栈将执行结束的函数的执行环境弹出，把控制权返回给之前的执行环境。
作用域链
JS中什么都是对象,函数也不例外
作用域链是函数的一个属性 [[Scope]]，这个属性就指向了这个函数的作用域链。
作用域链与一个执行环境相关，作用域链用于变量查找。
原型链是用于属性和方法的查找
内部函数可以访问外部函数的局部变量 , 即使外部函数已经执行结束
function foo() {
let a = 20;
function inner() {
console.log(a);
}
return inner
}
let f = foo();
f()
//内部函数可以访问外部函数的局部变量 , 即使外部函数已经执行结束
function foo() {
let a = 20;
function inner() {
console.log(a);
}
a = 30;
return inner
}
let f = foo();
f()
闭包
广义上的闭包:
只要有一个函数 , 访问了这个函数外的变量 , 那么这个函数就是闭包
狭义上的闭包:
如果一个函数,访问了他的==外部函数==的==局部变量,==那么这个函数就是一个闭包
var a = 10;
function foo(){
var b = 20;
(function (){
console.log(b)
})()
}
闭包的特点:
闭包可以访问它的外部函数作用域中的任何的变量 , 而且访问到的变量的值一定是最新的值;即使外部函数执行结束了,也能访问到外部函数的局部变量
var a = 10;
function foo(){
var b = 20;
(function (){
console.log(b)
})()
b = 30
}
闭包的应用:
1. 返回外部函数的局部变量
2. 事件循环赋值问题
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
console.log(i);
}
}
问题 : 点击每个按钮都是返回3
原因 : 每个按钮访问的i都是最新的i,也就是循环执行完毕后,此时的i等于3
解决方案1:
闭包: 把内部返回函数封装进一个匿名函数中,匿名函数中的变量对象中存储着每一轮的
i, 每次访问的也就是固定的i了
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = (function (i) {
return function () {
console.log(i);
}
})(i)
}
解决方案2 :
把要访问的值 , 存在一个不会被更改的地方
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onclick = function () {
console.log(this.index);
}
}
解决方案3:
var ---> let
var btns = document.querySelectorAll("button");
//把var 改成 let-+
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
console.log(i);
}
}
3. 使用闭包封装对象:
function foo() {
var p = {
name:"李四",
age : 40
};
return {
getName : function () {
return p.name
},
setName:function (value) {
p.name = value;
return p.name
},
setAttr : function (key,value) {
p[key] = value ;
},
getAttr : function (key) {
return p[key]
}
}
}
var p = foo();
console.log(p.setName("张三"));
console.log(p.getName());
p.setAttr("sex","男")
console.log(p.getAttr("sex"));
4. 高阶函数
如果一个函数接受一个或多个函数作为参数,或者可以返回一个函数,则这样的函数就叫高阶函数
常见高阶函数: setTimeout ,setInterval
map , reduce, filter
1. arr.prototype.map
map()方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
//map
var arr = [1,4,9]
console.log(arr.map(function (x) {
return x**2
}
));
参数:
-
callback回调函数生成新数组元素的函数，使用三个参数：
currentValue::callback的第一个参数，数组中正在处理的当前元素。index:callback的第二个参数，数组中正在处理的当前元素的索引。array:callback的第三个参数，map方法被调用的数组。 -
thisArg可选的。执行
callback函数时 使用的this值。
返回值:
一个新数组，每个元素都是回调函数的结果。
2. arr.prototype.reduce
reduce()方法是对数组中的每个元素开始执行给定函数 , 构建一个最终返回值
//reduce
//求10的阶乘
let arr = new Array(10);
arr.fill(10);
let value = arr.reduce(function (a,value,index) {
return a * (index+1)
},1);
console.log(value);
参数:
-
callback回调函数 ; Function类型回调函数默认支持四个参数
prevuousValue: 上一次执行callback的返回值;currentValue: 数组中当前被处理的元素;index: 当前被处理的元素的索引值;arry:调用reduce()方法的数组本身 initualValue: 初始值 ; 可选/任意类型;作为首次调用callback时的第一个参数;
3.arr.prototype.filter
filter()方法对数组中的每一项元素执行给定函数，并返回一个由执行该函数时返回 true 的元素组成的新数组。
var arr1 = [1,1,3,3,41,41254,35213,33,33,14,56,7];
//filter 过滤
var a1 = arr1.filter(function (ele,index,arr1) {
//函数里返回true的留下
return ele % 2 == 0;
})
参数:
-
cellback回调函数回调函数默认支持三个函数; 并且会返回一个布尔值;:
ele: 遍历的数组元素index: 元素对应的索引arr: 数组的本身?
thisArg: 调用callback的this值
返回值:
filter() 方法的会返回一个Arry类型的值 ;是由 每次执行callback函数并且返回true的元素组成的一个新数组;如果所有元素都是返回false;则返回空数组[ ]
