JavaScript面向对象编程

Posted 2021-03-10 天马行空

概述

在前端开发中，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]

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

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

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

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

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

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

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

通过构造函数创建对象

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

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

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

 1 function Box(name,age){
 2     this.name=name; //添加属性
 3     this.age=age;
 4     this.run=function(){
 5         return this.name+this.age+‘is running...‘; 
 6     };//此处是语句，所以需要加分号
 7 }
 8 var box1=new Box(‘hexkj‘,150);
 9 var box2=new Box(‘jack‘,230);
10 document.getElementById("A01").innerText=box1.run();
11 document.getElementById("A02").innerText=box2.run();

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

1 function Desk(name){
2     this.name=name;
3 }
4 var box3=new Desk(‘Lee‘);
5 document.writeln(box3 instanceof Desk );//输出true
6 document.writeln(box1 instanceof Box );//输出true
7 document.writeln(box1 instanceof Desk );//输出false

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

备注：

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

对象冒充调用

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

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

对象比较

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

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

原型对象

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

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

原型和构造函数的差异：

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

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

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

1 document.writeln(Box.prototype.isPrototypeOf(box1) ); //输出true
2 function Desk(name){
3     this.name=name;
4 }
5 var box2=new Desk(‘Lee‘);
6 document.writeln(Desk.prototype.isPrototypeOf(box2) ); //输出true

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

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

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

判断属性

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

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

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

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

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

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

 1 function Box(){}
 2 Box.prototype={
 3     constructor:Box,
 4     name:‘Lee‘,
 5     age:20,
 6     run:function(){ //原型方法
 7         return this.name+this.age+‘ is running...‘;
 8     }//此处是语句，所以需要加分号
 9 }
10 var box1=new Box();
11 document.writeln(box1.constructor);//输出：function Box(){} 

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

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

扩展内置对象

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

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

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

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

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

原型的缺点

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

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

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

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

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

 1 function Box(name,age){//保持独立的用构造函数
 2     this.name=name;
 3     this.age=age;
 4     this.family=[‘苹果‘,‘香蕉‘,‘桔子‘];
 5 }
 6 Box.prototype={
 7     //保持共享的用原型
 8     constructor:Box,
 9     run:function(){
10         return this.name+this.age+‘ is running...‘;
11         }
12 }
13 var box1=new Box(‘hexkj‘,24);
14 box1.family.push(‘大鸭梨‘);    
15 var box2=new Box(‘Jack‘,35);
16 document.writeln(box1.run());//hexkj24 is running...
17 document.writeln(box1.family);//输出：苹果,香蕉,桔子,大鸭梨 
18 document.writeln(box2.run());//Jack35 is running...
19 document.writeln(box2.family);//输出：苹果,香蕉,桔子    

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

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

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

继承

原型链继承

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

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

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

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

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

对象冒充继承

 1 function Box(name,age){
 2     this.name=name;
 3     this.age=age;
 4     this.run=function(){
 5         return this.name+this.age+‘ is running....‘;
 6     }
 7 }
 8 Box.prototype.runner=‘can not running‘;    
 9 function Desk(name,age){
10     Box.call(this,name,age);//采用对象冒充调用父类
11 }    
12 var desk=new Desk(‘hex‘,18);
13 document.writeln(desk.run()); //输出：hex18 is running.... 
14 document.writeln(desk.runner);//输出：undefined  

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

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

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

备注

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