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>
原文地址:https://www.cnblogs.com/yerenyuan/p/5393441.html