函数作用域, 块级作用域和词法作用域

初衷：

越来越觉得JavaScript神奇了……

内容：

JavaScript作用域： 可访问变量、对象以及函数的集合。

1. 函数作用域

指在函数内声明的所有变量在函数体内始终是可见的，可以在整个函数的范围内使用及复用。

2. 块级作用域

指在变量声明的代码段之外是不可见的。参考：ES6的let以及const。

3. 词法作用域

指函数在定义它们的作用域里运行，而不是在执行它们的作用域里运行.而JavaScript采用的就是词法作用域，也称为静态作用域。

var name = 'Mr.Han';
function test(){
    alert(name);//undefined
    var name = 'Mrs.Han';
    alert(name);//'Mrs.Han'
}
test();
复制代码

var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar();//1
复制代码

---

4. 其他的：

4.1.解构赋值

4.1.1 对象解构赋值

快速获取对象的指定属性:

var person = {
    name: '小明',
    age: 18,
    sex: '男'
};
var {name, age, sex} = person;
// name, age, passport分别被赋值为对应属性:
console.log('name : ' + name + ', age : ' + age + ', sex : ' + sex);//name : 小明, age : 18, sex : 男
复制代码

如果取上述对象中不存在的属性，依旧返回undefined，但我们可以给它一个默认值，比如：

var person = {
    name: '小明',
    age: 18,
    sex: '男'
};
var {name, age, sex, height="1.7"} = person;
console.log('name : ' + name + ', age : ' + age + ', sex : ' + sex+ ', height : ' + height);//name : 小明, age : 18, sex : 男, height : 1.7
复制代码

这样就给person对象中不存在的属性height增加了一个默认值1.7.

4.1.2 数组解构赋值

var [x, y, z] = [100, 200, 300];
// x, y, z分别被赋值为数组对应元素:
console.log('x : ' + x + ', y : ' + y + ', z : ' + z);//x : 100, y : 200, z : 300
复制代码

多个变量要用 [...] 括起来。

4.2 闭包

简单理解：就是可以读取其他函数内部变量的函数(亦或者：定义在一个函数内部的函数)。

4.2.1 看这个例子：

var name = "The Window";

var object = {
    name : "My Object",
    getNameFunc : function(){
        return function(){
            return this.name;
        };
    }
};
console.log(object.getNameFunc()());//"The Window"
复制代码

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
        var that = this;
        return function(){
            return that.name;
        }; 
    }
};
console.log(object.getNameFunc()());//"My Object"
复制代码

4.2.2 依次输出数字0-9：

for(var i = 0;i < 10;i++){
   setTimeout(()=>{
        console.log(i),1000;
    })
}
复制代码

输出结果：10个10.

修改一下：

for(var i = 0;i < 10;i++){
    (function(arg){
         setTimeout(()=>{
            console.log(arg),1000;
        })
    })(i);
}
复制代码

加一层闭包，将i以函数参数形式传递给内层函数。

for(var i = 0;i < 10;i++){
    (function(){
        var temp = i;
         setTimeout(()=>{
            console.log(temp),1000;
        })
    })();
}
复制代码

又或者在新增的闭包中将i以局部变量形式传递给内部函数。

结语：

漫漫长征路，越来越精彩！

转载于:https://juejin.im/post/5cda863bf265da036902b965