本篇博客为"高性能JavaScript"一书部分知识点学习笔记摘录.
作用域链及和标识符解析
每一个JavaScript函数都表示为一个对象, 要确切的说, 是Function对象的一个实例. Function对象同其他对象一样, 拥有可以编程访问的属性, 和一系列不能通过代码访问而仅供JavaScript引擎存取的内部属性. 其中有一个内部属性是[[Scope]].
内部属性[[Scope]]包含了一个函数被创建的作用域中对象的集合. 这个集合被称为函数的作用域链. 它决定哪些数据将被函数访问. 函数作用域中每一个对象被称为一个可变对象. 每个可变对象都以"键值对"的形式存在. 当一个函数创建后, 它的作用域链会被创建此函数的作用域中可访问的数据对象所填充.
例:
function add(num1, num2) {
var sum = num1 + num2;
return sum;
}//参见下图
这里写图片描述
函数add的作用域将会在执行时期用到. 假设执行如下代码:
var total = add(5, 10);
执行此函数时会创建一个称为(execution context)的内部对象, 一个执行环境定义了一个函数执行时的环境, 函数每次执行环境都是独一无二的, 所以多次调用同一个函数就会导致创建多个执行环境. 当函数执行完毕, 执行环境就会被销毁.
每个执行环境都有自己的作用域链, 用于解析标识符. 当执行环境被创建时, 它的作用域链初始化为当前被运行函数的[[Scope]]属性中的对象. 这些值按照它们出现的顺序被复制到执行环境中. 这个过程一旦完成, 一个被称为"活动对象"的新对象就为执行环境创建好了. 活动对象作为函数运行时的变量对象. 包含所有局部变量, 命名参数, 参数集合以及this. 然后此对象被推入作用域链的最前端. 当执行环境被销毁. 活动对象也随之被销毁.
这里写图片描述
在函数执行过程中, 每遇到一个变量, 都会经历一次标识符解析过程以决定从哪里获取或存储数据, 该过程搜索执行环境的作用域链, 查找同名的标识符, 搜索过程从作用域链头部开始, 也就是当前运行函数的活动对象. 如果找到, 就使用这个标识符对应的变量, 如果没有找到, 继续搜索作用域链中的下一个对象, 那么标识符被视为是未定义的. 在函数执行过程中, 每个标识符都要经历这样的搜索过程. 在前面的代码示例中, 函数访问sum, num1, num2时都会产生搜索过程, 正是这个搜索过程影响了性能;
**解决办法: ** 如果某个跨作用域的值被引用一次以上, 那么就把它储存到局部变量. 例如先将全局变量的引用存储在一个局部变量中, 然后使用这个局部变量代替全局变量.
//例
var doc = document,
bd = doc.body;
闭包, 作用域, 内存
//例子
function assignEvents(){
var id = "123456";
document.getElementById("save-btn").onclick = function(event) {
saveDocument(id);
}
}
assignEvents( )函数给一个DOM元素设置事件处理函数. 这个事件处理函数就是一个闭包. 它在assignEvents( )执行时创建, 并且能够访问所属作用域的id变量. 为了让这个闭包访问id, 必须创建一个特定的作用域链.
当assignEvents( )函数执行时, 一个包含了变量id以及其他数据的活动对象被创建. 它成为执行环境作用域中第一个对象, 而全局对象紧随其后. 当闭包被创建时, 它的[[Scope]]属性被初始化为这些对象.
这里写图片描述
引入闭包时, 由于引用仍然存在于闭包[[Scope]]属性中. 因此激活对象无法被销毁. 这意味着脚本的闭包与非闭包函数相比, 需要更多的内存开销.
当闭包代码执行时, 会创建一个执行环境, 它的作用域链与属性[[Scope]]中所引用的两个相同的作用域链对象一起被初始化, 然后一个活动对象被自身所创建.
这里写图片描述
减轻闭包对于执行速度的影响: 将常用的跨作用域变量存储在局部变量中, 然后直接访问局部变量.
原型 Prototype
JavaScript中对象是基于原型的. 而原型对象为所有对象实例所共享, 因此这些实例也共享了原型对象的成员.
对象有两种成员类型: 实例成员和原型成员. 实例成员直接存在于对象实例中, 原型成员则从对象原型继承而来.
//例
var book = {
title: "Hi",
publisher: "Yahoo!"
}
alert(book.toString());//[object Object]"
这里写图片描述
原型链
对象的原型决定了实例的类型, 默认情况下, 所有对象都是对象(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;
这里写图片描述
网友评论