高级技巧

1:作用域安全的构造函数

1.1 什么是作用域不安全的构造函数

　　构造函数就是一个使用new操作符的函数，使用new操作符时，函数内部的this就指向调用构造函数后产生的实例，一旦你调用构造函数没有使用new，构造函数内部的this就将指向window对象，造成更多意想不到的问题。

正常使用:

function Person(name,age,job)
{
    this.name = name;
    this.age = age;
    this.job = job;
}

var person = new Person("Tom",29,"SE");
alert(person.name);//Tom
alert(person.age);//29
alert(person.job);//SE

错误使用:

function Person(name,age,job)
{
    this.name = name;
    this.age = age;
    this.job = job;
}

var person = Person("Tom",29,"SE");
alert(window.name);//Tom
alert(window.age);//29
alert(window.job);//SE
alert(person.name);//Error
alert(person.age);//Error
alert(person.job);//Error

　　为了防止这种错误调用，可以在构造函数内部判断this的指向来进一步完善构造函数。

function Person(name,age,job)
{
    if(this instanceof Person)
    {
        this.name = name;
        this.age = age;
        this.job = job;        
    }
    else
    {
        return new Person(name,age,job);
    }
}

var person = Person("Tom",29,"SE");
alert(window.name);//undefined
alert(window.age);//undefined
alert(window.job);//undefined
alert(person.name);//Tom
alert(person.age);//29
alert(person.job);//SE

　　使用instanceof确保this指向的是Person的实例，无论如何，最后调用构造函数都会使用new操作符。

1.2 作用域安全的构造函数的继承问题

　　作用域安全的构造函数实际上锁定了可以调用此构造函数的环境，在使用借用构造函数的方式来继承父类时，如果遇见父类的构造函数是作用域安全的，将会导致继承不到父类。

function Father(name)
{
    if(this instanceof Father)
    {
        this.fatherName = name;
        this.firends = ['alex','tom'];    
    }
    else
    {
        return new Father(name);//将返回一个Father实例
    }
}
function Child(name)
{
    Father.call(this,"father1");//这里传入的this指向了Child的实例，获得一个不曾使用的Father实例
    this.childName = name;
}
var child1 = new Child("child1");
alert(child1.fatherName);//undefined

　　问题关键在于this的指向，联系几种继承方式，原型链继承可以改变this的指向，当用原型链方式继承father时，child中this的指向也可以是father了，所以一综合，就是原来的组合继承方式就可以规避这个问题。

function Father(name)
{
    if(this instanceof Father)
    {
        this.fatherName = name;
        this.firends = ['alex','tom'];    
    }
    else
    {
        return new Father(name);
    }
}
function Child(name)
{
    Father.call(this,"father1");
    this.childName = name;
}
Child.prototype = new Father("father2");//现在指向Child实例的this也同样指向了Father
//father2 被同名属性father1覆盖了
var child1 = new Child("child1");
alert(child1.fatherName);//father1

 2:惰性载入函数

　　前端总是要判读很多兼容性问题，比如使用Ajax时要创建的XMLHttpRequest对象，各个浏览器之间创建的方式不尽相同，会用到大量try catch语句，很显然，这个判断过程只需要执行一次就可以了，让函数记忆住成功创建的方式，下次使用就会快很多了。

一般方式:

function createRequest()
{
    var HttpRequest = null;
    try
    {
        // For Mazilla or Safari or IE7
        HttpRequest = new XMLHttpRequest();
    }
    catch (e)
    {
        var XMLHTTPS = new Array( "MSXML2.XMLHTTP.5.0",
                                    "MSXML2.XMLHTTP.4.0",
                                    "MSXML2.XMLHTTP.3.0",
                                    "MSXML2.XMLHTTP",
                                    "Microsoft.XMLHTTP" );
        var Success = false;
        for (var i = 0; i < XMLHTTPS.length && Success == false; i+=1)
        {
            try
            {
                HttpRequest = new ActiveXObject(XMLHTTPS[i]);
                Success = true;
            }
            catch (e) { }
            if (!Success)
            {
                this.onError("Browser do not support Ajax.");
            }
        }
    }
    return HttpRequest;
}

惰性载入方式:

function createRequest()
{
    var HttpRequest = null;
    try
    {
        // For Mazilla or Safari or IE7
        HttpRequest = new XMLHttpRequest();
        createRequest = function(){
            return XMLHttpRequest();
        };
        return HttpRequest;
    }
    catch (e)
    {
        var XMLHTTPS = new Array( "MSXML2.XMLHTTP.5.0",
                                    "MSXML2.XMLHTTP.4.0",
                                    "MSXML2.XMLHTTP.3.0",
                                    "MSXML2.XMLHTTP",
                                    "Microsoft.XMLHTTP" );
        var Success = false;
        for (var i = 0; i < XMLHTTPS.length && Success == false; i+=1)
        {
            try
            {
                HttpRequest = new ActiveXObject(XMLHTTPS[i]);
                Success = true;
                createRequest = function(){
                    return new ActiveXObject(XMLHTTPS[i]);
                };
                return HttpRequest;
            }
            catch (e) { }
            if (!Success)
            {
                this.onError("Browser do not support Ajax.");
            }
        }
    }
    createRequest = function(){
        throw new Error("NO XHR object available");
    };
    return HttpRequest;
}