您的位置:首页 > Web前端 > JavaScript

javascript 创建对象的方式总结

2015-09-18 15:29 696 查看
<1>.基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)
var obj = new Object();
obj.name = "userObject";
obj.printName = function(name){
     this.name = name;
     console.log(this.name);
}
obj.printName("newUserObject");

<2>.工厂方式创建对象(每次创建一个object后,其中对应的方法(本例中是get)也被创建一次,事实上每个对象共享了同一个函数):

[1].简单工厂模式
a.不带参数的构造方法
function Dog(){
    var dog = Object();
    dog.name = "xiaoHuang";
    dog.color = "Yellow";
    dog.get = function(){
          console.log(this.name+","+this.color);
    }
    return dog;
}
var dog1 = Dog();
var dog2 = Dog();
dog1.get();
dog2.get();
dog1.get() === dog2.get() // true;

b.带参数的构造方法
function Dog(name,color){
     var dog = Object();
     dog.name = name;
     dog.color = color;
     dog.get = function(){
          console.log(this.name+","+this.color);
     }
     return dog;
}
var dog1 = Dog("xiaoBlue","blue");
dog1.get();

c.让函数被多个创建的对象所共享,而不是每一个对象都创建一个相同的函数(缺点:对象定义本身和方法分离了)
function get(){
     console.log(this.name+","+this.color);
}
function Dog(name,color){
     var dog = Object();
     dog.name = name;
     dog.color = color;
     dog.get = get;
     return dog;
}
var dog1 = new Dog("xiaoRed","red");
var dog2 = new Dog("xiaoGreen","green");
dog1.get();
dog2.get();
dog1.get() === dog2.get();

<3>.混合工厂模式(创建假的构造函数,只返回另一种对象的新实例)
同样与简单工厂模式一样有三种方式
function Dog(){
     var dog = new Object();
     dog.name = "xiaoRed";
     dog.color = "red";
     dog.get = function(){
          console.log(this.name+","+this.color);
     }
     return dog;
}

与工厂方式所不同的是,这种方式使用new运算符。

<4>.构造函数方式
a.无参构造函数
function Person(){
     this.username = "zhangsan";
     this.pwd = "123";
     this.toString = function(){
          console.log(this.username+","+this.pwd);
     }
}
var person = new Person();
person.toString();

b.有参构造函数

unction Person(username,pwd){
     this.username = username;
     this.pwd = pwd;
     this.toString = function(){
          console.log(this.username+","+this.pwd);
     }
}
var person = new Person("xiaoHong","123456");
person.toString();
构造函数方式在函数内部没有创建对象,是用this关键字。因为在调用构造函数时已经创建了对象,而在函数内部只能用this来访问对象属性。
它同工厂方式一样。每次调用都会为对象创建自己的方法。

<5>.使用原型(prototype)方式创建对象

优点:创建的多个对象共享同一个方法(getInfo)
缺点:创建的多个对象在共享同一个方法的同时也共享了同样的属性(username,password),实际开发中这样儿是不行的,必须是多个对象都要有自己的属性。采用该方式创建对象通常是用来扩展已有对象的某一个方法。

a.无参构造函数

function Person(){}

Person.prototype.username = "zhangsan";

Person.prototype.password = "123";

Person.prototype.getInfo = function(){

     console.log(this.username + ", " + this.password);

}

var person = new Person();

var person2 = new Person();

person.username = "lisi";

person.getInfo();

person2.getInfo();

b.利用原型方式有个很严重的问题,创建对象,生成的所有对象将会共享原型中的属性,这样一个对象改变了该属性也会反应到其他的对象上,例如数组
function Car(){



Car.prototype.color = "red";

Car.prototype.doors = 4;

Car.prototype.arr = new Array("a","b");

Car.prototype.showColor = function(){

console.log(this.color);



var car1 = new Car();

var car2 = new Car();

car1.arr.push("cc");

console.log(car1.arr);  //aa,bb,cc

console.log(car2.arr);  //aa,bb,cc

<6>.联合的构造函数/原型方式
 用构造函数/原型方式就可以像其他程序设计语言一样创建对象,是用构造函数定义对象的非函数属性,用原型方式定义对象的方法。
function Car(color,door){

   this.color = color;

   this.doors = door;

   this.arr = new Array("aa","bb");

}

Car.prototype.showColor=function(){

   console.log(this.color);

}

var car1 = new Car("red",4);

var car2 = new Car("blue",4);

car1.arr.push("cc");

console.log(car1.arr);  //aa,bb,cc

console.log(car2.arr);  //aa,bb

<7>.动态原型方式
动态原型的方式同混合的构造函数/原型方式原理相似。唯一的区别就是赋予对象方法的位置。
动态原型方式:在构造函数中通过标志量让所有对象共享一个方法,而每个对象拥有自己的属性。
function Person(){

  this.username = "zhangsan";

  this.password = "123";

  if(typeof Person.flag == "undefined"){

       Person.prototype.toString = function(){

               console.log(this.username + ", " + this.password);

       }

       Person.flag = true;

  }

}

var p = new Person();

var p2 = new Person();

p.toString();

p2.toString();
 动态原型方式是使用一个标志来判断是否已经给原型赋予了方法。这样可以保证该方法只创建一次
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息