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

作用域链及和标识符解析

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

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

例:

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

    
    
1
    
    
2
    
    
3
    
    
4
   
   

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

var total = add(5, 10);
   
   

    
    
1
   
   

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

在函数执行过程中, 每遇到一个变量, 都会经历一次标识符解析过程以决定从哪里获取或存储数据, 该过程搜索执行环境的作用域链, 查找同名的标识符, 搜索过程从作用域链头部开始, 也就是当前运行函数的活动对象. 如果找到, 就使用这个标识符对应的变量, 如果没有找到, 继续搜索作用域链中的下一个对象, 那么标识符被视为是未定义的. 在函数执行过程中, 每个标识符都要经历这样的搜索过程. 在前面的代码示例中, 函数访问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]]属性被初始化为这些对象.

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

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

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

---

原型 Prototype

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

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

//例
var book = {
    title: "Hi",
    publisher: "Yahoo!"
}

alert(book.toString());//[object Object]"
   
   

    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
    
    
6
    
    
7
   
   

---

原型链

对象的原型决定了实例的类型, 默认情况下, 所有对象都是对象(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
   
   

作用域链及和标识符解析

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

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

例:

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

  
  
1
  
  
2
  
  
3
  
  
4
 
 

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

var total = add(5, 10);
 
 

  
  
1
 
 

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

在函数执行过程中, 每遇到一个变量, 都会经历一次标识符解析过程以决定从哪里获取或存储数据, 该过程搜索执行环境的作用域链, 查找同名的标识符, 搜索过程从作用域链头部开始, 也就是当前运行函数的活动对象. 如果找到, 就使用这个标识符对应的变量, 如果没有找到, 继续搜索作用域链中的下一个对象, 那么标识符被视为是未定义的. 在函数执行过程中, 每个标识符都要经历这样的搜索过程. 在前面的代码示例中, 函数访问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]]属性被初始化为这些对象.

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

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

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

---

原型 Prototype

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

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

//例
var book = {
    title: "Hi",
    publisher: "Yahoo!"
}

alert(book.toString());//[object Object]"
 
 

  
  
1
  
  
2
  
  
3
  
  
4
  
  
5
  
  
6
  
  
7
 
 

---

原型链

对象的原型决定了实例的类型, 默认情况下, 所有对象都是对象(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