javascript执行原理

执行环境

当执行流执行到函数时会创建一个执行环境，这个执行环境包含了函数内部 语句可以访问的所有变量和函数，当代码执行完时，销毁执行环境。所以一般情 况下，局部变量在函数执行完时会被销毁。

作用域、调用对象

很多人认为作用域是在函数执行时创建的，这是有偏差的理解！

作用域分词法作用域和动态作用域：

•  词法作用域是在函数定义的时候创建的，作用域的本质是创建它的外层函数的调用对象组成的对象链，函数内部属性[[scope]]指向此作用域。
•  当调用函数时，会创建一个调用对象（有些地方称活动对象），这个调用对象保存了函数参数和局部变量。将此调用对象推入词法作用域的前端，因此执行时作用域发生了变化，称为动态作用域。

实质上作用域只有一个，都是内部属性[[scope]],词法作用域和动态作用域是时间上的不同造成的划分。作用域链是一条对象链，函数自己的活动对象，接着是父函数的活动对象，接着是祖父函数的活动对象。。。。 函数执行时，是沿着作用域链去寻找标识符的值的，先从自己的活动对象开始。 with、catch 会改变动态作用域，将with的对象和catch的对象压入作用域链前端。

下面出个例子看你是否对作用域链理解到位了：

var obj = {a:1,b:2};
var fn = function(){
     var c=3;
     var a = 5;
     console.log(a);   //a等于多少?
     with(obj){
         a=6;                        
         return function(){return a+c;};
     }
}(); 
fn();     //结果是多少?

 

闭包　　

啥是闭包？

官方：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

民间：内部函数拥有外部函数的环境。

通俗的就是内部函数可以访问外部函数的变量。

形成机理：作用域链。

内存及变量查找效率

当有闭包，且内部函数赋给了外部变量引用时，要特别注意内存 。没有赋给外部变量时，代码执行完后执行环境销毁，不会有变量贮存内存。但赋给了外部变量时，闭包的词法作用域链会持有外层函数的活动对象，使得外部的变量不会回收。为了有效回收应该将变量设为null，断开引用。

var fn = function(){
    var div = document.getElementById("div");
    return function(){};    
};  //div不会销毁

 

根据作用域链的原理，处于作用链前端的变量会更快找到，所以尽量用局部变量。

var a,b,c;
var fn = function(){
    var d,e,f;
    return function(){ 
        var h,j,k; 
         return typeof nothing; //nothing这个变量查找了整条作用域链，直到查询到window中这个变量，才返回"undefined".
    };    
};

this

this跟arguments一样是函数执行时，活动对象的一部分。this是动态的，函数执行时候绑定。

大概有这几种情况：

(1) 函数,this==window

var fn = function(){console.log(this==window);}; //true

fn(); //不管函数fn在任何地方定义,是顶层函数，还是嵌套 ,this都等于window

(2) 方法，this==obj

var obj = {};

obj.fn = function(){console.log(this==obj);}; //true

obj.fn();

(3)setTimeout setInterval，this==window

var obj = {};

var fn = function(){console.log(this==obj);};

setTimeout(fn,1000); //?

obj.fn = fn;

setTimeout(obj.fn,1000); //?

(4)call,apply将函数or方法绑定给了对象，this==obj

var obj = {};

var fn = function(){console.log(this==obj);}; //true

fn();

fn.call(obj);

(5)事件处理程序

DOM0

btn.onclick = function(){console.log(this==btn);}; //true

DOM2

btn.addEventListener("click",function(){
     console.log(this==btn);        //true
},false);

IE

btn.attachEvent("onclick",function(){
      console.log(window==btn);   //true
});