JavaScript学习总结（5）——Javascript面向(基于)对象编程

妖狐艹你老母 2022-10-02 08:54 309阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

## 一、澄清概念 ##

1.JS中"基于对象=面向对象"

2.JS中没有类(Class)，但是它取了一个新的名字叫“原型对象”，因此"类=原型对象"

## 二、类(原型对象)和对象(实例)的区别与联系 ##

1.类(原型对象)是抽象，是概念的，代表一类事物。

2.对象是具体的，实际的，代表一个具体的事物。

3.类(原型对象)是对象实例的模板，对象实例是类的一个个体。

## 三、抽象的定义 ##

在定义一个类时，实际上就是把一类事物的共有属性和行为提取出来，形成一个物理模型(模板)，这种研究问题的方法称为抽象。

## 四、JavaScript面向对象三大特征 ##

### 　　4.1.封装 ###

封装就是把抽象出来的属性和对属性的操作封装在一起，属性被保护在内部，程序的其它部分只有通过被授权的操作(函数)，才能对属性进行操作！

**封装的范例：**

![复制代码][20140108_c1ds.gif]

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>

![复制代码][20140108_c1ds.gif]

### 　　4.2.继承 ###

**继承范例：**

![复制代码][20140108_c1ds.gif]

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("孤傲苍狼",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>

![复制代码][20140108_c1ds.gif]

运行结果：

### 4.3.多态 ###

所谓多态，就是指一个引用在不同情况下的多种状态，在Java中多态是指通过指向父类的引用，来调用不同子类中实现的方法。

JS实际上是无态的，是一种动态语言，一个变量的类型是在运行过程中由JS引擎决定的，所以说，JS天然支持多态。

## 五、JavaScript自定义类(原型对象)的方式 ##

### 　　5.1.工厂方法——使用new Object创建对象并添加相关属性 ###

![复制代码][20140108_c1ds.gif]

1     //通过Object直接创建对象
     2     //var p1 = new Object();//创建一个Object对象
     3     var p1 = {};//创建一个Object对象，简写
     4     //动态增加属性、方法
     5     p1.Name = "孤傲苍狼";
     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     }

![复制代码][20140108_c1ds.gif]

### 　　5.2.使用构造函数来定义类(原型对象) ###

基本语法：

![复制代码][20140108_c1ds.gif]

1 function 类名(){
     2      this.属性名;//公共属性
     3      var 属性名;//私有属性
     4      /*凡是定义类的公共属性和公共方法都要使用this*/
     5      //定义类的公共函数
     6      this.函数名=function(){
     7                 
     8      }
     9      //定义类的私有函数
    10      function 函数名(){
    11 
    12      }
    13 }

![复制代码][20140108_c1ds.gif]

范例：

![复制代码][20140108_c1ds.gif]

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     }

![复制代码][20140108_c1ds.gif]

JS中一切都是对象，类(原型对象)其实也是对象，它实际上是Function类的一个实例

![复制代码][20140108_c1ds.gif]

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>")

![复制代码][20140108_c1ds.gif]

运行结果：

Person.constructor：
    function Function() {
        [native code]
    }
    
    Person：function Person(){
    	
    	}
    p1.constructor：function Person(){
    	
    	}
    p1 is Person ok1
    p1 is Person ok2
    num1.constructor：
    function Number() {
        [native code]
    }
    
    str1.constructor：
    function String() {
        [native code]
    }

转载于:https://my.oschina.net/zhanghaiyang/blog/606323

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/e2fadd2725aa4e56b19fe2ad5b6192d3.png
[20140108_c1ds.gif]: /images/20220113/3ee1175fd85246da964ef38a34d838cb.png