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

一、澄清概念

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

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

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

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

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

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

三、抽象的定义

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

四、JavaScript面向对象三大特征

  4.1.封装

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

封装的范例:

<script type="text/javascript">
    /*定义一个Person类*/
    function Person(_name,_age,_salary){
        //Person类的公开属性,类的公开属性的定义方式是:”this.属性名“
        this.Name=_name;
        //Person类的私有属性,类的私有属性的定义方式是:”var 属性名“
        var Age=_age;
        var Salary=_salary;

        //定义Person类的公开方法(特权方法),类的公开方法的定义方式是:”this.functionName=function(){.....}“
        this.Show=function(){
            alert("Age="+Age+"\t"+"Salary="+Salary);//在公开方法里面访问类的私有属性是允许的
        }
        /*
        定义Person类的私有方法(内部方法),
        类的私有方法的定义方式是:”function functionName(){.....}“,
        或者 var functionName=function(){....}
        */
        function privateFn(){
            alert("我是Person类的私有函数privateFn");
        }

        var privateFn2=function(){
            alert("我是Person类的私有函数privateFn2");
        }
    }
    /*通过prototype给可以类的所有对象添加公共(public)方法,
    但是这种方式定义的方法不能去访问类的私有属性和私有方法*/
    Person.prototype.Fn=function(){
        alert("访问公共属性this.Name="+this.Name);//访问公共属性,OK的
        //alert("访问私有属性Aag="+Age);//访问私有属性,这里会报错“Age未定义”
        //privateFn();//调用私有方法,这里会报错“缺少对象”

    }

    var p1 = new Person("孤傲苍狼",24,2300);
    alert("p1.Name="+p1.Name);//访问公有属性,这是可以正常访问的
    alert("p1.Age="+p1.Age+"\t"+"p1.Salary="+p1.Salary);//不能使用类的对象去直接访问类私有属性,这是访问不了的,结果都是undefined
    p1.Show();//调用类的公共函数,这次允许的
    p1.Fn();//调用类的公共函数,这次允许的
    //alert("p1.privateFn():"+p1.privateFn()+" p1.privateFn2():"+p1.privateFn2());//不能使用类的对象去调用类的私有方法,这里会报错”对象不支持此属性或者方法“
  </script>

 4.2.继承

继承范例:

<script type="text/javascript">
    /*定义Stu类*/
    function Stu(name,age){
        this.Name=name;
        this.Age=age;
        this.Show=function(){
            window.alert("我的名字是:"+this.Name+",今年:"+this.Age);
        }
        this.SayHello = function(){
            window.alert("Hello,"+this.Name);
        }
    }

    /*定义MidStu类*/
    function MidStu(name,age){
        this.stu=Stu;//MidStu类继承Stu类
        this.stu(name,age);//JS中实际上是通过对象冒充来实现继承的,这句话不能少,因为JS是动态语言,如果不执行,则不能实现继承效果
        /*
        从父类继承下来的公共方法,可以根据实际情况选择重写
        */
        //在子类MidStu中重写父类Stu的Show方法
        /*this.Show=function(){
            alert("MidStu.Show()");
        }*/
        //在子类MidStu中重写父类Stu的SayHello方法
        this.SayHello=function(){
            alert("你好,"+this.Name);
        }

    }

    var midStu = new MidStu("孤傲苍狼",24);//创建一个MidStu类实例对象
    alert("访问继承下来的属性Name和Age,midStu.Name="+midStu.Name+",midStu.Name="+midStu.Age);//访问继承下来的属性
    midStu.Show();//调用从父类Stu继承下来的Show方法
    midStu.SayHello();//调用从父类Stu继承下来的SayHello方法,SayHello()在子类中进行了重写,这里调用的是重写过后的SayHello()方法
  </script>

运行结果:

 4.3.多态

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

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

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

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

//通过Object直接创建对象
    //var p1 = new Object();//创建一个Object对象
    var p1 = {};//创建一个Object对象,简写
    //动态增加属性、方法
    p1.Name = "孤傲苍狼";
    p1.Age = 24;
    p1.SayHello = function() { alert("hello,"+p1.Name); };
    p1.SayHello();
    for(var propertyName in p1) {//对象的成员都是对象的key
        alert(propertyName);
    }

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

  基本语法:
function 类名(){
     this.属性名;//公共属性
     var 属性名;//私有属性
     /*凡是定义类的公共属性和公共方法都要使用this*/
     //定义类的公共函数
     this.函数名=function(){

     }
     //定义类的私有函数
     function 函数名(){

     }
}

范例:

/*定义一个猫类,这种就是使用构造函数来定义类(原型对象)*/
    function Cat(){
        this.Name="catName";//public属性
        this.Age;//public属性
        this.Color;//public属性
        var weight=2;//private属性,只能在Cat类内部使用,Cat类的对象无法访问这个私有属性
        //public方法
        this.publicFunction = function(){
            alert(weight);
            alert("猫叫...");
        }
        //private方法,只能在Cat类内部使用,Cat类的对象无法访问这个私有方法
        var privateFunction = function(){
            alert("私有方法");
        }


    }
    //如果这样用,那么就当成函数来使用
    Cat();
    //如果这样用,那么就当成类来使用
    var cat1 = new Cat();
    //cat1就是一个对象(实例)
    alert(cat1.Name);//访问公共属性,弹出默认值catName
    cat1.Name="TomCat";//访问公共属性
    cat1.Age=3;//访问公共属性
    cat1.Color="白色";//访问公共属性
    alert(cat1.weight);//访问私有属性,无法访问,弹出undefined
    alert(cat1.Name+"\t"+cat1.Age+"\t"+cat1.Color);//访问对象的属性方式1:对象名.属性名
    alert(cat1["Name"]+"\t"+cat1["Age"]+"\t"+cat1["Color"]);//访问对象的属性方式2:对象名["属性名"]
    cat1.publicFunction();//调用public方法
    cat1.privateFunction();//调用private方法,报错:对象不支持此属性或方法
    for(var property in cat1){
        document.writeln(property+"\t");
    }

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

document.write("<pre>");
    function Person(){

    }
    /*Person.constructor得到的Person类的构造函数如下:
        function Function() {
            [native code]
        }
    */
    document.writeln("Person.constructor:"+Person.constructor);//Person类的构造函数
    document.writeln("Person:"+Person);
    var p1 = new Person();
    document.writeln("p1.constructor:"+p1.constructor);//”p1.constructor“是得到p1实例的构造函数
    //如何判断某个对象是不是某个类型,采用如下两种方式
    if(p1 instanceof Person){
        document.writeln("p1 is Person ok1");
    }
    if(p1.constructor==Person){
        document.writeln("p1 is Person ok2");
    }

    var num1=123;
    document.writeln("num1.constructor:"+num1.constructor);

    var str1="abc";
    document.writeln("str1.constructor:"+str1.constructor);
    document.write("</pre>")

运行结果:

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]
}
posted @ 2020-05-23 16:08  进阶仙女  阅读(206)  评论(0编辑  收藏  举报