高性能JavaScript---作用域链, 闭包, 原型, 原型链

快来打我* 2022-05-14 04:14 225阅读 0赞

## 作用域链及和标识符解析 ##

每一个JavaScript函数都表示为一个对象, 要确切的说, 是Function对象的一个实例. Function对象同其他对象一样, 拥有可以编程访问的属性, 和一系列不能通过代码访问而仅供JavaScript引擎存取的内部属性. 其中有一个内部属性是\[\[Scope\]\].

内部属性\[\[Scope\]\]包含了一个函数被创建的作用域中对象的集合. 这个集合被称为函数的作用域链. 它决定哪些数据将被函数访问. 函数作用域中每一个对象被称为一个可变对象. 每个可变对象都以”键值对”的形式存在. 当一个函数创建后, 它的作用域链会被创建此函数的作用域中可访问的数据对象所填充.

例:

function add(num1, num2) { 
        var sum = num1 + num2;
        return sum;
    }//参见下图
      
       
        1
        2
        3
        4

![这里写图片描述][SouthEast]

函数add的作用域将会在执行时期用到. 假设执行如下代码:

var total = add(5, 10);
      
       
        1

执行此函数时会创建一个称为(execution context)的内部对象, 一个执行环境定义了一个函数执行时的环境, 函数每次执行环境都是独一无二的, 所以多次调用同一个函数就会导致创建多个执行环境. 当函数执行完毕, 执行环境就会被销毁.  
每个执行环境都有自己的作用域链, 用于解析标识符. 当执行环境被创建时, 它的作用域链初始化为当前被运行函数的\[\[Scope\]\]属性中的对象. 这些值按照它们出现的顺序被复制到执行环境中. 这个过程一旦完成, 一个被称为”活动对象”的新对象就为执行环境创建好了. 活动对象作为函数运行时的变量对象. 包含所有局部变量, 命名参数, 参数集合以及this. 然后此对象被推入作用域链的最前端. 当执行环境被销毁. 活动对象也随之被销毁.  
![这里写图片描述][SouthEast 1]

在函数执行过程中, 每遇到一个变量, 都会经历一次标识符解析过程以决定从哪里获取或存储数据, 该过程搜索执行环境的作用域链, 查找同名的标识符, 搜索过程从作用域链头部开始, 也就是当前运行函数的活动对象. 如果找到, 就使用这个标识符对应的变量, 如果没有找到, 继续搜索作用域链中的下一个对象, 那么标识符被视为是未定义的. 在函数执行过程中, 每个标识符都要经历这样的搜索过程. 在前面的代码示例中, 函数访问sum, num1, num2时都会产生搜索过程, 正是这个搜索过程影响了性能;

**解决办法:**  如果某个跨作用域的值被引用一次以上, 那么就把它储存到局部变量. 例如先将全局变量的引用存储在一个局部变量中, 然后使用这个局部变量代替全局变量.

//例
    var doc = document,
        bd = doc.body;
      
       
        1
        2
        3

--------------------

## 闭包, 作用域, 内存 ##

//例子
    function assignEvents(){ 
        var id = "123456";
    
        document.getElementById("save-btn").onclick = function(event) { 
            saveDocument(id);
        }
    }
      
       
        1
        2
        3
        4
        5
        6
        7
        8

`assignEvents( )`函数给一个DOM元素设置事件处理函数. 这个事件处理函数就是一个闭包. 它在`assignEvents( )`执行时创建, 并且能够访问所属作用域的id变量. 为了让这个闭包访问id, 必须创建一个特定的作用域链.

当`assignEvents( )`函数执行时, 一个包含了变量id以及其他数据的活动对象被创建. 它成为执行环境作用域中第一个对象, 而全局对象紧随其后. 当闭包被创建时, 它的\[\[Scope\]\]属性被初始化为这些对象.  
![这里写图片描述][SouthEast 2]

引入闭包时, 由于引用仍然存在于闭包\[\[Scope\]\]属性中. 因此激活对象无法被销毁. 这意味着脚本的闭包与非闭包函数相比, 需要更多的内存开销.

当闭包代码执行时, 会创建一个执行环境, 它的作用域链与属性\[\[Scope\]\]中所引用的两个相同的作用域链对象一起被初始化, 然后一个活动对象被自身所创建.

![这里写图片描述][SouthEast 3]

减轻闭包对于执行速度的影响: 将常用的跨作用域变量存储在局部变量中, 然后直接访问局部变量.

--------------------

## 原型 Prototype ##

JavaScript中对象是基于原型的. 而原型对象为所有对象实例所共享, 因此这些实例也共享了原型对象的成员.

对象有两种成员类型: 实例成员和原型成员. 实例成员直接存在于对象实例中, 原型成员则从对象原型继承而来.

//例
    var book = {
        title: "Hi",
        publisher: "Yahoo!"
    }
    
    alert(book.toString());//[object Object]"
      
       
        1
        2
        3
        4
        5
        6
        7

![这里写图片描述][SouthEast 4]

--------------------

## 原型链 ##

对象的原型决定了实例的类型, 默认情况下, 所有对象都是对象(object)实例, 并继承了所有基本方法, 比如toString( ). 你可以定义并使用构造函数来创建另一种类型的原型.

例如:

function Book(title, publisher) { 
        this.title = title;
        this.publisher = publisher;
    }
    
    Book.prototype.sayTitle = function(){ 
        alert(this.title);
    }
    
    var book1 = new Book("aaa", "Yahoo!");
    var book2 = new Book("bbb", "Yahoo!");
    
    book1.sayTitle();//aaa;
      
       
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13

![这里写图片描述][SouthEast 5]

[SouthEast]: /images/20220514/2854311a36d74761a0c386e5fd269570.png
[SouthEast 1]: /images/20220514/185411859eb04453aac03218b41659e8.png
[SouthEast 2]: /images/20220514/d3b867468b6c4d05a662ee49a0ea677e.png
[SouthEast 3]: /images/20220514/fcce217687ab450dbd2b00c6092950cb.png
[SouthEast 4]: /images/20220514/af7e97a30f4444faa59e941032614c4e.png
[SouthEast 5]: /images/20220514/0601474292384e8a9d163d0f2d746de4.png