本文系统梳理JavaScript中创建对象的六种常见方式,包括Object构造函数、对象字面量、工厂模式、构造函数模式、原型模式以及组合使用构造函数和原型模式。详细解析每种方法的代码实现、优缺点及适用场景,帮助开发者根据实际需求选择最优方案。
近期深入研读《JavaScript高级程序设计》,借此机会整理并总结JavaScript中几种主要的对象创建方式。以下直接进入核心内容。
Object构造函数与对象字面量
第一种方式:利用Object构造函数创建对象。
var Person = new Object();
Person.name = 'Nike';
Person.age = 29;
该代码示例展示了如何创建一个Object引用类型的新实例,并将该实例赋值给变量Person。
第二种方式:采用对象字面量表示法。
var Person = {};//相当于var Person = new Object();
var Person = {
name:'Nike';
age:29;
}
对象字面量是定义对象的一种简洁形式,旨在简化包含大量属性对象的创建过程。实际上,第一种与第二种方式在本质上是相同的,仅存在语法写法的差异。
在介绍第三种方法前,需明确为何需要其他创建方式,即前两种方法的局限性:它们使用同一接口创建多个对象时,会产生大量重复代码。例如,若需创建100个对象,则需重复输入大量相同代码。为解决此问题,可将对象创建过程封装在函数体内,通过调用函数直接生成对象。
工厂模式创建对象
第三种方式:利用工厂模式创建对象。
function createPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson('Nike',29,'teacher');
var person2 = createPerson('Arvin',20,'student');
在使用工厂模式时,createPerson函数返回的是一个对象。由于无法直接判断返回对象的具体类型,因此出现了第四种创建模式。
构造函数模式
第四种方式:利用构造函数创建对象。
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person('Nike',29,'teacher');
var person2 = new Person('Arvin',20,'student');
与工厂模式相比,构造函数模式具有以下区别:
1. 未显式创建对象。
2. 直接将属性和方法赋值给this对象。
3. 省略了return语句。
4. 能够识别对象的类型。对于对象类型的检测,应使用instanceof操作符进行自主验证。
alert(person1 instanceof Object);//ture
alert(person1 instanceof Person);//ture
alert(person2 instanceof Object);//ture
alert(person2 instanceof Object);//ture
此外,需遵循命名惯例:构造函数始终以大写字母开头,而非构造函数则以小写字母开头。
虽然构造函数模式实用,但也存在缺陷:
每个方法都会在实例上重新创建一遍,这里的方法指在对象内部定义的函数。若方法数量众多,将占用不必要的内存空间。因此,出现了第五种创建对象的方法。
原型模式与组合模式
第五种方式:利用原型创建对象模式。
function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName();
采用原型创建对象的方式,可使所有对象实例共享其所包含的属性和方法。
若使用原型创建对象模式,请参考以下代码示例。
function Person(){}
Person.prototype.name = 'Nike';
Person.prototype.age = 20;
Person.prototype.jbo = 'teacher';
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name ='Greg';
alert(person1.name); //'Greg' --来自实例
alert(person2.name); //'Nike' --来自原型
当为对象实例添加一个属性时,该属性会屏蔽原型对象中保存的同名属性。
此时,可采用构造函数模式与原型模式结合的方式:构造函数模式用于定义实例属性,而原型模式用于定义方法和共享属性。
第六种方式:组合使用构造函数模式和原型模式。
function Person(name,age,job){
this.name =name;
this.age = age;
this.job = job;
}
Person.prototype = {
constructor:Person,
sayName: function(){
alert(this.name);
};
}
var person1 = new Person('Nike',20,'teacher');
以上内容为本文的全部总结,希望这些内容能对各位的学习或工作有所帮助,同时也感谢大家的支持。