标签:
抽象
在讲解面向对象编程的三大特征前,我们先了解什么叫抽象,在定义一个类时候,实际上就是把一类事物的共有的属性和行为提取出来,形成一个物理模型(模板)。这种研究问题的方法称为抽象。
封装
什么是封装?
封装就是把抽象出来的属性和对属性的操作封装在一起,属性被保护在内部,程序的其它部分只有通过授权的操作(函数),才能对属性进行操作。
封装--访问控制修饰符
电视机的开关,对音量,颜色,频道的控制是公开的,谁都可以操作,但是对机箱后盖,主机板的操作却不是公开的,一般由专业维修人员来玩。那么在js中如何实现这种类似的控制呢?请看下例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function Person(name, agei, sal) { this.name = name;//公开属性 var age = agei;//私有属性 var salary = sal;//私有属性 //在类中如何定义公开方法(特权方法),私有方法(内部方法) //如果我们希望操作私有的属性,则可用公开方法实现 this.show = function() { window.alert(age+" "+salary); } //私有方法,可以访问对象的属性 function show2() { window.alert(age+" "+salary); } } var p1 = new Person("sp", 20, 50000); window.alert(p1.name); p1.show(); p1.show2();//Uncaught TypeError: p1.show2 is not a function </script> </head> <body> </body> </html>
js提供有以下几种控制方法和属性的访问权限:
通过prototype给所有对象添加方法,但是这种方法不能访问私有变量和私有方法。
例,
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function Person() { this.name = "abc"; var age = 90; this.abc = function() { window.alert("abc()"); } function abc2() { window.alert("abc2()"); } } Person.prototype.fun1 = function() { window.alert(this.name);// ok //window.alert(age);// no ok Uncaught ReferenceError: age is not defined //window.alert(this.age);// 输出undefined this.abc();// 注意:不要漏掉this //abc2();// no ok } var p1 = new Person(); p1.fun1(); fun1();// Uncaught ReferenceError: fun1 is not defined </script> </head> <body> </body> </html>
特别注意:类名.prototype.函数名=function(){}这个也称为后置绑定。
继承
1、为什么需要继承?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function MidStu(name, age) { this.name = name; this.age = age; this.show = function() { window.alert(this.name+" "+this.age); } //计算学费 this.payFee = function(money) { window.alert("应交"+money*0.8); } } function Pupil(name, age) { this.name = name; this.age = age; this.show = function() { window.alert(this.name+" "+this.age); } //计算学费 this.payFee = function(money) { window.alert("应交"+money*0.5); } } </script> </head> <body> </body> </html>
问题:以上示例代码冗余。
解决方案:抽象出一个学生类,即把中学生和小学生的共性取出。如下例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //怎么解决代码冗余-->继承 //抽象出一个学生类,即把中学生和小学生的共性取出 function Stu(name, age) { this.name = name; this.age = age; this.show = function() { window.alert(this.name+" "+this.age); } } function MidStu(name, age) { /* window.alert(Stu); this.stu = Stu;这一句其实相当于下面这句 this.stu = function Stu(name, age) { this.name = name; this.age = age; this.show = function() { window.alert(this.name+" "+this.age); } }; */ this.stu = Stu; this.stu(name, age);//JS中实际上是通过对象冒充,来实现继承,这句话不能少,因为js是动态语言(执行的时候才分配空间),如果不执行它则不能实现继承 //MidStu可以覆盖Stu父类的show /* this.show = function() { window.alert("MidStu show();"); } */ } function Pupil(name, age) { this.stu = Stu; this.stu(name, age); } var midStu = new MidStu("阿昀", 20); //window.alert(midStu.name);// undefined //midStu.show();//Uncaught TypeError: midStu.show is not a function midStu.show(); </script> </head> <body> </body> </html>
继承--解决之道:
继承可以解决代码利用,让我们的编程更加靠近人类思维,当多个类存在相同的属性(变量)和方法时,可以从这些类中抽象出父类(比如刚才的Stu),在父类中定义这些相同的属性和方法,所有的继承类不需要重新定义这些属性和方法,js中没有extends关键字,它可以通过如下方式实现继承。
继承--小结:
方法重载(overloading)及覆盖(overriding)
简单的说:方法重载就是类的同一种功能的实现方式,到底采用哪种方式,取决于调用者给出的参数。
js不支持重载操作(即不可以通过参数的个数来决定调用哪个函数,但是因为js本身支持可变参数,所以,它可以看成天然支持重载)。如下例:
function abc() { if(argument.length = ...) {// 通过参数个数来判断执行哪个代码 } else if(...) { } .... }
因为javascript中的方法本身就是一个带可变参数的,通过在方法体内检测方法的参数情况,来实现重载的效果。[调用最后那个方法]
覆盖,也称为改写,就是指子类中定义的方法替换掉父类的方法。(案例说明)
多态
所谓多态,就是指一个引用(类型)在不同情况下的多种状态,在java中多态是指通过指向父类的引用,来调用在不同子类中实现的方法。
js实际上是无态的,是一种动态语言,一个变量的类型是在运行的过程中由js引擎来决定的,所以说js天生就支持多态。
一个多态的经典案例:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function Master() { //给动物喂食 this.feed = function(animal, food) { window.alert(animal.constructor); document.writeln("主人给"+animal.name+"喂"+food.name); } } //写一个食物类 function Food(name) { this.name = name; //... } function Fish(name) { this.food = Food; this.food(name); } function Bone(name) { this.food = Food; this.food(name); } function TaoZi(name) { this.food = Food; this.food(name); } //动物 function Animal(name) { this.name = name; //.... } function Cat(name) { this.animal = Animal; this.animal(name); } function Dog(name) { this.animal = Animal; this.animal(name); } function Monkey(name) { this.animal = Animal; this.animal(name); } var cat = new Cat("小猫咪"); var dog = new Dog("小狗"); var fish = new Fish("小鱼"); var bone = new Bone("骨头"); var master = new Master(); master.feed(cat, fish); master.feed(dog, bone); master.feed(new Monkey("小猴"), new TaoZi("水蜜桃")); </script> </head> <body> </body> </html>
闭包
老韩讲闭包时到底有多随意啊!我相信讲闭包,又得开一个系列了。所以这里仅作初步了解。
闭包的解释:
如下例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> /*闭包(closure)——讨论的(回收时机问题)是什么时候回收什么时候不回收*/ function A() { var i = 0; function b() { window.alert(i++); } return b; } //闭包<--->GC A();//此时内存中会有一个i的存储空间,被GC处理(是不是立马呢?至少会被当作垃圾,GC会认为被处理了) var c = A();//这种用法,GC不会把i当作垃圾 // c(); window.alert("aa"); //... //... c();//输出0 c();//输出1,从而证明i变量被闭包 </script> </head> <body> </body> </html>
标签:
原文地址:http://www.cnblogs.com/yerenyuan/p/5393441.html