【js-04】简述JS中的面向对象编程

分享人：董瑞

1.背景介绍

什么是面向对象编程？

面向对象编程是一种通用思想，主要概念为：
把一组数据结构和处理它们的方法组成对象（object），把相同行为的对象归纳为类（class），通过类的封装（encapsulation）隐藏内部细节，通过继承（inheritance）实现类的特化（specialization）／泛化（generalization），通过多态（polymorphism）实现基于对象类型的动态分派（dynamic dispatch）。

通俗的说：就是把需要的变量和方法交给一个对象，然后直接通过使用这个对象来进行操作。

（注意：JavaScript不是一种模块化编程语言,ES5不支持”类”（class），也没有”模块”（module）。ES6正式支持”类”和”模块”，但是并不是所有的浏览器都支持es6的。我们本次讲解基于ES5）

2.知识剖析

知识点：1.理解对象

知识点：2.创建对象

知识点：3.继承

对象的概念

“对象”是单个实物的抽象。
一本书、一辆汽车、一个人都可以是“对象”，一个数据库、一张网页、Date、Array、甚至一个与远程服务器的连接也可以是“对象”。
就像一个黑盒子，你使用其功能而无需明了原理。

“对象”是一个容器，封装了“属性”（property）和“方法”（method）。
所谓“属性”，就是对象的状态；如Array对象具有length属性。一个人具有身高，体重属性。
所谓“方法”，就是对象的行为（完成某种任务）。
比如，我们可以把动物抽象为animal对象，“属性”记录具体是那一种动物，“方法”表示动物的某种行为（奔跑、捕猎、休息等等）。如Date对象的getfullyear方法。

面向对象的特征详解

封装：找到变化并且把它封装起来
继承：子类继承父类，可以继承父类的方法及属性，实现了多态以及代码的重用，因此也解决了系统的重用性和扩展性，但是继承破坏了封装.
多态：接口的多种不同的实现方式即为多态。接口是对行为的抽象.方法不变，通过接收的参数变化，来实现多态。

一张图生动解释面向对象的特征名词→

3.常见问题

如何封装一个对象？

构造函数模式

Prototype模式

如何实现构造函数的继承？

4.解决方案

构造函数模式

                
                    function Cat(name,color){
                    this.name = name;
                    this.color = color;
                    this.type = "猫科动物";
                    this.eat = function(){alert(name+"吃老鼠");};
                    }
                    var cat1= new Cat("大毛","黄色");                
            

Prototype模式:可以让所有对象实例共享它包含的属性和方法。不必在构造函数中定义对象实例的信息。

                
                    function Cat(){
                    Cat.prototype.name = '阿黄';
                    Cat.prototype.color = '黄色';
                    Cat.prototype.type = "猫科动物";
                    Cat.prototype.sayName = function(){alert(this.name)};
                    }
                    var cat1=new Cat();
                    var cat2=new Cat();                
            

如何实现构造函数的继承:在子类型构造函数内部调用超类型构造函数。通过apply（）或call（）方法可以在新创建的对象上执行构造函数。优势：可以在子类函数中向超类型构造函数传递参数

                
                    function SuperType() {
                    this.colors=["red","yellow","green"];
                    }
                    function SubType() {
                    //继承SuperType函数
                    SuperType.call(this,"small");
                    }

                    function bt1() {
                    var instance1=new SubType();
                    instance1.colors.push("black");
                    alert(instance1.colors);
                    }
                    function bt2() {
                    var instance2=new SubType();
                    alert(instance2.colors);
                    }function bt3(){
                    var instance3=new SubType();
                    alert(instance3.size);
                    alert(instance3.colors);
                    }                
            

5.编码实战

6.扩展思考

面向对象与面向过程的区别？

传统的过程式编程（procedural programming）由一系列函数或一系列指令组成；而面向对象编程的程序由一系列对象组成。
每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。因此，面向对象编程具有灵活性、代码的可重用性、模块性等特点，容易维护和开发，非常适合多人合作的大型应用型软件项目。

7.参考文献

参考一：JavaScript 标准参考教程（alpha）-阮一峰

参考二：JavaScript高级程序设计：第六章

8.更多讨论

还有哪些继承的模式？

重新理解JS的6种继承方式

拾遗

rest风格

get和post的区别