【JavaScript】——面向对象之原型优化

【前言】
在学习到javascript面向对象和原型的时候其实我感觉有一点点的难度，反正在理解这方面的含义的时候我发现很乱，但是面向对象的思想我们早就接触过，只是在javascript中它会和以前的语言有一点稍稍的不一样，但是褪去了外衣后发现其实里面的精髓都是一样！
【内容】
一：对象
1. 面向对象的特征：封装性，继承性，多态性在javascript都有体现。
Javascript中的对象：是一种复合的，复杂的数据类型，是属性和方法的集合

    /*创建对象的两种方式：
     1.使用new运算符创建对象。
     var obj=new Object();  
     2.使用特定的构造函数；
     var obj=Object();
     3.通过字面量的方式
      var student={
         name:'常银玲',
         age:22，
         gender:女
      }
      */

2.普通函数和构造函数都是体现了面向对象的思想，他们之间的区别：

//普通函数
function box(name, age)
{
    var obj = new Object();     //创建对象
    obj.name = name;            //添加属性
    obj.age = age;
    obj.run = function () {       //添加方法
        return this.name, this.age + '运行中。。。';
    }
    return obj;                                      //返回对象引用。
} 
//构造函数
    function Box(name, age) {
        this.name = name;
        this.age = age;
        this.run = function () {
            return this.name + this.age + '运行中。。。';
        };
    };
//调用普通函数
  var box=box('chang','100');
//调用构造函数
  var box=new Box('chang','100');

由上表可以看出普通函数与构造函数之间的区别：

	普通函数	构造函数
命名方式	函数名第一个字母小写	函数名第一个字母大写
函数引用	返回函数引用	不用返回，直接使用
调用方式	用new关键字	直接调用函数
定义方式	用new object初始化	直接用this，代替了new object
区分返回的对象类型	不区分	区分

二：原型
1.原型（prototype）：既是属性，也是一个对象，包含由特定类型的所有实例共享的属性和方法。
2.原型模式是一把双刃剑：省略构造函数传参的初始化，但是却令初始化的值都是一样的。如下

//原型模式，对比上面的构造函数即可。
function Box(){};
Box.prototype.name='chang';
Box.prototype.age=100;
Box.prototype.run=function(){
 return this.name+this.age;
}
var box1=new Box();
alert(box1.run()); //返回的是chang100，
var box2=new Box();
alert(box2.run()); //返回的是chang100，

原型模式优点是共享，但是共享带来的是污染数据。如下：

 function Box() { }
    Box.prototype = {
        constructor: Box,
        name: 'lee',
        age: 100,
        family: ['哥哥','姐姐','妹妹'],
        run:function(){
            return this.name + this.age + '运行中....'
        }
    }
    var box1=new Box();
    var box2=new Box();
    box1.family.push('弟弟');
    alert(box1.family);       //返回的成员都是哥哥，弟弟，妹妹，弟弟。
    alert(box2.family);       //返回的成员都是哥哥，弟弟，妹妹，弟弟。

改进的措施原型模式缺点的措施：

/*动态原型模式*/
/*将原型封装在一个构造函数里面，原型的初始化只要一次就可以了，不需要每一次构造函数都实例化*/
function Box(name, age) {
    this.name = name;
    this.age = age;
    this.family = ['哥哥', '姐姐', '妹妹'];

    if (typeof this.run!='function') {     //判断thisrun是否存在。
        alert('原型初始化开始')
        Box.prototype.run = function () {
            return this.name + this.age + '运行中....';
        }
        alert('原型初始化结束')
    }

}

var box1 = new Box('chang',100);
var box2 = new Box('jin', 22);

三：继承
1.继承是面向对象的一大特征，包括了接口实现和继承，但是js值只支持继承。
2.js中继承的两种方式主要是对象冒充和原型链。

//通过原型链的方式继承。
function Box(){  //构造函数Box
 this.name='lee';
}
function Desk(){   //构造函数desk
 this.age=100;
}

Desk.prototype=new Box();  //desk继承了box，通过原型，形成链条。
var desk=new Desk();
alert(desk.name);       //返回的是lee


//通过对象冒充的方式继承。
function Box(name,age){  //构造函数Box
 this.name=name;
 this.age=age;
}
function Desk(name,age){  //主要是对象冒充的形式。
  Box.call(this.age);
  Box.call(this.name);
}
var desk=new Desk('chang','22');
alert(desk.name);       //返回的是lee

【总结】
其实在学习本章节主要的难点就是对于对象和原型之间组合的优化，其中有一些用到了一些设计模式，都是需要我们细细的去研究一把，不过在优化之前应该掌握一些基本的东西，希望这篇博客可以帮到你！