javascript面向对象编程（一）——封装和继承

一、前言

js是否是面向对象的语言是有争议的，但是js是基于对象的语言。在JS中几乎所有的东西都可以看成是一个对象，但是JS中的对象模型和大多数面向对象语言的对象模型不太一样。面向对象的三个特点：封装、继承和多态。

封装：隐藏内部逻辑的实现、属性和方法，仅对外公开接口。外部只需要关注如何使用接口而不需要关心内部如何实现。
继承：子类可以使用父类的所有功能，并且对这些功能进行扩展。继承的过程，就是从一般到特殊的过程
多态：所谓多态，就是指一个引用类型在不同情况下的多种状态。在java中多态是指通过指向父类的引用，来调用在不同子类中实现的方法。

js实际上是无态的，是一种动态语言，一个变量的类型是在运行的过程中由js引擎来决定的，所以说js天生就支持多态。

二、封装

封装的目的在于将具体的信息进行隐藏，一般包括数据的封装和封装的实现。

1、封装数据

在javascript中没有private、protected和public等关键字来提供权限的访问，因此只能通过作用域实现封装特性。比如：

var test = (function() {
    var inner = 'test';
    return {
        getInner: function() {
            return inner
        }
    }
})();
console.log(test.getInner()) // test
console.log(test.inner) // undefined

2、封装实现

封装实现即隐藏实现细节、设计细节，封装使得对象内部的变化对其他对象而言是不可见的，对象对它自己的行为负责，其他对象或者用户都不关心它的内部实现，封装使得对象之间的耦合变松散，对象之间只通过暴露的API接口来通信。

2.1 生成实例对象的原始模式
比如关于猫的对象可以如下：

var Cat = {
    name: '',
    color: ''
}
// 生成实例，新建对象
var cat1 = {}
cat1.name = 'test1';
cat1.color = 'yellow';

//将以上的原始对象模式进行改进。写成一个函数
function Cat(name, color) {
    return {
        this.name = name;
        this.color = color;
    }
}
// 生成实例对象
// 生成实例对象
var cat1 = Cat("test1", "yellow");
var cat2 = Cat("test2", "blue");
// 这种方法cat1和cat2没有内在的联系，不能反映出他们是同一个原型对象的实例。

2.2 构造函数
为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。
所谓”构造函数”，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

function Cat(name, color) {

    return {

        this.name = name;

        this.color = color;
    }

}
var cat1 = new Cat("test1", "yellow");

var cat2 = new Cat("test2", "blue");
// 这时cat1和cat2自动含有一个constructor属性，指向他们的构造函数
console.log(cat1.constructor == Cat) // true

console.log(cat2.constructor == Cat) // true

// 使用instanceof运算符，验证原型对象与实例对象之间的关系
console.log(cat1 instanceof Cat) // true

2.3 构造函数的问题
构造函数方法很好用，但是存在一个浪费内存的问题。
请看，我们现在为Cat对象添加一个不变的属性type（种类），再添加一个方法eat（吃）。那么，原型对象Cat就变成了下面这样：

function Cat(name,color){

　　　　this.name = name;

　　　　this.color = color;

　　　　this.type = "猫科动物";

　　　　this.eat = function(){alert("吃老鼠");};

　　}
var cat1 = new Cat("大毛","黄色");

　　var cat2 = new Cat ("二毛","黑色");

　　alert(cat1.type); // 猫科动物

　　cat1.eat(); // 吃老鼠

表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。

alert(cat1.eat == cat2.eat); //false

2.4 Prototype模式
Js中规定每一个构造函数都有一个prototype属性，指向另一个对象，这个对象的所有属性和方法，都会被构造函数的实例继承。

这样我们可以将那些不变的属性和方法，直接定义到prototype对象上。

function Cat(name,color){

　　　　this.name = name;

　　　　this.color = color;

　　}

　　Cat.prototype.type = "猫科动物";

　　Cat.prototype.eat = function(){alert("吃老鼠")};

var cat1 = new Cat("大毛","黄色");

　　var cat2 = new Cat("二毛","黑色");

　　alert(cat1.type); // 猫科动物

　　cat1.eat(); // 吃老鼠

alert(cat1.eat == cat2.eat); //true

这时所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。

三、继承

继承是某个类型对象获得另一个类型对象的属性和方法，JS中实现继承的方法有多种。

3.1 构造函数绑定实现继承
这种方式实现继承比较简单，直接使用call或者apply方法将父对象的构造函数绑定在子对象上：

function Animal(name) {
    this.type = '动物',
    this.getName = function() {
        console.log(name)
    }
}

function Cat(name) {
    Animal.call(this, name);
    this.name = name;
}

let cat = new Cat('毛毛');
console.log(cat.type) // 动物
cat.getName() // 毛毛

3.2 prototype 模式继承
这种方式更常见，使用prototype属性
如果“猫”的prototype对象指向一个Animal的实例，那么猫的实例，就能继承Animal

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat; // 手动纠正,constructor指回原来的构造函数
var cat1 = new Cat('毛毛')；
console.log(cat1.type) // 动物

3.3 直接继承prototype
三种方法是对第二种方法的改进。由于Animal对象中，不变的属性都可以直接写入Animal.prototype。所以，我们也可以让Cat()跳过 Animal()，直接继承Animal.prototype。

function Animal(){ }
Animal.prototype.species = "动物";

然后，将Cat的prototype对象，然后指向Animal的prototype对象，这样就完成了继承。

　　Cat.prototype = Animal.prototype;

　　Cat.prototype.constructor = Cat; // 此处有问题，将Animal.prototype的constructor也修改为Cat？

　　var cat1 = new Cat("大毛","黄色");

　　alert(cat1.species); // 动物

一、前言

二、封装

1、 封装数据

2、封装实现

三、继承

1、封装数据