• 技术文章 >web前端 >js教程

    几种JS创建对象的方式分享

    小云云小云云2018-03-13 18:04:21原创724
    本文主要和大家分享几种JS创建对象的方式,希望能帮助到大家。

    1、使用原生构造函数创建特定类型的对象

      var person =new Object();
        person.name="wangwu";
        person.age="20";
        person.sayName=function(){
        alert(this.name);
    }

    2.用对象字面量

    var person = {
        name:"wangwu",
        age:"20",
        sayName: function(){
            alert(this.name);
        }
    }

    小结:这两种方式都可以用来创建单个对象,但是有明显的缺点,使用同一个接口创建很多对象,会产生大量重复代码。

    3.使用工厂模式

    function createPerson(name,age){
        var o=new Object();
        o.name=name;
        o.age=age;
        o.sayName=function(){
                alert(this.name);
        };
        return o;
    }
    var person1=createPerson("wangwu",20);

    抽象了创建具体对象的过程,发明一种函数,用函数来封装以特定接口创建对象的细节。

    4、构造函数模式

    function  Person(name,age){
        this.name=name;
        this.age=age;
        this.sayName=function(){
            alert(this.name);
        };
    }
    var person1=new Person("wangwu",20);

    创建自定义的构造函数,从而定义自定义对象类型的属性和方法。

    5、原型模式

    function Person(){
    }
    Person.prototype.name="wangwu";
    Person.prototype.age=20;
    Person.prototype.sayName=function(){
        alert(this.name);
    }
    var person1=new Person();
    person1.sayName(); //wangwu

    我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。原型模式的缺点是省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都取得相同的属性值;原型中所有属性是被很多实例共享的,对于包含引用类型值的属性来说问题就比较突出了。

    6、组合使用构造函数模式和原型模式

    function Person(name,age){
        this.name=name;
        this.age=age;
        this.friends=["wangwu","zhangsan"];
    }
    Person.prototype={
        constructor:Person,
        sayName:function(){
            alert(this.name);
        }
    }
    var person1=new Person("wangwu",20);
    var person2=new Person("zhangsan",23);
    person1.friends.push("lisi");
    alert(person1.friends); //"wangwu,zhangsan,lisi"
    alert(person2.friends); //"wangwu,zhangsan"

    7、动态原型模式

      function Person(name,age,job){
            //属性
        this.name=name;
        this.age=age;
        this.job=job;
    //方法
    if(typeof this.sayName!="function"){
        person.prototype.sayName=function(){
                alert(this.name);
        };
    }
    }
    var  friend=new Person("wangwu",20);
    friends.sayName();

    8、寄生构造函数模式

    function Person(name,age){
        var 0=new Object();
        o.name="wangwu";
        o.age=20;
        o.sayName=function(){
            alert(this.name);
        };
        return o;
    }
    var friend=new Person("wangwu",20);
    friend.sayName(); //"wangwu"

    9、稳妥构造函数模式

    function Person(name,age,job){
        //创建要返回的对象
        var  o=new Object();
        //可以在这里定义私有变量和函数
        //添加方法
        o.sayName=function(){
            alert(name);
        };
    //返回对象
    return o;
    }
    var friend=Person("wangwu",20);
    friend.sayName();  //"wangwu"

    相关推荐:

    js创建对象的方法汇总(示例代码)

    Js创建对象额几种方式

    js创建对象的几种常用方式小结(推荐)_js面向对象

    以上就是几种JS创建对象的方式分享的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 分享 方式
    上一篇:flex布局详解 下一篇:HTML、JS、字符串的中简单加密与解密详解
    Web大前端开发直播班

    相关文章推荐

    • Angular项目如何上线?结合nginx来聊聊上线流程!• 什么是流(Stream)?如何理解Nodejs中的流• 一文聊聊Angular中的生命周期• 什么是管道?浅析Angular中的管道(PIPE)• 值得了解的几个实用JavaScript优化小技巧

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网