JavaScript面向对象编程

时间 2020-02-11

原文原文链接

概述

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

ECMA Script有两种开发模式：前端

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

建立一个对象

建立对象，而后给对象赋值属性和方法。以下所示：java

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能够采用构造函数的方式建立特定的对象。构造函数规范：this

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

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

 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();

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

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

经过以上实例能够看出，使用构造函数，能够解决对象识别的问题。指针

备注：

变量名name比较特殊，若是有问题，可使用user代替。
全局做用域中，this表示window。
普通函数，首字母不须要大写。

对象冒充调用

即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 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 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 表示能够访问原型中的方法和属性

备注

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