预编译

---

1.javascript 执行过程

2.变量和函数提升

函数声明整体提升，变量只有声明提升，赋值是不提升的

// 变量只有声明提升，赋值是不提升
console.log(a);// undefined
var a;  // 没赋值被提升了

console.log(b);// undefined
var b = 1; // 赋值被提升了，但提升的只有声明

// 函数声明整体提升
test();
function test() {
    console.log(1); // 1
}

WARNING

变量声明会被提升。 只有函数声明会被提升，函数表达式是不会被提升的。 函数声明的优先级高于变量声明。

3.显示与隐式全局变量

JS的全局变量声明的方式：

• 使用 var 显示声明的全局变量
• 不使用 var 声明的隐式全局变量-暗示全局变量：imply global variable

两者的区别在于是否能通过 delete 操作符删除

// 全局变量
var a = 1; //  使用 var 显示声明全局变量a
b = 2; //  不使用 var 声明的隐式全局变量b

console.log(a, window.a); // 1 1 》 a = window.a
console.log(b, window.b); // 2 2 》 b = window.b

// 存储过程
window = {
    a : 1,
    b: 2
}

// 显式声明的全局变量不能被删除
console.log(delete a); // false

// 隐式声明的全局变量可以被删除
console.log(delete b); // true

// 删除情况
console.log(typeof a); // number
console.log(typeof b); // undefined

4.局部声明变量

// 变量未声明，在函数内部直接赋值，被提升到全局
function test() {
    var a = b = 1;
}
test();
console.log(b); // 1
console.log(window.a); // undefined
console.log(a); // ReferenceError: a is not defined

5.内部声明变量

// 变量未声明，在函数内部直接赋值，被提升到全局
function test() {
    var a = b = 1;
}
test();
console.log(b); // 1
console.log(window.a); // undefined
console.log(a); // ReferenceError: a is not defined

6.预编译过程: AO与GO

JS代码在执行的时候会开辟一个全局的执行栈，也叫做全局执行上下文GO。当遇到函数的时候，会开辟一个函数执行栈，也叫做函数上下文AO。

AO：activation object, 函数上下文。创建AO过程:

• 寻找形参和变量声明
• 实参值赋值给形参
• 找函数声明
• 执行赋值

AO分析:

function test(a) {
    console.log(a); // ƒ a() {}
    var a = 1;

    console.log(a); // 1
    function a() {}
    console.log(a); // 1

    var b = function(){}
    console.log(b); // ƒ (){}

    function d() {}
}

test(2);

AO = {
    a: undefined >
        2 >
        function a(){} >
        1,
    b: undefined >
        function () {},
    d: function d() {},
}

TIP

首先在函数内查找形参和变量声明,找到 a,b 接着给形参赋值 此时a=2, 查找函数声明 function a , function b , functon d. 最后从上到下执行代码赋值操作。

function test(a, b) {
    console.log(a); // 5
    c = 0;
    var c;
    a = 5;
    b = 6;
    console.log(b); // 
    function b() {}
    function d() {}
    console.log(b); 
}

test(1);

AO = {
    a: undefined > 
        1 >
        5,
    b: undefined > 
        function b(){} >
        6,
    c: undefined > 
        0,
    d: function d() {}
}

GO：global object，全局上下文（等于window）创建GO过程:

• 找变量声明
• 找函数式声明
• 执行赋值

GO分析:

var a = 1;
function a () {
    console.log(2);
}
console.log(a); // 1

GO = {
    a: undefined > function a() {} > 1
}

console.log(a, b); // ƒ a() {} undefined
function a() {}
var b = function() {}

GO = {
    b: undefined,
    a: undefined > function a() {}
}

AO与GO结合

function test() {
    var a = b = 1;
    console.log(a); // 1
}

test();

GO = {
    b: 1
}

// AO中有找AO，没有找GO
AO = {
    a: undefined > 1
}

var b = 3;
console.log(a); // function a(){...}
function a(a) {
    console.log(a); // function a() {}
    var a = 2;
    console.log(a); // 2
    function a() {}
    var b = 5;
    console.log(b); // 5
}

a(1);

GO = {
    b: undefined > 3,
    a: function a(){...}
}

AO = {
    a: undefined > 1 > function a() {} > 2,
    b: undefined > 5,
}