zoukankan      html  css  js  c++  java
  • JS面向(基于)对象编程--三大特征

       抽象

       在讲解面向对象编程的三大特征前,我们先了解什么叫抽象,在定义一个类时候,实际上就是把一类事物的共有的属性和行为提取出来,形成一个物理模型(模板)。这种研究问题的方法称为抽象。

       封装

       什么是封装?

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

       封装--访问控制修饰符

       电视机的开关,对音量,颜色,频道的控制是公开的,谁都可以操作,但是对机箱后盖,主机板的操作却不是公开的,一般由专业维修人员来玩。那么在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提供有以下几种控制方法和属性的访问权限:

    1. 公开级别:对外公开
    2. 私有级别:类本身可以访问,不对外公开

       通过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关键字,它可以通过如下方式实现继承。

    1. 对象冒充
    2. call及apply

       继承--小结:

    1. js可以实现多重继承
    2. Object类是js所有类的基类

       方法重载(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>

       

       闭包

       老韩讲闭包时到底有多随意啊!我相信讲闭包,又得开一个系列了。所以这里仅作初步了解。

       闭包的解释:

    1. 闭包和垃圾回收机制GC是相关联的
    2. 闭包实际上是在涉及到一个对象的成员属性,何时被GC处理的问题
    3. 怎样才能对对象的属性形成一个闭包

       如下例: 

    <!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>
  • 相关阅读:
    第二冲刺阶段第一天
    spring第二冲刺阶段第八天
    spring第二冲刺阶段第七天
    spring第二冲刺阶段第六天
    spring第二冲刺阶段第五天
    spring冲刺第二阶段第四天
    spring第二阶段冲刺第三天
    spring冲刺第二阶段第二天
    SPRING冲刺第二阶段第一天
    spring第一冲刺阶段总结200zi
  • 原文地址:https://www.cnblogs.com/yerenyuan/p/5393441.html
Copyright © 2011-2022 走看看