《JavaScript核心概念》基础部分重点摘录

注：《JavaScript核心概念》适合深入了解JavaScript，比我买的《JavaScript框架设计》语言和内容丰富多了（可能是我水平尚浅吧）。

1. 作用域

var herp=”one”;  
{  
var herp=”two”;  
}  
alert(herp); //two,

上面这个很简单，那看看下面这两个。

//代码1
var str="global";
function scopteTest(){
  alert(str);      //1
  str="local";
  alert(str);      //2
}

这里1和2会输出什么呢？

//代码2
var str="global";
function scopteTest(){
  alert(str);      //3
  var str="local";
  alert(str);      //4
}

这里3和4又会输出什么呢？

答案：1、2、3、4分别输出

global
local
undefined
local

很神奇吧，尤其是第三个，详情去看《JavaScript核心概念》吧。

大致原理：JavaScript的作用域是词法作用域。在代码2中，词法分析结束后，str变量已经加入到 scopteTest函数局部作用域了，即整个函数内部已经知道自己内部有个 str，当然就不再去访问外部的 str了。但由于 //3 处于变量的定义之前，所以会输出 undefined。

2. 经典的闭包例子

//例子1
var outter=[];
function closureTest(){
  var array=["one","two","three","four"];
  for(var i=0; i<array.length; i++){
    var x={};
    x.no = i;
    x.text = array[i];
    x.invoke = function( i ){
      print(i);
    };
    outter.push(x);

  }
}

closureTest();
print(outter[0].invoke());
print(outter[1].invoke());
print(outter[2].invoke());
print(outter[3].invoke());

//例子2
var outter=[];
function closureTest(){
  var array=["one","two","three","four"];
  for(var i=0; i<array.length; i++){
    var x={};
    x.no = i;
    x.text = array[i];
    x.invoke = function( no ){
      return function(){
         print(no);
      }
    }(i);
    outter.push(x);

  }
}

closureTest();
print(outter[0].invoke());
print(outter[1].invoke());
print(outter[2].invoke());
print(outter[3].invoke());

例子1输出：

例子2输出：

3. JavaScript函数的创建

创建JavaScript函数的一种不长用的方式(几乎没有人用)是通过new操作符来作用于Function“构造器”：

var funcName = new Function( [argname1, [... argnameN,]] body );

参数列表中可以有任意多的参数，然后紧跟着是函数体，比如：

var add = new Function("x", "y", "return(x+y)"); print(add(2, 4));

但更常用的是通过字面量来创建函数：

function add(x, y){  return x + y; }

4. new 一个函数的实质过程

在JavaScript中，通过 new 操作符，来作用一个函数，实质过程是这样的：

　　首先，创建一个空对象，然后用函数的 apply 方法，将这个空对象传入作为 apply 的第一个参数，及上下文参数。这样函数内部的this将会被这个空对象所替代。

　　例如：

var triangle = new Shape("triangle");
//相当于下面：
var triangle = {};
Shape.apply(triangle, ["triangle"]);