创建对象的五种方式

1、字面量模式

字面量(literal)是用于表达源代码中一个固定值的表示法

//字面量模式创建对象
var person1 = {
  name : "zhar",
  age : 30
}
//var person2 = ...
//var personN = ...

缺点:将出现大量重复冗余的代码

2、工厂模式

为了解决字面量模式创建对象的重复代码问题,可以将创建过程抽象出来成为一个工厂,即:使用一个函数来创建对象。

function createPerson(name,age){
  var obj = {};
  obj.name = name;
  obj.age = age;
  return obj;
}
var person1 = createPerson("zhar",30);
//var person2 = createP...
//var personN = createP...

缺点:虽然工厂模式可以解决字面量创建对象时的重复代码,但并没有解决对象类型识别的问题,即:怎样知道这个对象属于什么类(如:Object Array 这种类型定义)

即无法用instanceof来判断person是否是createPerson的实例

3、构造函数

对比以下代码:

function Person(name,age){
  this.name = name;
  this.age = age;
  this.say = function(){
    console.log(this.name+"-"+this.age);
  }
}
var person1 = new Person("zhar",30);
person1.say();//zhar-30
var person2 = new Person("tom",19);
person2.say();//tom-19

上面便是一个典型的构造函数,通过观察可以发现,有一些不同的地方:

  • Person 函数并没有返回值,而是将 name、age 等属性赋给了 this 关键字
  • Person 函数的首字母P是大写
  • 在调用该对象时,使用的是 new Person
  • Person 函数没有return关键字
    构造函数实际也是一个普通的函数,首字母大写是惯例,用来表明该函数是一个构造函数,用于区分。

person1、person2被称为 Person 的实例

如果不使用 new去调用构造函数会怎样?

function Person(name,age){
  this.name = name;
  this.age = age;
  this.say = function(){
    console.log(this.name+"-"+this.age);
  }
}
Person("zhar",30);
//say函数哪里去了?
window.say();

缺点:每个方法(上例中的 say 方法)会在每一个实例上创建一次(上例中的 person1、person2实例),这样做是没有必要的.

可通过 person1.say === person2.say 去判断

4、原型模式

在 Javascript 中,每一个函数都有一个原型(prototype)属性,该属性指向一个对象,该对象可被所有实例共享,也就意味着,我们可以不必在构造函数中指定属性,而将这些属性或方法都添加到原型中去。

function Person(){}
Person.prototype.name = "zhar";
Person.prototype.age = 30;
Person.prototype.say = function(){
  console.log(this.name + "-" +this.age);
}
var person1 = new Person();
person1.say();//zhar-30
var person2 = new Person();
person2.age = 50;
person2.say();//zhar-50

缺点:原型模式固然可以减少函数的重复创建,但问题在于所有实例都共享了同样的属性(上例中的 name、age),这在函数或简单类型的值时没有太大的问题,但在引用数据类型(如:数组,此时修改一个会对所有的造成影响)中,则会带来重大的问题。

注释:构造函数模式属性为全新开辟空间写入的,故不存在数据复制的问题,然而原型模式实例共享了同样的属性可以理解为复制之后修改,修改时原始数据类型不会互相产生影响,而引用数据类型之间就会产生牵一发而动全身的效果啦~

//省略...
Person.prototype.desc = ["北京","海淀"];
//省略...
person2.desc[1]="昌平";
console.log(person1.desc,person1.age);//[ '北京', '昌平' ] 30
console.log(person2.desc,person2.age);//[ '北京', '昌平' ] 55
> ```
正如上例所示,**引用数据类型是相互影响的**

###5、构造函数+原型模式混合模式
  结合了上面所有模式的缺点,我们可以使用混合构造函数与原型的模式去构建对象

function Person(name,age){
this.name = name;
this.age = age;
this.address = ["北京"];
}
Person.prototype.say = function(){
console.log(this.name+"-"+this.age+"-"+this.address);
}
var person1 = new Person("zhar",30);
person1.address.push("昌平");
var person2 = new Person("tom",15);
person2.address.push("海淀");
person1.say();//zhar-30-北京,昌平
person2.say();//tom-15-北京,海淀

> 将数据声明到构造函数内部(避开了数据为引用数据类型时的改一个而动全身的影响);
将函数声明到函数原型对象上;
这是最为推荐的一种形式

**注:    可以使用console.dir(obj)来打印出一个对象所有的属性和方法。**

你可能感兴趣的:(创建对象的五种方式)