JS面向对象编程之封装

咱们所熟知的面向对象语言如 C++、Java 都有类的的概念，类是实例的类型模板，好比Student表示学生这种类型，而不表示任何具体的某个学生，而实例就是根据这个类型建立的一个具体的对象，好比zhangsan、lisi，由类生成对象体现了抽象模板到具体化的过程，这叫作基于类的面向对象方式，而 JavaScript 没有类的概念，是基于原型的面向对象方式（虽然 Es6 增长了 class，实质是对原型方式的封装）。总结起来就是如下两点：

• 在基于类的面向对象方式中，对象（object）依靠类（class）来产生。
• 在基于原型的面向对象方式中，对象（object）则是依靠构造函数（constructor）和原型（prototype）构造出来的。

面向对象语言的第一个特性毫无疑问是封装，在 JS 中，封装的过程就是把一些属性和方法放到对象中“包裹”起来，那么咱们要怎么去封装属性和方法，或者说怎么去建立对象呢（后文统一说建立对象）？下面用逐步推动的方式阐述：

对象字面量 --> 工厂模式 --> 构造函数 --> 原型模式 --> 构造函数+原型模式

对象字面量

JS中建立对象最原始的方式有两种：

• 对象字面量

var  person = {
    name: "leon",
    age: "20",

    greeting: function() {
      alert('Hi!');
    }
}

• 为Object实例添加属性方法

var person = new Object();
person.name = "leon";
person.age = "20";

person.greeting = function() {
  alert('Hi!');
};

• 优势：代码简单
• 缺点： 建立多个对象会产生大量的代码，编写麻烦，且并无实例与原型的概念。
• 解决办法：工厂模式。

工厂模式

工厂模式是编程领域一种广为人知的设计模式，它抽象了建立具体对象的过程。JS 中建立一个函数，把建立新对象、添加对象属性、返回对象的过程放到这个函数中，用户只需调用函数来生成对象而无需关注对象建立细节，这叫工厂模式：

function createPerson(name, age) {
  var person = new Object();
  person.name = name;
  person.age = age;

  person.greeting = function() {
    alert('Hi!');
  };
  return person;
}

var person1 = createPerson("leon", "20");

• 优势：工厂模式解决了对象字面量建立对象代码重复问题，建立类似对象可使用同一API。
• 缺点：由于是调用函建立对象，没法识别对象的类型。
• 解决办法：构造函数

构造函数

JS 中构造函数与其余函数的惟一区别，就在于调用它的方式不一样。任何函数，只要经过new 操做符来调用，那它就能够做为构造函数。来看下面的例子：

function Person(name, age) {
  this.name = name;
  this.age = age;
  
  this.greeting = function() {
    alert('Hi!');
  };
  // return this;
}

var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");

经过构造函数new一个实例经历了四步：

1. 建立一个新对象；
2. 将构造函数内的this绑定到新对象上；
3. 为新对象添加属性和方法；
4. 返回新对象（JS 引擎会默认添加 return this;）。

而经过构造函数建立的对象都有一个constructor属性，它是一个指向构造函数自己的指针，所以就能够检测对象的类型啦。：

alert(person1.constructor === Person) //true
alert(person1 instanceof Person) // true

可是仍然存在问题：

alert(person1.greeting == person2.greeting) //false

同一个构造函数中定义了greeting()，而不一样实例上的同名函数倒是不相等的，意味着这两个同名函数的内存空间不一致，也就是构造函数中的方法要在每一个实例上从新建立一次。这显然是不划算的。

• 优势：解决了相似对象建立问题，且能够检测对象类型。
• 缺点：构造函数方法要在每一个实例上新建一次。
• 解决办法：原型模式。

原型模式

终于讲到了原型模式，JS 中每一个构造函数都有一个prototype属性，这个属性是一个指针，指向原型对象，而这个原型对象包含了这个构造函数全部实例共享的属性和方法。而实例对象中有一个proto属性，它指向原型对象，也就是构造函数.prototype == 原型对象 == 对象._proto_，那么对象就能够获取到原型对象中的属性和方法啦。同时，全部对象中都有一个constructor属性，原型对象的constructor指向其对应的构造函数。

使用原型，就意味着咱们能够把但愿实例共享的属性和方法放到原型对象中去，而不是放在构造函数中，这样每一次经过构造函数new一个实例，原型对象中定义的方法都不会从新建立一次。来看下面的例子：

function Person() {
}

Person.prototype.name = "leon";
Person.prototype.age = "20";
Person.prototype.greeting = function() {
  alert('Hi!');
};

var person1 = new Person();
var person2 = new Person();
alert(person1.name); //"leon"
alert(person2.name); //"leon"
alert(person1.greeting == person2.greeting); //true

• 优势：与单纯使用构造函数不同，原型对象中的方法不会在实例中从新建立一次，节约内存。
• 缺点：使用空构造函数，实例 person1 和 person2 的 name都同样了，咱们显然不但愿全部实例属性方法都同样，它们仍是要有本身独有的属性方法。而且若是原型中对象中有引用类型值，实例中得到的都是该值的引用，意味着一个实例修改了这个值，其余实例中的值都会相应改变。
• 解决办法：构造函数+原型模式组合使用。

另外 JS 中还定义了一些与原型相关的属性，这里罗列一下：

• Object.getPrototypeOf()，取得实例的原型对象。

Object.getPrototypeOf(person1);

• isPrototypeOf()，判断是否是一个实例的原型对象。

Person.prototype.isPrototypeOf(person1);

• hasOwnProperty()，检测一个属性是否存在于实例中

person1.hasOwnProperty("name");

• in，判断一个属性是否存在于实例和原型中。

"name" in person1;

构造函数+原型模式

最后一种方式就是组合使用构造函数和原型模式，构造函数用于定义实例属性，而共享属性和方法定义在原型对象中。这样每一个实例都有本身独有的属性，同时又有对共享方法的引用，节省内存。

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

Person.prototype = {
  constructor: Person,
  nationality: "China",
  greeting: function() {
    alert(this.name);
  }
}

var person1 = new Person("leon", "20");
var person2 = new Person("jack", "21");
alert(person1.greeting == person2.greeting) //true

上面代码中用对象字面量的形式重写了原型对象，这样至关于建立了一个新的对象，那么它的constructor属性就会指向Object，这里为了让它继续指向构造函数，显示的写上了constructor: Person

这种构造函数与原型模式混成的模式，是目前在 JS 中使用最为普遍的一种建立对象的方法。