带你了解面向对象和面向过程的区别

讲面向对象，就离不开讲一讲面向过程。
面向对象和面向过程是现在编程的主要。
一、面向过程简述
面向过程：顾名思义，当你处理一个事情的时候，它会按照过程逐步进行，着重于步骤。
比如求一个循环数的和：

var num = 0;
for(var i = 0;i < 5;i++){
    sum += i;
}

这样解决问题的代码简洁明了，关注的是解决问题的步骤即可，但是如果仅限于求和要求面向过程就足够了，因为逻辑简单，不需要太过复杂的逻辑架构去帮你理清解题思路。
这是一个简单的面向过程的例子，如果要再执行一个循环六次的求和。就会如下代码：

var num = 0;
for(var i = 0;i < 5;i++){
    sum += i;
}
for(var  i =0;i < 6;i++){
    sum += i;
}

那如果还要继续执行呢？碰到了结构复杂的程序，这个时候就发现重复的代码过多，造成代码冗余，而且如果写多了，不利于思路条例。
二、面向对象简述
1.面向对象：面向对象的着重点在于对象，先创建一个对象然后借助对象的值属性和方法来存储数据以及解决问题。
如同样求一个循环数的和的代码：

function  CreateAddtion (num){
    this.sum = 0; //求和最终结果
    this.count = num; //循环次数
    this.addtion = function (){
        for(var i = 0;i < this.count;i++){
              this.sum += i;
        }
        return this.sum;
    }
}
var add1 =new CreateAddtion(5);//5次和
var add2 = new  CreateAddtion(6);//6次和
console.log(add1.addtion());
console.log(add2.addtion());

面向对象的特征就在于，值和解决方案都交给对象存储和处理，要想调用对象里的方法，必须先声明对象。当然在这个例子里，并不能突出面向对象的好处。
下面举个例子，最经常被拿来当教案的鸭子的故事为背景。

要求：模拟一个游戏，会出现多只鸭子，并且鸭子会游泳会叫。鸭子分红头和绿头鸭子。

面向过程：

//一下都是伪代码,
//假设要2只鸭子
var yazi = function(){
      CreateYaZi();//创建鸭子
      Swin();  //游泳
      guagua() //呱呱叫
      red();  //在此处写red();或者green()来修改红头鸭子和绿头鸭子
      
}
//因为是两只，以上代码执行for循环或者写两遍。

面向对象:

//以下是伪代码
function CreateYaZi (color){
       this.color  = color; //红头鸭子绿头鸭子
       this.Swin = function (){
              //游泳
        }
        this.Guagua = function (){
              //叫
        }
}
var yazi1 = new CreateYaZi(red);
var yazi2 = new CreateYaZi(green);

在这个例子里，区别最大的在于红绿头鸭子，如果用面向过程，每创建一个鸭子都需要程序员手动修改，但是如果用对象，直接根据传递的形参来给鸭子头颜色赋值，减少了代码量，并且清晰了逻辑，如果还觉得这样区别不大，可以增加要求，比如鸭子分为橡皮鸭，红绿头鸭子，这两种鸭子叫声不一样，橡皮鸭吱吱吱叫，红绿头鸭子嘎嘎嘎叫，
这个时候程序员如果用面向过程的思想，就会去创建叫法不同的方法，分别给创建的鸭子赋值，而面向对象，只需要更改对象的属性，根据属性执行相应的函数即可。
由此可见的，在大量的逻辑思维和需要后期维护大量需求的背景下，使用面向对象是大大方便了程序员理清思路，并且减轻代码量的。
当然我个人觉得我举这个例子也不大好，如果没怎么理解，可以参考其他博客。
四、JS是基于对象的语言
1.什么样的编程是面向对象的编程？
（1）面向对象编程基于使用面向对象语言编程。
（2）具备的概念：类、对象。
（3）具备的特征：封装、多态、继承
（4）在创建对象时必须通过类创建。
批注：类是具有相同属性和方法的集合，对象是类的实例化。

批注：封装是把具体实现功能的代码封装成一个块（方法），需要使用时调用方法即可。

批注：继承是类和类之间一旦声明了继承关系，比如A继承B也就是说A是B创建的子类。A子B父。子类必须继承父类的所有方法，并且可以选择重写父类的方法。

批注：多态是多个对象根据同一个类创建，同一个属性值可能不同，同一个方法执行的结果也可能不同。

2.JS可以用面向对象编程吗？
可以，但是并不完整。
（1）JS是基于对象的语言，它又具有面向过程语言的特点，又具有面向对象编程语言的特点，但是双方都不完善。
（2）JS没有类和借口的概念，无法进行真正意义上通过类创建对象。
（3）JS可以用函数块模拟面向对象过程的通过类创建对象，也就是说通过new类函数，来创建对象，类函数中有相应的属性赋值和方法执行。

教你如何用JS创建对象

JS没有类和接口的概念，只有方法，如果想用JS实现面向对象编程，可以用方法模拟创建类的过程。

方法1：直接声明创建实例

var Yazi ={
    name : '鸭子'，
    color : '红头'，
    swin : function(){//我会游泳}，
    guaGua : function(){//我会呱呱叫}，
};
console.log(Yazi.name);
console.log(Yazi.color);
Yazi.swin();
Yazi.guaGua();

方法2：调用工厂函数创建实例

function createYaZi (color){
                //创建一个对象
                var yazi = new Object();
                //或
                //var yazi = {};
                yazi.name = '鸭子';
                yazi.color = color;
                yazi.swin = function  () {
                    //我会游泳
                }
                yazi.guaGua = function  () {
                    //我会呱呱叫
                }
                return yazi;
}
var yazi1 =createYaZi('red');
console.log(yazi1);
console.log(yazi1 instanceof Object);
var yazi2 = createYaZi('green');
console.log(yazi2);
console.log(yazi1);

结果：

QQ20170823-195650@2x.png

或者

image.png

方法3：构造函数（函数名的首字母大写）

function CreateYaZi (color){            
                this.name = '鸭子';
                this.color = color;
                this.swin = function  () {
                    //我会游泳
                }
                this.guaGua = function  () {
                    //我会呱呱叫
                }
}
var yazi1 =new CreateYaZi('red');
console.log(yazi1);
console.log(yazi1 instanceof Object);
var yazi2 =new CreateYaZi('green');
console.log(yazi2);
console.log(yazi1);

结果：

image.png

方法4：通过原型创建方法(包含动态创建原型)
优点：可以把共有的数据和方法统一存到 原型中，达到节约内存的目的。

            function CreateYaZi (color){            
                CreateYaZi.prototype.name = '鸭子'; //共有的数据
                this.color = color;
                this.swin = function  () {
                    //我会游泳
                }
                                //这里是动态原型创建，如过原型中的方法和属性已经存在，就不会再对        
                                //其进行添加
                if (typeof(CreateYaZi.guaGua) != 'function') {
                    CreateYaZi.prototype.guaGua=function  () {
                        //我会呱呱叫
                    }
                }
}
var yazi1 =new CreateYaZi('red');
console.log(yazi1);
console.log(yazi1 instanceof Object);
var yazi2 =new CreateYaZi('green');
console.log(yazi2);
console.log(yazi1);

结果：

image.png
放在原型中的共有数据和方法都在实例化的对象的proto里，这个属性最好不要修改。

JS访问对象属性

访问：
（1）对象名.属性名 例如：yazi.name
（2）对象名[‘属性名’] 例如 :yazi['name'] //这个方法不要有空格，否则可能影响检索属性的精准。

删除：
delete yazi.name;

循环遍历访问对象
(1)for..in(遍历下标)

for (var item in yazi) {
    if ((typeof yazi[item]) != 'function') {
                      //判断鸭子获取到的是否是方法，不是的话执行输出属性值。
            console.log(yazi[item]);
    }
}

(2)for..of(遍历数据)

for (var item of yazi) {
    if ((typeof yazi[item]) != 'function') {
                      //判断鸭子获取到的是否是方法，不是的话执行输出属性值。
            console.log(yazi[item]);
    }
}

失败的原因是因为对象只能通过下标和属性名拿值。

删除