js执行顺序和js异步

感谢：http://www.cnblogs.com/zhaodongyu/p/3922961.html
感谢：http://www.2cto.com/kf/201401/273825.html

---

单线程异步执行的JavaScript

JavaScript是单线程异步执行的。
单线程意味着代码在任务队列中会按照顺序一个接一个执行。
异步代表JavaScript代码在任务队列中的顺序并不会等同于代码的书写顺序。比如事件绑定，ajax，setTimeout等任务的发生时期是不可预期的。

js的执行顺序

JavaScript程序的执行顺序有两个阶段。
第一阶段，载入文档，（预编译会对本代码块中的所有声明的变量和函数进行处理，此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值），执行代码块。
第二阶段，执行事件驱动程序（此时是异步的，由事件驱动的）。

遇到的问题

function A(){
        var that=this;
        this.img={};
        this.img.self=new Image();
        this.imgInit=(function(){
            that.img.self.onload=function(){
                that.img.x=300;
                that.img.y=400;
            }
            that.img.self.src="img/1.png";
        })();
    }
    var a=new A();
    console.log(a.img);
    console.log(a.img.y);

运行结果

为什么img的所有属性y有值，而单独打印时是undefined？

解决

就是开始所说的js执行顺序，异步，预编译原理

function A(){
        console.log(2);//第二步
        var that=this;
        this.img={};
        this.img.self=new Image();
        this.imgInit=(function(){
            that.img.self.onload=function(){//img的onload事件，需要在文档加载之后执行
                that.img.x=300;
                that.img.y=400;
                console.log(4);//第四步
            }
            that.img.self.src="img/1.png";
        })();
        this.init=function(){
            that.img.h=600;
        }
    }
    console.log(1);//第一步
    var a=new A();//执行构造函数
    console.log(a.img);//打印对象a的img，有x,y，但是没有h
    console.log(a.img.y);//undefined
    console.log(a.img.h);//undefined
    window.onload=function(){//window的onload事件
        console.log(5);//第五步
        console.log(a.img.y);//400
        console.log(a.img.h);//undefined
    }
    console.log(3);//第三步

运行结果

[TOC]