标签：传参数 派生类 变量 缺点 导致 小例子 重复执行 判断 表示
在前端开发中，JavaScript并没有想象中那么简单，不只是简单的UI输入验证，还有面向对象。对于刚刚JavaScript入门的你来说，可能会稍稍惊讶：哇，虽然前端开发好找对象，妹子多，但是JavaScript真的可以向对象编程么！！！是的，你没有看错，本文将通过一些小例子，逐步讲解JavaScript的面向对象编程。仅供学习分享使用，如有不足之处，还请指正。
ECMA Script有两种开发模式：
创建对象，然后给对象赋值属性和方法。如下所示：
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可以采用构造函数的方式创建特定的对象。构造函数规范：
构造函数没有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
通过以上实例可以看出，使用构造函数，可以解决对象识别的问题。
备注：
即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 表示可以访问原型中的方法和属性
沧海月明珠有泪，蓝田日暖玉生烟。
标签：传参数 派生类 变量 缺点 导致 小例子 重复执行 判断 表示
原文地址：https://www.cnblogs.com/hsiang/p/12293551.html
