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

2018-03-2003:31:06WEB前端开发Comments2,247 views字数 3705阅读模式

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

/**文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

 * Created by kikop on 2018/2/25.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

 */文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

var objectLiteralManager = {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //如何设置私有是关键,函数中使用时,加 this 限定文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    defaultName: null,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    defaultArray: [],文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    setName: function (tmpDefaultName) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        this.defaultName = tmpDefaultName;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    },文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    setArray: function (tmpArrays) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        for (var i = 0; i < tmpArrays.length; i++) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

            this.defaultArray.push(tmpArrays[i]);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    },文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    getName: function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //1.正确判断方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //if (null == this.defaultName) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //    this.defaultName = 'undefine value.';文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        return this.defaultName;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    },文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    getName_Global: function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //1.正确判断方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //if(null ==this.defaultName){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //    this.defaultName='undefine';文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //return this.defaultName;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //2.错误使用,这里容易出错文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        // 不加this ,这里 defaultName是 全局的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        defaultName = 'hello';文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        if (defaultName == undefined) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

            defaultName = 'undefine';文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        return this.defaultName;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    },文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

};文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

//调试文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

$(function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //objectLiteralManager.setName('hello,objectLiteralManager');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //console.log(objectLiteralManager.getName());文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //objectLiteralManager.setArray(['a', 'b', 'c']);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //console.log(objectLiteralManager.defaultArray);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

2.简单模块模式

function BaseComponent() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

function OtherComponent() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

//先赋值(返回对象的匿名函数)函数表达式,再执行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

var simpleModulePattern = function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //1.定义私有变量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    var privateVar = 10;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    var components = new Array();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //初始化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    components.push(new BaseComponent());文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //2.定义私有函数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    function privateFunc() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        console.log('privateFunc...')文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //return false;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //3.返回共用方法和属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    return {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        publicProperty: true,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        publicMethod: function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

            //privateVar++;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

            //指向 私有方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

            return privateFunc();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        },文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        getComponentCount: function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

            return components.length;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        },文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        registerComponent: function (component) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

            if (typeof component == "object") {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

                components.push(component);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

            }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

}();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

//调试文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

$(function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //simpleModulePattern.publicMethod();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //simpleModulePattern.publicProperty=false;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //console.log(simpleModulePattern.publicProperty);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //console.log(simpleModulePattern instanceof Object);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //console.log(simpleModulePattern.getComponentCount());文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //simpleModulePattern.registerComponent(new OtherComponent());文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //console.log(simpleModulePattern.getComponentCount());文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

3.增强型模块模式

var advModulePattern = function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //1.定义私有变量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    var components = new Array();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //初始化文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    components.push(new BaseComponent());文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    var app = new BaseComponent();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    app.getComponentCount = function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        return components.length;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    };文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    app.registerComponent = function (component) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        if (typeof component == "object") {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

            components.push(component);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    };文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //3.返回该类型的 app文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    return app;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

}();  //立即执行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

//调试文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

$(function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //alert(advModulePattern instanceof BaseComponent);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //advModulePattern.registerComponent(new OtherComponent());文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //alert(advModulePattern.getComponentCount());  //2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

4.属于实例的私有变量

function Person(name) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //1.定义私有变量文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    var privateVar = 10;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //2.定义私有函数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    function privateFunc() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        //在函数 Person内部可以访问 privateVar文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        privateVar++;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        console.log('privateFunc...' + privateVar)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //3.定义特权方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    this.getName = function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        return name;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    };文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    this.setName = function (tmpName) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        name = tmpName;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    };文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    this.privateFuncWrap = function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

        return privateFunc();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

//调试文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

$(function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //var p1 = new Person('kikop');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //console.log(p1.getName());文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //p1.privateFuncWrap();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //var p2 = new Person('kikop2');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //console.log(p2.getName());文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //p2.privateFuncWrap();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

});文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

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

(function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    //定义 块级作用域文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

    console.log('here is private range!');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

})();文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

6.总结

//函数声明后面不可以跟圆括号文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

//函数表达式后面可以跟圆括号文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

//函数声明加个括号则被提升为函数表达式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/2130.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/2130.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定