JavaScript深入学习

一、原型链

1、prototype

每一个函数都有一个prototype属性（注意：只有函数才有这个属性）

function Person() {

}
// 虽然写在注释里，但是你要注意：
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

大概的关系图：

 2、_proto_

每一个JavaScript对象都会有一个属性是_proto_，属性指向该对象的原型

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

所以关系图：

 实例原型又可以通过constructor关联构造函数

function Person() {

}
console.log(Person === Person.prototype.constructor); // true

所以此处的原型图又更新了：

 实例与原型

          当实例对象读取属性时候，如果在实例中找不到数据，就会去查找原型中是否有这个数据

原型的原型

        实例对象（Person.prototype）也是一个对象，实际上，原型对象是通过Object构造函数生成的，所以此处，Person.prototype._proto_ === Object.prototype

        此时，原型链关系图为：

 那么Object.prototype的原型是什么呢？

答案是 null（Object.prototype._proto_ === null）

最后原型链，就是蓝色的这条线：

二、执行上下文栈

模拟一下：

ECStack = []
//在程序结束之前，ECStack底部永远会有一个globalContext
//所以
ECStack = [
    globalContext
];

//例：
function fun3() {
    console.log('fun3')
}

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

//此时的执行顺序为
// 伪代码

// fun1()
ECStack.push(<fun1> functionContext);

// fun1中竟然调用了fun2，还要创建fun2的执行上下文
ECStack.push(<fun2> functionContext);

// 擦，fun2还调用了fun3！
ECStack.push(<fun3> functionContext);

// fun3执行完毕
ECStack.pop();

// fun2执行完毕
ECStack.pop();

// fun1执行完毕
ECStack.pop();

// javascript接着执行下面的代码，但是ECStack底层永远有个globalContext

所以此处：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

//=>"local scope"   "local scope";

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

//=>"local scope"   "local scope";

//两端代码输出一样，是因为：
//JavaScript 函数的执行用到了作用域链，这个作用域链是在函数定义的时候创建的。
//嵌套的函数 f() 定义在这个作用域链里，其中的变量 scope 一定是局部变量，不管何时何地执行函数 f()，这种绑定在执行 f() 时依然有效。
//其代码执行顺序分别是：（执行上下文栈的变化不一样）
ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();

ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();

三、变量对象

在JavaScript中，全局对象就是windows对象，其是由Object构造函数实例化的一个对象

全局对象windows属性指向自身

var a = 1;
console.log(window.a);

this.window.b = 2;
console.log(this.b);

执行过程：

两个阶段：分析和执行

也可以称为：执行上下文-------------->代码执行

执行上下文的时候代码还没有执行

变量对象会包括：

1. 函数的所有形参 (如果是函数上下文)

   • 由名称和对应值组成的一个变量对象的属性被创建
   • 没有实参，属性值设为 undefined

2. 函数声明

   • 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建
   • 如果变量对象已经存在相同名称的属性，则完全替换这个属性

3. 变量声明

   • 由名称和对应值（undefined）组成一个变量对象的属性被创建；
   • 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性

例：

//代码：
function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;

}

foo(1);

//进入执行上下文：（AO活动对象）
AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
}

//代码执行阶段：
AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

总结：

1. 全局上下文的变量对象初始化是全局对象

2. 函数上下文的变量对象初始化只包括 Arguments 对象

3. 在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值

4. 在代码执行阶段，会再次修改变量对象的属性值

作用域链

执行上下文中作用域链和变量对象创建过程

例：

var scope = "global scope";
function checkscope(){
    var scope2 = 'local scope';
    return scope2;
}
checkscope();

//1.checkscope函数被创建，保存作用域链到内部属性[[scope]]
checkscope.[[scope]] = [
    globalContext.VO
];

//2.执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈
ECStack = [
    checkscopeContext,
    globalContext
];

//3.checkscope 函数并不立刻执行，开始做准备工作，第一步：复制函数[[scope]]属性创建作用域链
checkscopeContext = {
    Scope: checkscope.[[scope]],
}

//4.第二步：用 arguments 创建活动对象，随后初始化活动对象，加入形参、函数声明、变量声明
checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    }，
    Scope: checkscope.[[scope]],
}

//5.第三步：将活动对象压入 checkscope 作用域链顶端
checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]
}

//6.准备工作做完，开始执行函数，随着函数的执行，修改 AO 的属性值
checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: 'local scope'
    },
    Scope: [AO, [[Scope]]]
}

//7.查找到 scope2 的值，返回后函数执行完毕，函数上下文从执行上下文栈中弹出
ECStack = [
    globalContext
];