浅理解

JavaScript中没有类的概念，所以其在对象创建方面与面向对象语言有所不同。

JS是一种基于对象的语言，对象的概念在JS体系中十分的重要，因此有必要清楚地了解一下JS中对象创建的常用方法及各自的局限性

使用Object或对象字面量创建对象

在说工厂模式创建对象之前，我们不妨回顾一下JS中最基本的创建对象的方法，比如说我想创建一个student对象怎么办？最简单地，new一个Object：

var student = new Object();
student.name = "easy";
student.age = "20";

复制代码

这样，一个student对象就创建完毕，拥有2个属性name以及age，分别赋值为”easy”和20。

如果你嫌这种方法有一种封装性不良的感觉，我们也可以使用对象字面量的方式来创建student对象：

var sutdent = {
  name : "easy",
  age : 20
};

复制代码

这样看起来似乎就完美了。但是马上我们就会发现一个十分尖锐的问题：当我们要创建同类的student1，student2，…，studentn时，我们不得不将以上的代码重复n次。

var sutdent1 = {
  name : "easy1",
  age : 20
};

var sutdent2 = {
  name : "easy2",
  age : 20
};

...

var sutdentn = {
  name : "easyn",
  age : 20
};

复制代码

构造函数模式创建对象

在上面创建Object这样的原生对象的时候，我们就使用过其构造函数：

var obj = new Object();

复制代码

在创建原生数组Array类型对象时也使用过其构造函数：

var arr = new Array(10);  //构造一个初始长度为10的数组对象

复制代码

在进行自定义构造函数创建对象之前，我们首先了解一下构造函数和普通函数有什么区别。

其一，实际上并不存在创建构造函数的特殊语法，其与普通函数唯一的区别在于调用方法。对于任意函数，使用new操作符调用，那么它就是构造函数；不使用new操作符调用，那么它就是普通函数。

其二，按照惯例，我们约定构造函数名以大写字母开头，普通函数以小写字母开头，这样有利于显性区分二者。例如上面的new Array()，new Object()。

其三，使用new操作符调用构造函数时，会经历(1)创建一个新对象；(2)将构造函数作用域赋给新对象（使this指向该新对象）；(3)执行构造函数代码；(4)返回新对象；4个阶段。

了解了构造函数和普通函数的区别之后，我们使用构造函数将工厂模式的函数重写，并添加一个方法属性：

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.alertName = function(){
    alert(this.name)
  };
}

function Fruit(name, color) {
  this.name = name;
  this.color = color;
  this.alertName = function(){
    alert(this.name)
  };
}

复制代码

这样我们再分别创建Student和Fruit的对象：

var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");

复制代码

这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了：

alert(v1 instanceof Student);  //true
alert(v2 instanceof Student);  //false
alert(v1 instanceof Fruit);  //false
alert(v2 instanceof Fruit);  //true

alert(v1 instanceof Object);  //true 任何对象均继承自Object
alert(v2 instanceof Object);  //true 任何对象均继承自Object

复制代码

这样我们就解决了工厂模式无法区分对象类型的尴尬。那么使用构造方法来创建对象是否已经完美了呢？

我们知道在JS中，函数是对象。那么，当我们实例化不止一个Student对象的时候：

var v1 = new Student("easy1", 20);
var v2 = new Student("easy2", 20);
...
var vn = new Student("easyn", 20);

复制代码

其中共同的alertName()函数也被实例化了n次，我们可以用以下方法来检测不同的Student对象并不共用alertName()函数：

alert(v1.alertName == v2.alertName);  //flase

复制代码

这无疑是一种内存的浪费。我们知道，this对象是在运行时基于函数的执行环境进行绑定的。在全局函数中，this对象等同于window；在对象方法中，this指向该对象。在上面的构造函数中：

this.alertName = function(){
    alert(this.name)
  };

复制代码

我们在创建对象（执行alertName函数之前）时，就将alertName()函数绑定在了该对象上。我们完全可以在执行该函数的时候再这样做，办法是将对象方法移到构造函数外部：

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.alertName = alertName;
}

function alertName() {
  alert(this.name);
}

var stu1 = new Student("easy1", 20);
var stu2 = new Student("easy2", 20);

复制代码

在调用stu1.alert()时，this对象才被绑定到stu1上。

我们通过将alertName()函数定义为全局函数，这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数，解决了内存浪费的问题。

但是，通过全局函数的方式解决对象内部共享的问题，终究不像一个好的解决方法。如果这样定义的全局函数多了，我们想要将自定义对象封装的初衷便几乎无法实现了。更好的方案是通过原型对象模式来解决。

深入理解

new表达式是配合构造函数使用的，例如new String(“a string”)，调用内置的String函数构造了一个字符串对象。下面我们用构造函数的方式来重新创建一个实现同样功能的对象，首先是定义构造函数，然后是调用new表达式：

function CO(){
     this .p = “I’m in constructed object”;
     this .alertP = function(){
         alert( this .p);
     }
}
var o2 = newCO();
复制代码

那么，在使用new操作符来调用一个构造函数的时候，发生了什么呢？其实很简单，就发生了四件事：

var obj  ={};
obj.__proto__ = CO.prototype;
CO.call(obj);
return  obj;
复制代码

第一行，创建一个空对象obj。

第二行，将这个空对象的__proto__成员指向了构造函数对象的prototype成员对象，这是最关键的一步，具体细节将在下文描述。

第三行，将构造函数的作用域赋给新对象，因此CA函数中的this指向新对象obj，然后再调用CO函数。于是我们就给obj对象赋值了一个成员变量p，这个成员变量的值是” I’min constructed object”。

第四行，返回新对象obj。当构造函数里包含返回语句时情况比较特殊，这种情况会在下文中说到。

正确定义JavaScript构造函数

不同于其它的主流编程语言，JavaScript的构造函数并不是作为类的一个特定方法存在的；当任意一个普通函数用于创建一类对象时，它就被称作构造函数，或构造器。一个函数要作为一个真正意义上的构造函数，需要满足下列条件：

1、在函数内部对新对象（this）的属性进行设置，通常是添加属性和方法。

2、构造函数可以包含返回语句（不推荐），但返回值必须是this，或者其它非对象类型的值。

上文定义的构造函数CO就是一个标准的、简单的构造函数。下面例子定义的函数C1返回了一个对象，我们可以使用new表达式来调用它，该表达式可以正确返回一个对象：

function C1(){
     var o = {
         p:”I’m p in C1”
     }
     return  o;
}
var o1 =  new  C1();
alert(o1.p); //I’m p in C1
复制代码

但这种方式并不是值得推荐的方式，因为对象o1的原型是函数C1内部定义的对象o的原型，也就是Object.prototype。这种方式相当于执行了正常new表达式的前三步，而在第四步的时候返回了C1函数的返回值。该方式同样不便于创建大量相同类型的对象，不利于使用继承等高级特性，并且容易造成混乱，应该摒弃。

一个构造函数在某些情况下完全可以作为普通的功能函数来使用，这是JavaScript灵活性的一个体现。下例定义的C2就是一个“多用途”函数：

function C2(a, b){
     this .p = a + b;
     this .alertP = function(){
         alert( this .p);
     }
     return  this .p; //此返回语句在C2作为构造函数时没有意义
}
var c2 =  new  C2( 2 , 3 );
c2.alertP(); //结果为5
alert(C2( 2 ,  3 ));  //结果为5
复制代码

该函数既可以用作构造函数来构造一个对象，也可以作为普通的函数来使用。用作普通函数时，它接收两个参数，并返回两者的相加的结果。为了代码的可读性和可维护性，建议作为构造函数的函数不要掺杂除构造作用以外的代码；同样的，一般的功能函数也不要用作构造对象。

为什么要使用构造函数

根据上文的定义，在表面上看来，构造函数似乎只是对一个新创建的对象进行初始化，增加一些成员变量和方法；然而构造函数的作用远不止这些。为了说明使用构造函数的意义，我们先来回顾一下前文提到的例子。执行var o2 = new CO();创建对象的时候，发生了四件事情：

var obj  ={};
obj.__proto__ = CO.prototype;
CO.call(obj);
return  obj;
复制代码

我们说最重要的是第二步，将新生成的对象的__prop__属性赋值为构造函数的prototype属性，使得通过构造函数创建的所有对象可以共享相同的原型。这意味着同一个构造函数创建的所有对象都继承自一个相同的对象，因此它们都是同一个类的对象。关于原型（prototype）和继承的细节，笔者会再另一篇文章中深入说明。

在JavaScript标准中，并没有__prop__这个属性，不过它现在已经是一些主流的JavaScript执行环境默认的一个标准属性，用于指向构造函数的原型。该属性是默认不可见的，而且在各执行环境中实现的细节不尽相同，例如IE浏览器中不存在该属性。我们只要知道JavaScript对象内部存在指向构造函数原型的指针就可以了，这个指针是在调用new表达式的时候自动赋值的，并且我们不应该去修改它。

在构造对象的四个步骤中，我们可以看到，除第二步以外，别的步骤我们无须借助new表达式去实现，因此new表达式不仅仅是对这四个步骤的简化，也是要实现继承的必经之路。

容易混淆的地方！！！！！！！！！

关于JavaScript的构造函数，有一个容易混淆的地方，那就是原型的constructor属性。在JavaScript中，每一个函数都有默认的原型对象属性prototype，该对象默认包含了两个成员属性：constructor和__proto__。关于原型的细节就不在本文赘述了，我们现在关心的是这个constructor属性。

按照面向对象的习惯性思维，我们说构造函数相当于“类”的定义，从而可能会认为constructor属性就是该类实际意义上的构造函数，在new表达式创建一个对象的时候，会直接调用constructor来初始化对象，那就大错特错了。new表达式执行的实际过程已经在上文中介绍过了（四个步骤），其中用于初始化对象的是第三步，调用的初始化函数正是“类函数”本身，而不是constructor。如果没有考虑过这个问题，这一点可能不太好理解，那就让我们举个例子来说明一下吧：

function C3(a, b){
     this .p = a + b;
     this .alertP = function(){
         alert( this .p);
     }
}
//我们定义一个函数来覆盖C3原型中的constructor，试图改变属性p的值
function fake(){
     this .p =  100 ;
}
C3.prototype.constructor = fake;  //覆盖C3原型中的constructor
var c3 =  new  C3( 2 , 3 );
c3.alertP(); //结果仍然为5
复制代码

上述代码手动改变了C3原型中的constructor函数，然而却没有对c3对象的创建产生实质的影响，可见在new表达式中，起初始化对象作用的只能是构造函数本身。那么constructor属性的作用是什么呢？一般来说，我们可以使用constructor属性来测试对象的类型：

var myArray = [ 1 , 2 , 3 ];
(myArray.constructor == Array);  // true
复制代码

这招对于简单的对象是管用的，涉及到继承或者跨窗口等复杂情况时，可能就没那么灵光了：

function f() {  this .foo =  1 ;}
function s() {  this .bar =  2 ; }
s.prototype =  new  f();  // s继承自f
  
var son =  new  s();  // 用构造函数s创建一个子类对象
(son.constructor == s);  // false
(son.constructor == f);  // true
复制代码

这样的结果可能跟你的预期不相一致，所以使用constructor属性的时候一定要小心，或者干脆不要用它。
————————————————
版权声明：本文为CSDN博主「Easy-Sir」的原创文章jxjy

文章版权归作者所有，未经允许请勿转载。

THE END

前端