摘要
“在JS中,一切皆对象”,相信很多朋友都听说这句话。假如你去问一些做前端开发工作的朋友他们是如何创建一个对象的,笔者相信你得到最多的答案应该是:Object构造函数和对象字面量。今天笔者就来详细总结一下JavaScript中创建对象的方法。
“在JS中,一切皆对象”,相信很多朋友都听说这句话。假如你去问一些做前端开发工作的朋友他们是如何创建一个对象的,笔者相信你得到最多的答案应该是:Object构造函数和对象字面量。今天笔者就来详细总结一下JavaScript中创建对象的方法。
一、Object构造函数
- var oPerson = new Object();
- obj.name = 'shaw';
- obj.age = 18;
二、对象字面量
- var oPerson = {name: 'shaw', age: 18};
这两种创建对象的方法相信是很多前端开发工程师常用的方式,而且大多数工程师更习惯于使用对象字面量的方式。以上两种方式虽然书写简便,但是在创建多个对象时往往就会出现大量相同的代码。JS在设计中为了避免此类情况的发生,衍生出了“工厂模式”。
三、工厂模式
听到“工厂模式”,很多朋友可能没有任何概念。其实用一句话概括就是:我负责创建一个对象和创建对象的整个过程,其余我的就不归我管了。
如果还是没弄明白,看看下面的代码:
- function createPerson(name, age) {
- var obj = new Object();
- obj.name = name;
- obj.age = age;
- return obj;
- }
- var oPerson = createPerson('shaw', 18);
四、构造函数
- function Person(name, age) {
- this.name = name;
- this.age = age;
- }
- var oPerson = new Person('shaw', 18);
我们可以看到,相比较于“工厂模式”,构造函数的方式更为简洁。通过对比代码,我们也能总结出“工厂模式”和面向对象的区别。
1、构造函数创建对象的时候以new关键字调用
2、构造函数将属性挂载到this下
3、构造函数不需要返回值
五、原型模式
- function Person() {}
- Person.prototype.name = 'shaw';
- Person.prototype.age = 18;
- var oPerson = new Person();
- // 上面的方法还可以用字面量的方式进行简写
- function Person() {}
- Person.prototype = {
- constructor: Person,
- name: 'shaw',
- age: 18
- }
- var oPerson = new Person();
注:使用这种方式的时候,我们需要注意自己手动重置一下constructor,不过这种方式还是不够好,应为constructor属性默认是不可枚举的,这样直接设置后它将变为可枚举的属性。
六、组合使用构造函数和原型模式
- function Person(name, age) {
- this.name = name;
- this.age = age;
- }
- Person.prototype.say = function() {
- console.log(this.name);
- }
- var oPerson = new Person('shaw', 18);
这种方式不同于原型模式,这也是使用最为广泛的一种形式。这种形式既保证了每个对象属性的私有性,同时对象之间还共享了相同的方法。