JavaScript面向对象编程

概述

在前端开发中，JavaScript并没有想象中那么简单，不只是简单的UI输入验证，还有面向对象。对于刚刚JavaScript入门的你来说，可能会稍稍惊讶：哇，虽然前端开发好找对象，妹子多，但是JavaScript真的可以向对象编程么！！！是的，你没有看错，本文将通过一些小例子，逐步讲解JavaScript的面向对象编程。仅供学习分享使用，如有不足之处，还请指正。

ECMA Script有两种开发模式：

1. 函数式（过程化）：小的功能，独立。
2. 面向对象（OOP）：体现了继承，封装，多态的思想，但是ECMA Script没有类的概念。

创建一个对象

创建对象，然后给对象赋值属性和方法。如下所示：

• this表示new Object实例化出来的对象，this要放在一个作用域下，比如box.run(){},这个是box作用域下的函数，才可以用this来表示box。
• 如果在全局作用域下，this，表示window,如：document.write(this);//[object Window]

var box=new Object(); //创建对象
box.name='hex'; //添加属性
box.age=100;
box.run=function(){
    return this.name+this.age+'is running...'; //this表示当前作用域下对象，在此表示box
};

但是以上代码有一个缺点，如果想再实例化一个box2，则需要重复书写代码，如下所示：

var box2=new Object(); //创建对象
box2.name='jack'; //添加属性
box2.age=200;
box2.run=function(){
    return this.name+this.age+'is running...'; //this表示当前作用域下对象，在此表示box
};
document.getElementById("A01").innerText=box.run();
document.getElementById("A02").innerText=box2.run();

通过以上实例，可以看出，box和box2具有很多重复的代码，为了解决以上的问题，可以采用工厂模式，将重复的代码抽象出来，如下所示：

function createObject(name,age){
    var obj=new Object(); //创建对象
    obj.name=name; //添加属性
    obj.age=age;
    obj.run=function(){
        return this.name+this.age+'is running...'; //this表示当前作用域下对象，在此表示box
    };//此处是语句，所以需要加分号
    return obj;
}
var box1=createObject('hexkj',100);
var box2=createObject('jack',200);
document.getElementById("A01").innerText=box1.run();
document.getElementById("A02").innerText=box2.run();

但是以上依然有一个问题：无法区分是哪个对象创建的实例，因为都是Object类型。如下所示：

document.writeln(box1);//输出：[object Object]
document.writeln(typeof box2);//输出：object
document.writeln( box1 instanceof Object);//输出：true

通过构造函数创建对象

ECMA Script可以采用构造函数的方式创建特定的对象。构造函数规范：

1. 构造函数也是函数，但是首字母必须大写(小写也可以，但是不规范)。
2. 必须使用new 运算符来实例化。

构造函数没有Object，但后台会自动创建Object，this就表示Ojbect的实例obj。构造函数不需要返回obj。如下所示：

function Box(name,age){
    this.name=name; //添加属性
    this.age=age;
    this.run=function(){
        return this.name+this.age+'is running...'; 
    };//此处是语句，所以需要加分号
}
var box1=new Box('hexkj',150);
var box2=new Box('jack',230);
document.getElementById("A01").innerText=box1.run();
document.getElementById("A02").innerText=box2.run();

再新增一个构造函数，如下所示：

function Desk(name){
    this.name=name;
}
var box3=new Desk('Lee');
document.writeln(box3 instanceof Desk );//输出true
document.writeln(box1 instanceof Box );//输出true
document.writeln(box1 instanceof Desk );//输出false

通过以上实例可以看出，使用构造函数，可以解决对象识别的问题。

备注：

1. 变量名name比较特殊，如果有问题，可以使用user代替。
2. 全局作用域中，this表示window。
3. 普通函数，首字母不需要大写。

对象冒充调用

即obj本来是没有run方法的，通过call函数，可以将obj冒充为Box的实例，如下所示：

var obj=new Object();
Box.call(obj,'hex',20);
document.writeln(obj.run());//输出：hex20is running... 

对象比较

对于基本类型，比较值是否相等即可。对于引用类型，比较的是引用地址，所有box1和box2是两个不同的类型，因为他们在内存中的地址不同。如下所示：

var box1=new Box('hexkj',150);
var box2=new Box('hexkj',150);
//对于基本类型，比较值是否相等即可
document.writeln(box1.name==box2.name); //输出true
document.writeln(box1.age==box2.age);//输出true
document.writeln(box1.run()==box2.run());//输出true
//对于引用类型，比较的是引用地址，所有box1和box2是两个不同的类型，如下所示：
document.writeln(box1==box2); //输出false
document.writeln(box1.run==box2.run);//输出false

原型对象

我们创建的 构造函数，都有一个原型属性（prototype），它也是一个对象。可以共享特定实例的属性和方法。如下所示：

function Box(){} //声明一个构造函数，函数体内什么都没有，如果有，为实例属性，实例方法
Box.prototype.name="hex";//原型属性
Box.prototype.age=18;//原型属性
Box.prototype.run=function(){ //原型方法
    return this.name+this.age+' is running...';
};//此处是语句，所以需要加分号
var box1=new Box();
document.writeln(box1.run());

原型和构造函数的差异：

1. 如果是实例方法，不同的实例化，属性和方法地址是不一样的，是唯一的。
2. 如果是原型方法，属性和方法的地址是共享的，是一样的。

var box2=new Box();
document.writeln(box1==box2); //输出false
document.writeln(box1.run==box2.run);//输出true
document.writeln(box1.prototype); //写法错误，输出undefined 
document.writeln(box1.__proto__); //__proto__是一个指针，指向prototype，输出： [object Object] 
document.writeln(box1.constructor);//得到构造函数本身

判断一个对象实例，是不是原型对象。通过Box.prototype.isPrototypeOf(box1)进行判断，如下所示：

document.writeln(Box.prototype.isPrototypeOf(box1) ); //输出true
function Desk(name){
    this.name=name;
}
var box2=new Desk('Lee');
document.writeln(Desk.prototype.isPrototypeOf(box2) ); //输出true

通过以上实例可以看出：只要声明实例对象，都会默认从原型创建。

删除属性，通过delete进行删除，如下所示：

delete box2.name;//删除实例属性
delete Box.prototype.name; //删除原型属性

判断属性

主要判断属性是实例属性，还是原型属性，或者判断对象是否包含属性，具体如下所示：

document.writeln(box2.hasOwnProperty('name')); //判断实例中是否有对应属性，输出true
document.writeln(box1.hasOwnProperty('name')); //输出false,因为name是在原型中
document.writeln('name' in box1); //输出true ，判断对象是否包含属性
//判断是否只有原型中的属性
function isPrototypeProperty(obj , property){
    //包含属性，但实例中没有，则原型中有
    return property in obj && !obj.hasOwnProperty(property);
}
document.writeln(isPrototypeProperty(box1,'name')); //是否是原型中的属性，输出：true

使用字面量的方式创建对象，这里的{}就是对象，是Object类型的实例。如下所示：

function Box(){}
Box.prototype={
    name:'Lee',
    age:20,
    run:function(){ //原型方法
        return this.name+this.age+' is running...';
    }//此处是语句，所以需要加分号
}
var box1=new Box();
document.writeln(box1.run());
document.writeln(box1.constructor); //输出 function Object() { [native code] } 

所以采用字面量的方式创建对象，是Object类型，而不是构造函数创建的。如何要让原型创建的对象指向Box呢？

答：可以通过强制声明constructor属性来指向对应的类型，默认为Object,也可以指向String,Array等。如下所示：

function Box(){}
Box.prototype={
    constructor:Box,
    name:'Lee',
    age:20,
    run:function(){ //原型方法
        return this.name+this.age+' is running...';
    }//此处是语句，所以需要加分号
}
var box1=new Box();
document.writeln(box1.constructor);//输出：function Box(){} 

如果重写了prototype，则原有的属性会消失，如下所示：

Box.prototype={
    age:30
}
var box2=new Box();
document.writeln(box2.name);//输出undefined

扩展内置对象

ECMAScript自带的对象，也可以定义prototype。

var box1=[1,3,5,2,7,-2];
document.writeln( box1.sort()); //输出-2,1,2,3,5,7 ，此处采用的是Array自带的sort方法
//查看sort是否是原型对象里面的方法
document.writeln( Array.prototype.sort); //输出：function sort() { [native code] } 
document.writeln( String.prototype.substr); //function substr() { [native code] } 

如何扩展内置对象呢？可以在内置对象的prototype中新增方法，如下所示：给String对象扩展了一个addString自定义方法。

String.prototype.addString=function(){
    return this+'[By hex]';
}
var box2='你好啊';
document.writeln(box2.addString());//输出：你好啊[By hex] 

一般不建议给内置对象扩展方法，容易导致命名冲突，不利于维护。

原型的缺点

共享属性，无法区分，如下所示：此处box2和box1共享一个family，这并不是我们想要的结果。

Box.prototype={
    name:'Lee',
    age:20,
    family:['苹果','香蕉','桔子'],
    run:function(){ //原型方法
        return this.name+this.age+' is running...';
    }//此处是语句，所以需要加分号
}
var box1=new Box();
box1.family.push('大鸭梨');
document.writeln(box1.family);//输出：苹果,香蕉,桔子,大鸭梨 
var box2=new Box();
document.writeln(box2.family);//输出：苹果,香蕉,桔子,大鸭梨

所以共享属性prototype一共有两个问题：

1. 原型如何传参数呢？
2. 两个实例共享同一个属性。原型对象最大的优点是共享，也是最大的缺点

为了解决传参和共享的问题，可以采用构造函数+原型 相组合的方式解决：

function Box(name,age){//保持独立的用构造函数
    this.name=name;
    this.age=age;
    this.family=['苹果','香蕉','桔子'];
}
Box.prototype={
    //保持共享的用原型
    constructor:Box,
    run:function(){
        return this.name+this.age+' is running...';
        }
}
var box1=new Box('hexkj',24);
box1.family.push('大鸭梨');    
var box2=new Box('Jack',35);
document.writeln(box1.run());//hexkj24 is running...
document.writeln(box1.family);//输出：苹果,香蕉,桔子,大鸭梨 
document.writeln(box2.run());//Jack35 is running...
document.writeln(box2.family);//输出：苹果,香蕉,桔子    

通过以上混合模式，属性保持了独立，方法保持了共享，比较好的解决了上面的两个问题。但是通过以上方式，Box构造函数和prototype是两部分,没有面向对象的封装效果，看起来比较怪异。可以采用动态原型的方式进行解决，即将原型挪到构造函数内，且判断原型是否包含方法即可。如下所示：

function Box(name,age){//保持独立的用构造函数
    this.name=name;
    this.age=age;
    this.family=['苹果','香蕉','桔子'];
    //原型只有在第一次实例化即可，不需要重复执行
    if(typeof this.run !='function'){
        Box.prototype.run=function(){
            return this.name+this.age+' is running...';
        }
    }
}
var box1=new Box('hexkj',24);
var box2=new Box('Jack',35);
box1.family.push('大鸭梨');
document.writeln(box1.run());//hexkj24 is running...
document.writeln(box1.family);//输出：苹果,香蕉,桔子,大鸭梨 
document.writeln(box2.run());//Jack35 is running...
document.writeln(box2.family);//输出：苹果,香蕉,桔子

通过以上方式，实现了封装，且原型对象只执行了一次，执行效果也是一样的。通过动态原型的模式，不可以采用字面量的原型重写，否则都会消失。

继承

原型链继承

javascript采用原型链来实现。被继承的函数叫做超类（父类，基类），继承的函数叫做子类（派生类），如下所示：

function Box(){ //被继承的函数叫做超类（父类，基类）
    this.name='Lee';
}
function Desk(){//继承的函数叫做子类（派生类）
    this.age=18;
}        
//通过原型链继承,Desk如何继承Box
Desk.prototype=new Box();
var desk=new Desk();
document.writeln(desk.name+desk.age);//输出Lee18 表示Desk继承了Box的属性

此处name采用就近原则，如果实例属性有，则采用实例属性，否则采用原型属性。

子类从属于自己或父类，如下所示：

document.writeln(desk instanceof Desk);// true 
document.writeln(desk instanceof Box); //true 
document.writeln(desk instanceof Object);//true

对象冒充继承

function Box(name,age){
    this.name=name;
    this.age=age;
    this.run=function(){
        return this.name+this.age+' is running....';
    }
}
Box.prototype.runner='can not running';    
function Desk(name,age){
    Box.call(this,name,age);//采用对象冒充调用父类
}    
var desk=new Desk('hex',18);
document.writeln(desk.run()); //输出：hex18 is running.... 
document.writeln(desk.runner);//输出：undefined  

通过以上实例可以看出：对象冒充，不可以继承原型中的属性和方法。放在构造函数中，每实例化一次，就分配一个内存地址，放在原型中，又无法继承，该如何解决呢？

答：可以采用组合方法，即原型链继承和对象冒充方式相结合。如下所示：

Desk.prototype=new Box(); //重点
var desk=new Desk('hex',18);
document.writeln(desk.runner);//输出：can not running 表示可以访问原型中的方法和属性

备注

沧海月明珠有泪，蓝田日暖玉生烟。