作用域链

作者: 老虎爱吃母鸡 | 来源:发表于2016-08-14 13:24 被阅读0次

作用域链和闭包
作用域链
web性能实践
JS_0: 执行环境和作用域链
js 总结七07-19
作用域和闭包
2023-01-12
JavaScript 作用域链与闭包
作用域/作用域链闭包及其使用
作用域链

函数声明和函数表达式有什么区别（*）
这是函数声明

function fn() {
    //body...
}

这是函数表达式

var fn = function () {
    //body...
};

他们主要有两点区别，第一，函数声明会提升到执行环境的顶部，函数表达式不会提升，例如

fn()//输出1
function fn() {
    console.log('1');
}

fn()//输出undefined，因为变量声明提升了，但是表达式没有提升
var fn = function () {
    console.log('1');
};

第二，函数表达式结尾需要加分号，就像声明其他变量一样

什么是变量的声明前置？什么是函数的声明前置（**）
变量声明前置就是在js引擎一行一行执行js代码之前，会先对js文件预处理，会把变量声明和函数声明提升到执行环境的顶部，例如

console.log(a);//不会报错，只会输出undefined，因为变量声明提升了
var a;

console.log(a);//报错，因为a还没有声明

函数声明前置也和变量声明前置一样会提升到执行环境的顶部，但是如果发生命名冲突，函数声明前置的优先级会高于变量声明前置，例如

fn();//输出1，因为函数声明提高了
function fn() {
    console.log('1');
}

function a() {
    //body...
}
var a;
typeof a;//'function'，因为函数声明前置的优先级更高

arguments 是什么（*）
arguments是函数内部的类数组对象

2016-08-13_163013.png

可以看到arguments的原型并不是Array，而是Object，arguments保存了函数的所有参数，可以使用arguments方括号语法访问到，例如

function fn(arg) {
    console.log(arguments[0]);//输出hello    
}
fn('hello')

而且，参数是可以被重新赋值的

function fn(arg) {
    console.log("1. "+arg)//输出hello
    arguments[0]='world'
    console.log("2. "+arg)//参数被改变，输出world
}
fn('hello')

arguments主要有两个属性，一个是arguments.length，指的是传递给函数的参数数量，一个是arguments.callee，指的是拥有arguments这个对象的函数

function fn () {
    console.log(arguments.length);//输出5
}
fn(1,2,3,4,5)

function fn () {
    console.log(arguments.callee);//输出function fn() {...}
}
fn();

函数的重载怎样实现（**）
函数的重载是指为一个函数编写两个定义，只要这两个定义的签名（接受的参数的类型和数量）不同即可。但是在js中没有传统的意义的重载，因为第一，传给函数的参数都在类数组对象arguments中，第二，函数名只是类似于一个指向函数的指针，相同的函数名，后面的函数会覆盖前面的函数，例如

function fn() {
    console.log("1");
}
function fn() {
    console.log("2");
}
fn();//输出的是2

但是通过检测传入函数中参数的类型和数量并做出不同的反应可以模拟方法的重载，例如

function fn () {
    if(arguments.length===1) {
        console.log("1");
    } else if (arguments.length!==1) {
        console.log("2");
    }
}
fn();//输出2
fn(1);//输出1
fn(1,1);//输出2

立即执行函数表达式是什么？有什么作用（***）

(function fn() {
    console.log("1")
})()

这就是一种常用的立即执行函数表达式的写法
<blockquote>IIFE (Immediately Invoked Function Expression) 是一个 JavaScript 函数，它会在定义时立即执行。---MDN</blockquote>
之所以这样写是因为直接以function开头会被js解析器当成是函数声明，而js括号中只能是表达式
<blockquote>圆括号运算符由一对圆括号组成,包裹表达式和子表达式用来覆盖常规的**运算符优先级 **,达到低优先级的表达式比高优先级的表达式更早运算.---MDN</blockquote>
相当于这种写法

var fn=function() {
    console.log("1")
}()

但是这种写法的可读性不高，因为如果代码很多，还是会去下面找函数何时被调用
- IIFE的作用
1. 模拟块作用域，例如
liba.js
var a = 1; //code...
libb.js
var a = 2; //code...
如果页面中同时引用两个库liba.js和libb.js，必然导致变量的覆盖，但是可以用IIFE来解决
liba.js
(function () { var num = 1; //code... })()
libb.js
(function () { var num = 2; //code... })()
改造之后的两个库互相独立，互不影响
2. 配合闭包保存状态
3. 模块模式，可以避免变量空间污染，构造更多私有变量
参考：
JavaScript中的立即执行函数表达式
 详解javascript立即执行函数表达式（IIFE）
IIFE

什么是函数的作用域链（****）
每个执行环境都有一个变量对象，环境中定义的变量和函数就保存在这个对象当中，每个函数都有自己的执行环境，当执行流执行到函数时，函数的环境就会被推入一个环境栈当中，而在函数执行完成之后，栈将其环境弹出。当代码在一个环境执行的时候，会创建变量对象的作用域链，作用域链的用途就是保证对执行环境有权访问的变量和函数的有序访问，作用域链的前端始终是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象作为变量对象。变量对象一开始只包含一个变量，就是arguments对象。作用域链的下一个变量对象来自外部环境，再下一个来自更外层的环境，一直延续到全局执行环境

2016-08-14_131604.png