一、工厂模式
function createPerson(name, age) { ???var o = new Object(); ???o.name = name; ???o.age = age; ???o.say = function () { ????????alert(this.name); ???}; ???return o;
}
每次调用这个函数都会返回一个包含两个属性和一个方法的对象。
二、构造函数模式
js中的构造函数可以用来创建特定类型的对象,像object和array这样的原生构造函数,在运行时会自动出现在执行环境中。此外,也是可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。
1 function Person(name,age){2 ??????this.name = name;3 ??????this.age = age;4 ??????this.say = function(){5 ???????????alert(this.name);6 ??????}7 ?}8 var person1 = new Person("xiaoming","18");
构造函数也是函数,只是调用他们的方式不同,任何函数,只要通过new操作符调用,则它就可以作为构造函数;不通过new操作符调用,则就是普通函数。
1、当做构造函数
1 var person1 = new Person("xiaoming",18); 2 person1.say(); ?// xiaoming
2、当做普通函数
1 Person("xiaozhu",20); ??//添加到window2 window.say(); ???// xiaozhu
三、原型模式
我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,这个对象包含所有实例共享的属性和方法。按照字面意思,那么prototype就是通过调用构造函数而创建的对象实例的原型对象。使用它的好处是,可以让所有对象实例共享原型中所包含的属性和方法。
1 ????????function Person(){} 2 ????????Person.prototype.name="xiaoming"; 3 ????????Person.prototype.age=18; 4 ????????Person.prototype.say=function(){ 5 ????????????alert(this.name); 6 ????????} 7 ????????var person1=new Person(); 8 ????????person1.say(); ?// xiaoming 9 ????????var person2 = new Person();10 ????????person2.say(); ?// xiaoming
然而当包含引用类型值的属性时,就会出现问题;
1 ????????function Person(){} 2 ????????Person.prototype.name="xiaoming"; 3 ????????Person.prototype.age=18; 4 ????????Person.prototype.eat=[‘苹果‘,‘橘子‘]; 5 ????????Person.prototype.say=function(){ 6 ????????????alert(this.name); 7 ????????} 8 ????????var person1=new Person(); 9 ????????10 ????????alert(person1.eat); ?// 苹果 橘子11 ????????person1.eat.push("香蕉");12 ????????var person2 = new Person();13 ????????alert(person2.eat); ?// 苹果 橘子 香蕉
可以看到,eat属性是引用类型的值,当person1更改了eat数组,则在person2中也能反映出来,然而这并不是我们想要的结果。继续看。
四、组合使用构造函数和原型模式
这种方式能极大解决单独使用构造函数或者原型模式带来的问题。这种方式是目前使用最广泛的方法;组合使用,构造函数用来定义实例属性,原型模式用来定义方法和共享属性。这样每个实例都会有属于自己的实例属性副本,而且同时又共享着对方法的引用,最大限度的节省了内存。
1 ????????function Person(name,age){ 2 ????????????this.name=name; 3 ????????????this.age=age; 4 ????????????this.eat=[‘苹果‘,‘橘子‘]; 5 ????????} 6 ????????Person.prototype.say=function(){ 7 ????????????alert(this.name); 8 ????????} 9 ????????var person1=new Person("xiaoming",18);10 ????????alert(person1.eat); ?// 苹果 橘子11 ????????person1.eat.push("香蕉");12 ????????var person2 = new Person();13 ????????alert(person2.eat); ?// 苹果 橘子
js创建对象的几种方式
原文地址:https://www.cnblogs.com/aizz/p/9463641.html