JavaScript面向对象的程序设计(犯迷糊的小羊)

导语

前面的系列文章，基本把JavaScript的核心知识点的基本语法、标准库等章节讲解完；本章开始进入JavaScript核心知识点的高级部分——面向对象的程序设计，这一部分的内容将会对对象这一数据类型做进一步的深化理解，并且讲述几种创建对象的设计模式以及JavaScript独特的继承机制；

1.理解对象和面向对象的程序设计

1.1 面向对象的程序设计

"面向对象编程"（Object Oriented Programming，缩写为OOP）本身是一种编程的思维模式，它把世界的一切看作是对象的集合，世界的运转就是靠一个个对象分工、合作的结果，体现一切皆“对象”思想；而在程序设计当中，面向对象编程就可以看做编写各个具有特定功能的对象（模块）并将它们进行有机的分工合作，即目前的模块化编程就是面向对象的程序设计的实际应用；

1.2 理解对象

对象在前面的系列文章中曾经提到，从数据特征上看，对象是无序属性（键值对）的集合；我们可以使用字面量和构造函数的方式去创建一个最为简单的对象：

var teren = {
name:"teren",age:18,greet:function(){
console.log("hello "+this.name);
}
}

通常创建一个简单的对象，都是采用字面量的方式；上面的对象就是对现实对象的一种抽象表达；

1.3 对象的属性类型

前面章节中我们使用delete命令可以删除一些对象的属性，有一些又不可以，使用Object.keys()方法只能遍历可枚举属性，那么对象的属性是否有一些特性是我们尚未了解的呢？ ES5提供了一种只有内部才用的特性（attribute）去描述对象的属性（property）的各种特性，使用[[attribute]]表示，在JavaScript中不能直接访问它们；一个我们非常熟悉的栗子就是Number构造函数构造出来的实例对象；

我们无法直接访问num.[[PrimitiveValue]]，这一属性，只能通过num.valueOf()访问该值；

ES5中定义对象属性的两种特性，数据特性和访问器特性，对象属性可以兼备这两种特性；

数据特性定义对象的属性值的特性，一个属性值可以包括以下四个数据特性：

属性值； [[Writable]]:是否可写属性； [[Enumerable]]:是否为可枚举属性； [[Configurable]]:是否可用delete命令删除；

访问器特性定义对象的属性在访问属性和设置属性时调用的两个函数getter和setter；

[[Get]]:访问属性时调用的函数； [[Set]]:设置属性时调用的函数；

下面以一个实例对象直接讲解这两个特性：

//访问器特性；
//html
<div id="name">

//js
var obj = Object.defineProperty({},"name",{
set:function(name){
document.getElementById('name').innerHTML=name
},get:function(){
console.log( document.getElementById('name').innerHTML
)
},})
obj.name = "hello world"
obj.name

2. 创建对象的方式

上一节我们对面向对象的程序设计思想和对象有了初步理解，这一节我们深入探讨一下对象的创建方式及其优缺点；

创建对象的不同方式也可以简单的称作设计模式，不同的设计模式在实际编程应用中起到不同的作用；

2.1 单例模式

单例模式就是产生一个类的唯一实例对象，它能够确保您只有一个对象实例能够实际派上用场；

2.2 工厂模式

单例模式只能创作单个实例对象，也就是说如果将该实例对象赋予多个变量时，会存在对象的引用问题，即修改其中一个变量会影响到另一个变量；有时我们需要创造多个结构相似的对象，只有部分属性有所区别，这时候工厂模式派上用场；

工厂模式的设计思想就是能够像工厂一样批量生产出相似属性和方法的对象，使用工厂模式能解决多个相似的问题，例如创造多个弹窗（只是标题不同）；

2.3 构造函数模式

构造函数可以创建特定类型的对象，类似之前的Array、RegExp等原生对象都能创造特定类型的实例对象；

new操作符的原理

创建一个新对象；将构造函数的作用域赋给新对象并执行构造函内的代码；返回新对象；使用代码表示如下：

【注】关于this关键字的更多知识点可以参见【what's this】; 构造函数如果不用new操作符调用和普通函数是一样的；

2.4 原型模式

每个函数都有一个prototype原型属性，这个原型属性可以部署特定类型的实例共享的属性和方法；

将原来的greet函数部署在Person函数的prototype原型属性上，这样p1和p2可以共享该方法，而不像构造函数模式每创建一个实例就增加一个greet方法浪费内存；

【注】关于原型对象的更多理解详见下一节——JavaScript的继承机制；

2.5 混合模式

混合模式，就是综合构造函数模式和原型模式的优缺点，构造函数模式部署实例的私有属性，原型模式部署实例的公有属性；

混合模式是目前使用最广泛、认同度最高的一种创建自定义类型（类）的设计模式；

【注】当然，设计模式不仅仅上述所提到，还有更加精深可以参考《设计模式》一书以及之前小羊写的一篇文章《设计模式梗概》;

3.JavaScript的继承机制

上一节我们通过创建对象的不同模式，隐式引出了原型对象的概念，这一节中我们将详细了解一下原型对象、原型链及其实现的继承机制；

前面，我们从数据特征上看，知道对象是无序属性（键值对）的集合；现在，我们可以从面向对象的角度看，任何对象都是更为抽象的对象的实例，可以理解为类的概念；从这个角度理解，我们现在可以重新定义一下对象和类的含义：对象可以说是对现实事物的抽象，对象封装了属性和方法，属性值指的是对象的状态，方法指的是对象的行为；类是提供一种模板的‘对象'，它是对象的抽象；举个简单的栗子：

上述代码表明，p1和p2两个实例是对现实Adam和Eve的抽象，而“类”Person又是对2个实例的抽象，为创建相似结构的人提供标准的模板； [注]ES6之前JavaScript中没有类，在ES6中定义了类；

3.1 原型对象

在上一节的原型模式中，我们提到每个函数都有一个prototype属性，这个属性指向函数的原型对象，可以部署特定类型的实例共享的属性和方法；

更为深入理解prototype原型对象，prototype原型对象不仅可以部署特定类型的实例共享的属性和方法，而且还是实现JavaScript继承的关键；

当使用构造函数创建一个实例时，该实例内部包含一个内部属性__proto__指向构造函数的原型对象；

构造函数创建之后，自动创建一个prototype属性，prototype原型对象下有一个默认的constructor属性指向prototype属性所在的函数Person中；在prototype原型对象上部署greet方法，实例p1的内部属性__proto__指向构造函数Person.prototype，由此继承了构造函数的原型对象上的greet方法；