js面向对象的三大特征加闭包

建立在抽象的基础上

一、封装:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/game.css" type="text/css" rel="stylesheet" />
        <script language="JavaScript" type="text/javascript">
        function Person(name,age1,sal1){
            this.name=name;
//            私有
            var age=age1;
            var salary=sal1;
            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.age);
        p1.show();
        </script>
    </head>

    <body>

    </body>

</html>

View Code

proptype对所有的方法添加方法，当时不能访问私有对象和方法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/game.css" type="text/css" rel="stylesheet" />
        <script language="JavaScript" type="text/javascript">
function Person(){
    this.name="abc";
    var age=90;
}
Person.prototype.fun1=function(){
    window.alert(this.name);
    window.alert(this.age);
}
var p1=new Person();
p1.fun1();
</script>
    </head>
 
    <body>

    </body>

</html>

View Code

二、继承：

代码会出现冗余的问题，

抽象出一个学生类，取出共性

对象冒充，可以实现多重继承的效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/game.css" type="text/css" rel="stylesheet" />
        <script language="JavaScript" 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){
                this.stu=Stu;
                this.stu(name,age);
            }
            function Pupil(name,age){
                this.stu=Stu;
                this.stu(name,age);
            }
            var mid=new MidStu("小往",32);
            mid.show();
        </script>
    </head>

    <body>

    </body>

</html>

View Code

可以重写覆盖，不支持重载（不可以通过参数的个数类型来决定调用）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/game.css" type="text/css" rel="stylesheet" />
        <script language="JavaScript" 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){
                this.stu=Stu;
                this.stu(name,age);
                this.show=function(){
                    window.alert("hello,sjho2");
                }
            }
            function Pupil(name,age){
                this.stu=Stu;
                this.stu(name,age);
            }
            var mid=new MidStu("小往",32);
            mid.show();
        </script>
    </head>

    <body>

    </body>

</html>

View Code

三、多态

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/game.css" type="text/css" rel="stylesheet" />
        <script language="JavaScript" type="text/javascript">
            function Master(aniaml, food) {
                //给动物喂食物
                this.feed = function(animal, food) {
                    window.alert(animal.constructor);
                    document.write("Master给" + 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 Animal(name) {
                this.name = name;
            }

            function Cat(name) {
                this.animal = Animal;
                this.animal(name);
            }

            function Dog(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);
        </script>
    </head>

    <body>

    </body>

</html>

View Code

四、闭包

与垃圾回收是关联的，涉及到一个变量的成员属性什么时候被处理的问题

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link href="css/game.css" type="text/css" rel="stylesheet" />
        <script language="JavaScript" type="text/javascript">
//        闭包closure
function A(){
    var i=0;
    function b(){
        window.alert(i++);
    }
    return b;
}
A();
var c=A();
c();
        </script>
    </head>

    <body>

    </body>

</html>

View Code

js面向对象的三大特征加闭包

猜你喜欢