几种JS创建对象的方式分享-js教程-PHP中文网

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

小云云

发布： 2018-03-13 18:04:21

原创

1612人浏览过

本文主要和大家分享几种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、组合使用构造函数模式和原型模式

北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

查看详情

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"

登录后复制