JS高级用法学习笔记之一

JS高级用法学习笔记之一

1.原型&原型链

1.1 了解构造函数（constructor）：

构造函数首字母大写；new则为实例化。

每个函数都有一个 prototype 属性。

函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。

原型：每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。

proto：每一个JavaScript对象(除了 null )都具有的一个属性。这个属性会指向该对象的原型。

constructor：一个构造函数可以生成多个实例，原型指向的构造函数。

关系如下可知：

function Person() {}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true

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

console.log(Object.getPrototypeOf(person) === Person.prototype) // true

作用：当我们需要一个属性时；可以去原型上找。

原型链：每一个构造函数都有自己的实例原型；而实例原型下面又有实例的 proto，这样就形成了一个原型链。

Object.prototype.proto 的值为 null 跟 Object.prototype 没有原型，其实表达了一个意思。

所以查找属性的时候查到 Object.prototype 就可以停止查找了。

2.作用域

定义变量的区域。

JS是静态作用域；静态作用域也叫做词法作用域；

词法作用域：函数的作用域在函数定义时确定的；而不是调用时确定。

有静态则有动态。

动态作用域：函数的作用域在函数调用时确定。

小题

var value = 1;

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

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

bar();

// 结果是 ???

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

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

3.执行上下文(execution context)

顺序执行：JS引擎并非一行一行地分析和执行程序，而是一段一段地分析执行。

可执行代码(executable code）：全局代码、函数代码、eval代码。

执行上下文栈（Execution context stack，ECS）：管理执行上下文。栈：FILO;先进后出。

如下

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

工作原理：当执行一个函数的时候，就会创建一个执行上下文，并且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。

4.变量对象

执行上下文的三个核心属性

1.变量对象 variable object VO：上下文中定义的变量和函数的声明(global function)；

2.作用域链 scope chain —>闭包的存在

3.this —>全局上下文中全局对象(默认指向window)

函数上下文

activiation object AO 活动对象 === 变量对象（没有 var 标识不会被收集）

执行代码

1.进入执行上下文 分析

2.代码执行 执行

案例：

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;

}

foo(1);

分析

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"
}

作用域链

当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

找VO时，先在当前上下文栈，找父级的上下文的VO，直到找到全局变量this，window，沿着上下文栈VO形成作用域链。[[scope]]

案例：

 
function foo() {
    function bar() {
        ...
    }
}

//作用域链 [[scope]]
foo.[[scope]] = [
  globalContext.VO
];

bar.[[scope]] = [
    fooContext.AO,
    globalContext.VO
];