执行环境 & 作用域 & 闭包

执行环境 & 作用域 & 闭包

执行环境 , 作用域 , 闭包 , 闭包应用

执行环境

1. 执行环境定义了 当前环境的 变量或函数 有权访问的其他数据，决定了它们各自的行为。我们无法访问到这个对象, 但是解析器可以
2. 环境中定义的所有==变量和函数== 储存在与之相关的 ==变量对象==中,是如何存在的呢?看第三点
3. 执行环境 里有一个与之关联的 变量对象
   
   1. 全局执行环境中的变量对象 : 在浏览器中 , window对象被认为是 全局执行环境 , 变量对象 就是window对象,所有的全局变量和函数都是作为window对象的属性和方法创建的(结合这个例子理解第一点, 因为里面存在, 所有有权访问)

#全局执行环境中定义的 变量 a
var a = "shayu"    
# 成为了window对象中的 属性

1. 函数 执行环境中的 变量对象 : 变量对象在函数中有另外一个名字==活动对象== , 活动对象是在函数调用时创建的一个内部变量;

   每个函数都有自己的执行环境，当执行流进入一个函数时，函数的执行环境就会被推入一个执行环境栈中。而在函数执行之后，栈将执行结束的函数的执行环境弹出，把控制权返回给之前的执行环境。

---

作用域链

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;则返回空数组[ ]