深入理解JavaScript学习笔记

2017-02-14

一、基本要点

预解析（hoisting）

预解析又称为悬置/置顶解析，含义是函数任何位置声明的var语句，都会像是在函数顶部声明一样发挥作用

myname = "global"; // 全局变量
yourname = "window"; 
function func() {
    alert(myname); // "undefined"
    alert(yourname); // "window"
    var myname = "local";
    alert(myname); // "local"
}
func();

for循环(for Loops)

平时在进行for循环时，一般可以做到第一种形式，能够考虑规避掉每次获取数组长度的问题。而下两种方式，相比较又有了一些改进。

减少了一个变量(无max)；

向下数到0，通常更快，因为和0做比较要比和其他不是0的东西做比较更有效率。

// 第一种形式
for (var i = 0, max = myarray.length; i < max; i++) {
   // 使用myarray[i]做点什么
}
// 第二种形式
var i, myarray = [];
for (i = myarray.length; ; i–-;) {
   // 使用myarray[i]做点什么
}
// 第三种形式
var myarray = [],
    i = myarray.length;
while (i–-) {
   // 使用myarray[i]做点什么
}

Tip:
今天在《代码简洁之道》学习到，在现代浏览器中，会自动完成对“循环均重复计算myarray.length的值”的优化，这一行为是没有必要的。

二、揭秘命名函数表达式（先跳过）

函数表达式和函数声明

ECMAScript是通过上下文来区分的，如果function foo(){}是作为赋值表达式的一部分的话，那它就是一个函数表达式，如果function foo(){}被包含在一个函数体内，或者位于程序的最顶部的话，那它就是一个函数声明。

function foo(){} // 函数声明，因为它是程序的一部分
var bar = function foo(){}; // 函数表达式，因为它是赋值表达式的一部分
new function bar(){}; // 函数表达式，因为它是new表达式
(function(){
    function bar(){} // 函数声明，因为它是函数体的一部分
})();
(function foo(){}); // 函数表达式：包含在分组操作符内

函数声明会在任何表达式被解析和求值之前先被解析和求值，即使你的声明在代码的最后一行。

三、全面解析Module模式

引用全局变量

可以通过匿名函数的返回值来返回这个全局变量，这也就是一个基本的Module模式。

var blogModule = (function () {
    var my = {}, privateName = "博客园";
    function privateAddTopic(data) {
        // 这里是内部处理代码，可保持私有状态
    }
    my.Name = privateName; // 可访问
    my.AddTopic = function (data) { // 可访问
        privateAddTopic(data);
    };
    return my;
} ());

扩展

可以通过匿名函数的返回值来返回这个全局变量，这也就是一个基本的Module模式。

var blogModule = (function (my) {
    var oldAddPhotoMethod = my.AddPhoto; // 紧耦合扩展
    my.AddPhoto = function () {
        // 重载方法，依然可通过oldAddPhotoMethod调用旧的方法
    };
} (blogModule || {})); // 松耦合扩展 实现Module模式的任意加载顺序

跨文件共享私有对象

下面的代码中，任何文件都可以对自己的局部变量_private设属性，并且设置对其他的文件也立即生效。一旦这个模块加载结束，应用会调用 blogModule._seal()”上锁”，这会阻止外部接入内部的_private。如果这个模块需要再次增生，应用的生命周期内，任何文件都可以调用_unseal() ”开锁”，然后再加载新文件。

var blogModule = (function (my) {
    var _private = my._private = my._private || {}, 
        _seal = my._seal = my._seal || function () {
            delete my._private;
            delete my._seal;
            delete my._unseal;
            
        },
        _unseal = my._unseal = my._unseal || function () {
            my._private = _private;
            my._seal = _seal;
            my._unseal = _unseal;
        };
    return my;
} (blogModule || {}));

四、立即调用的函数表达式

用闭包保存状态

var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
    elems[i].addEventListener('click', function (e) {
        e.preventDefault();
        alert('I am link #' + i); // I am link #10（如果有10个a元素的话）
    }, 'false');
}
// 下面这段代码 结果是正确遍历显示的
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
    (function (lockedInIndex) {
        elems[i].addEventListener('click', function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex); // I am link #1、2、3、4...
        }, 'false');
    })(i);
}
// 也可以像下面这样应用，在处理函数那里使用自执行函数表达式
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
    elems[i].addEventListener('click', (function (lockedInIndex) {
        return function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        };
    })(i), 'false');
}

五、强大的原型和原型链

原型使用方式1

通过给Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。

var Calculator = function (decimalDigits, tax) {
    this.decimalDigits = decimalDigits;
    this.tax = tax;
};
Calculator.prototype = {
    add: function (x, y) {
        return x + y;
    },
    subtract: function (x, y) {
        return x - y;
    }
};
//alert((new Calculator()).add(1, 3));

原型使用方式2

在赋值原型prototype的时候使用function立即执行的表达式来赋值。

Calculator.prototype = function () {
    add = function (x, y) {
        return x + y;
    },
    subtract = function (x, y) {
        return x - y;
    }
    return {
        add: add,
        subtract: subtract
    }
} ();
//alert((new Calculator()).add(11, 3));

十、JavaScript核心

构造函数(Constructor)

构造函数会自动为创建的新对象设置了原型对象，原型对象存放于ConstructorFunction.prototype属性中。

// 构造函数
function Foo(y) {
    this.y = y;
}
// "Foo.prototype"存放了新建对象的原型引用
// 所以我们可以将之用于定义继承和共享属性或方法
Foo.prototype.x = 10;
Foo.prototype.calculate = function (z) {
    return this.x + this.y + z;
};
// 使用foo模式创建 "b" and "c"
var b = new Foo(20);
var c = new Foo(30);
// 调用继承的方法
b.calculate(30); // 60
c.calculate(40); // 80

执行上下文栈(Execution Context Stack)

function foo(bar) {}
// 调用相同的function，每次都会产生3个不同的上下文
//（包含不同的状态，例如参数bar的值）
foo(10);
foo(20);
foo(30);

一个执行上下文可以激活另一个上下文，就好比一个函数调用了另一个函数，然后一层一层调用下去。逻辑上来说。这种实现方式是栈，我们可以称之为上下文堆栈。

执行上下文(Execution Context)

一个执行的上下文可以抽象的理解为object。每一个执行的上下文都有一系列的属性，一般包括变量对象(variable object)，this指针(this value)，作用域链(scope chain) )，和一些任意额外属性。

活动对象(activation object)

function foo(x, y) {
  var z = 30;
  function bar() {} // 函数声明
  (function baz() {}); // 函数表达式
}
foo(10, 20);

“foo”函数上下文的下一个激活对象(AO)如下图所示。

闭包(Closures)

闭包是一系列代码块，并且静态保存所有父级的作用域。通过这些保存的作用域来搜寻到函数中的自由变量。