饥人谷技术博客

作用域链

2016-08-14  本文已影响0人  老虎爱吃母鸡 
function fn() {
    //body...
}

这是函数表达式

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

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

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

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

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

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'，因为函数声明前置的优先级更高

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();

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

上一篇 下一篇

猜你喜欢

热点阅读