JavaScript对象创建的几种方式总结

JavaScript对象创建的几种方式总结

 

1.通过 对象字面量 创建单例对象

 

/**

 * Created by kikop on 2018/2/25.

 */

var objectLiteralManager = {

 

    //如何设置私有是关键,函数中使用时,加 this 限定

    defaultName: null,

    defaultArray: [],

 

    setName: function (tmpDefaultName) {

        this.defaultName = tmpDefaultName;

    },

    setArray: function (tmpArrays) {

 

        for (var i = 0; i < tmpArrays.length; i++) {

            this.defaultArray.push(tmpArrays[i]);

        }

 

    },

    getName: function () {

 

        //1.正确判断方式

        //if (null == this.defaultName) {

        //    this.defaultName = 'undefine value.';

        //}

        return this.defaultName;

    },

    getName_Global: function () {

 

        //1.正确判断方式

        //if(null ==this.defaultName){

        //    this.defaultName='undefine';

        //}

        //return this.defaultName;

 

        //2.错误使用,这里容易出错

 

        // 不加this ,这里 defaultName是 全局的

        defaultName = 'hello';

        if (defaultName == undefined) {

            defaultName = 'undefine';

        }

        return this.defaultName;

    },

};

//调试

$(function () {

 

    //objectLiteralManager.setName('hello,objectLiteralManager');

    //console.log(objectLiteralManager.getName());

    //

    //objectLiteralManager.setArray(['a', 'b', 'c']);

    //console.log(objectLiteralManager.defaultArray);

 

})

 

2.简单模块模式

 

function BaseComponent() {

}

 

function OtherComponent() {

}

 

 

//先赋值(返回对象的匿名函数)函数表达式,再执行

var simpleModulePattern = function () {

 

    //1.定义私有变量

    var privateVar = 10;

 

    var components = new Array();

    //初始化

    components.push(new BaseComponent());

 

    //2.定义私有函数

    function privateFunc() {

        console.log('privateFunc...')

        //return false;

    }

 

    //3.返回共用方法和属性

    return {

        publicProperty: true,

        publicMethod: function () {

            //privateVar++;

 

            //指向 私有方法

            return privateFunc();

        },

        getComponentCount: function () {

            return components.length;

        },

 

        registerComponent: function (component) {

            if (typeof component == "object") {

                components.push(component);

            }

        }

    }

}();

 

//调试

$(function () {

 

    //simpleModulePattern.publicMethod();

    //

    //simpleModulePattern.publicProperty=false;

    //console.log(simpleModulePattern.publicProperty);

    //

    //

    //

    //console.log(simpleModulePattern instanceof Object);

    //console.log(simpleModulePattern.getComponentCount());

    //simpleModulePattern.registerComponent(new OtherComponent());

    //console.log(simpleModulePattern.getComponentCount());

 

 

})

 

3.增强型模块模式

var advModulePattern = function () {

 

    //1.定义私有变量

    var components = new Array();

    //初始化

    components.push(new BaseComponent());

 

 

    var app = new BaseComponent();

 

    app.getComponentCount = function () {

        return components.length;

    };

 

    app.registerComponent = function (component) {

        if (typeof component == "object") {

            components.push(component);

        }

    };

 

    //3.返回该类型的 app

    return app;

 

}();  //立即执行

 

//调试

$(function () {

 

    //alert(advModulePattern instanceof BaseComponent);

    //advModulePattern.registerComponent(new OtherComponent());

    //alert(advModulePattern.getComponentCount());  //2

 

});

 

4.属于实例的私有变量

function Person(name) {

 

    //1.定义私有变量

    var privateVar = 10;

 

 

    //2.定义私有函数

    function privateFunc() {

        //在函数 Person内部可以访问 privateVar

        privateVar++;

        console.log('privateFunc...' + privateVar)

    }

 

    //3.定义特权方法

    this.getName = function () {

        return name;

    };

    this.setName = function (tmpName) {

        name = tmpName;

    };

    this.privateFuncWrap = function () {

        return privateFunc();

    }

}

 

//调试

$(function () {

 

    //var p1 = new Person('kikop');

    //console.log(p1.getName());

    //p1.privateFuncWrap();

    //

    //var p2 = new Person('kikop2');

    //console.log(p2.getName());

    //p2.privateFuncWrap();

 

});

 

5.块级作用域(又叫私有作用域)

(function () {

    //定义 块级作用域

    console.log('here is private range!');

 

})();

 

6.总结

//函数声明后面不可以跟圆括号

//函数表达式后面可以跟圆括号

//函数声明加个括号则被提升为函数表达式