转载:https://www.cnblogs.com/xdp-gacl/p/3698862.html
一、澄清概念
1.JS中"基于对象=面向对象"
2.JS中没有类(Class),但是它取了一个新的名字叫“原型对象”,因此"类=原型对象"
二、类(原型对象)和对象(实例)的区别与联系
1.类(原型对象)是抽象,是概念的,代表一类事物。
2.对象是具体的,实际的,代表一个具体的事物。
3.类(原型对象)是对象实例的模板,对象实例是类的一个个体。
三、抽象的定义
在定义一个类时,实际上就是把一类事物的共有属性和行为提取出来,形成一个物理模型(模板),这种研究问题的方法称为抽象。
四、JavaScript面向对象三大特征
4.1.封装
封装就是把抽象出来的属性和对属性的操作封装在一起,属性被保护在内部,程序的其它部分只有通过被授权的操作(函数),才能对属性进行操作!
封装的范例:
1 <script type="text/javascript"> 2 /*定义一个Person类*/ 3 function Person(_name,_age,_salary){ 4 //Person类的公开属性,类的公开属性的定义方式是:”this.属性名“ 5 this.Name=_name; 6 //Person类的私有属性,类的私有属性的定义方式是:”var 属性名“ 7 var Age=_age; 8 var Salary=_salary; 9 10 //定义Person类的公开方法(特权方法),类的公开方法的定义方式是:”this.functionName=function(){.....}“ 11 this.Show=function(){ 12 alert("Age="+Age+"\t"+"Salary="+Salary);//在公开方法里面访问类的私有属性是允许的 13 } 14 /* 15 定义Person类的私有方法(内部方法), 16 类的私有方法的定义方式是:”function functionName(){.....}“, 17 或者 var functionName=function(){....} 18 */ 19 function privateFn(){ 20 alert("我是Person类的私有函数privateFn"); 21 } 22 23 var privateFn2=function(){ 24 alert("我是Person类的私有函数privateFn2"); 25 } 26 } 27 /*通过prototype给可以类的所有对象添加公共(public)方法, 28 但是这种方式定义的方法不能去访问类的私有属性和私有方法*/ 29 Person.prototype.Fn=function(){ 30 alert("访问公共属性this.Name="+this.Name);//访问公共属性,OK的 31 //alert("访问私有属性Aag="+Age);//访问私有属性,这里会报错“Age未定义” 32 //privateFn();//调用私有方法,这里会报错“缺少对象” 33 34 } 35 36 var p1 = new Person("孤傲苍狼",24,2300); 37 alert("p1.Name="+p1.Name);//访问公有属性,这是可以正常访问的 38 alert("p1.Age="+p1.Age+"\t"+"p1.Salary="+p1.Salary);//不能使用类的对象去直接访问类私有属性,这是访问不了的,结果都是undefined 39 p1.Show();//调用类的公共函数,这次允许的 40 p1.Fn();//调用类的公共函数,这次允许的 41 //alert("p1.privateFn():"+p1.privateFn()+" p1.privateFn2():"+p1.privateFn2());//不能使用类的对象去调用类的私有方法,这里会报错”对象不支持此属性或者方法“ 42 </script>
4.2.继承
继承范例:
1 <script type="text/javascript"> 2 /*定义Stu类*/ 3 function Stu(name,age){ 4 this.Name=name; 5 this.Age=age; 6 this.Show=function(){ 7 window.alert("我的名字是:"+this.Name+",今年:"+this.Age); 8 } 9 this.SayHello = function(){ 10 window.alert("Hello,"+this.Name); 11 } 12 } 13 14 /*定义MidStu类*/ 15 function MidStu(name,age){ 16 this.stu=Stu;//MidStu类继承Stu类 17 this.stu(name,age);//JS中实际上是通过对象冒充来实现继承的,这句话不能少,因为JS是动态语言,如果不执行,则不能实现继承效果 18 /* 19 从父类继承下来的公共方法,可以根据实际情况选择重写 20 */ 21 //在子类MidStu中重写父类Stu的Show方法 22 /*this.Show=function(){ 23 alert("MidStu.Show()"); 24 }*/ 25 //在子类MidStu中重写父类Stu的SayHello方法 26 this.SayHello=function(){ 27 alert("你好,"+this.Name); 28 } 29 30 } 31 32 var midStu = new MidStu("lanpo",24);//创建一个MidStu类实例对象 33 alert("访问继承下来的属性Name和Age,midStu.Name="+midStu.Name+",midStu.Name="+midStu.Age);//访问继承下来的属性 34 midStu.Show();//调用从父类Stu继承下来的Show方法 35 midStu.SayHello();//调用从父类Stu继承下来的SayHello方法,SayHello()在子类中进行了重写,这里调用的是重写过后的SayHello()方法 36 </script>
运行结果:
4.3.多态
所谓多态,就是指一个引用在不同情况下的多种状态,在Java中多态是指通过指向父类的引用,来调用不同子类中实现的方法。
JS实际上是无态的,是一种动态语言,一个变量的类型是在运行过程中由JS引擎决定的,所以说,JS天然支持多态。
五、JavaScript自定义类(原型对象)的方式
5.1.工厂方法——使用new Object创建对象并添加相关属性
1 //通过Object直接创建对象 2 //var p1 = new Object();//创建一个Object对象 3 var p1 = {};//创建一个Object对象,简写 4 //动态增加属性、方法 5 p1.Name = "lanpo"; 6 p1.Age = 24; 7 p1.SayHello = function() { alert("hello,"+p1.Name); }; 8 p1.SayHello(); 9 for(var propertyName in p1) {//对象的成员都是对象的key 10 alert(propertyName); 11 }
5.2.使用构造函数来定义类(原型对象)
基本语法:
1 function 类名(){ 2 this.属性名;//公共属性 3 var 属性名;//私有属性 4 /*凡是定义类的公共属性和公共方法都要使用this*/ 5 //定义类的公共函数 6 this.函数名=function(){ 7 8 } 9 //定义类的私有函数 10 function 函数名(){ 11 12 } 13 }
范例:
1 /*定义一个猫类,这种就是使用构造函数来定义类(原型对象)*/ 2 function Cat(){ 3 this.Name="catName";//public属性 4 this.Age;//public属性 5 this.Color;//public属性 6 var weight=2;//private属性,只能在Cat类内部使用,Cat类的对象无法访问这个私有属性 7 //public方法 8 this.publicFunction = function(){ 9 alert(weight); 10 alert("猫叫..."); 11 } 12 //private方法,只能在Cat类内部使用,Cat类的对象无法访问这个私有方法 13 var privateFunction = function(){ 14 alert("私有方法"); 15 } 16 17 18 } 19 //如果这样用,那么就当成函数来使用 20 Cat(); 21 //如果这样用,那么就当成类来使用 22 var cat1 = new Cat(); 23 //cat1就是一个对象(实例) 24 alert(cat1.Name);//访问公共属性,弹出默认值catName 25 cat1.Name="TomCat";//访问公共属性 26 cat1.Age=3;//访问公共属性 27 cat1.Color="白色";//访问公共属性 28 alert(cat1.weight);//访问私有属性,无法访问,弹出undefined 29 alert(cat1.Name+"\t"+cat1.Age+"\t"+cat1.Color);//访问对象的属性方式1:对象名.属性名 30 alert(cat1["Name"]+"\t"+cat1["Age"]+"\t"+cat1["Color"]);//访问对象的属性方式2:对象名["属性名"] 31 cat1.publicFunction();//调用public方法 32 cat1.privateFunction();//调用private方法,报错:对象不支持此属性或方法 33 for(var property in cat1){ 34 document.writeln(property+"\t"); 35 }
JS中一切都是对象,类(原型对象)其实也是对象,它实际上是Function类的一个实例
1 document.write("<pre>"); 2 function Person(){ 3 4 } 5 /*Person.constructor得到的Person类的构造函数如下: 6 function Function() { 7 [native code] 8 } 9 */ 10 document.writeln("Person.constructor:"+Person.constructor);//Person类的构造函数 11 document.writeln("Person:"+Person); 12 var p1 = new Person(); 13 document.writeln("p1.constructor:"+p1.constructor);//”p1.constructor“是得到p1实例的构造函数 14 //如何判断某个对象是不是某个类型,采用如下两种方式 15 if(p1 instanceof Person){ 16 document.writeln("p1 is Person ok1"); 17 } 18 if(p1.constructor==Person){ 19 document.writeln("p1 is Person ok2"); 20 } 21 22 var num1=123; 23 document.writeln("num1.constructor:"+num1.constructor); 24 25 var str1="abc"; 26 document.writeln("str1.constructor:"+str1.constructor); 27 document.write("</pre>")
运行结果:
1 Person.constructor: 2 function Function() { 3 [native code] 4 } 5 6 Person:function Person(){ 7 8 } 9 p1.constructor:function Person(){ 10 11 } 12 p1 is Person ok1 13 p1 is Person ok2 14 num1.constructor: 15 function Number() { 16 [native code] 17 } 18 19 str1.constructor: 20 function String() { 21 [native code] 22 }