JavaScript进阶【三】JavaScript面向对象的基础知识复习-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

JavaScript进阶【三】JavaScript面向对象的基础知识复习

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79547464 ...
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79547464
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript面向对象知识复习</title>
</head>
<body>
    <h2></h2>
    <script type="text/javascript">
        /************************************************类,成员属性,成员方法******************************************************/
        /**
         * 定义一个类
         * @param name
         * @param age
         * @constructor
         */
        function MyClass(name, age) {
            this.name = name;
            this.age = age;

            // 成员方法
            this.toString = function () {
                alert(cls1.name+":"+cls1.age);
            };
        };

        /**
         * 实例化一个cls1对象
         * @type {MyClass}
         */
        var cls1 = new MyClass("xiugang", 15);
        //alert(cls1.name+":"+cls1.age);
        cls1.toString();


        // 再给这个类的一个对象cls2添加一个方法
        var cls2 = new MyClass("zhangsan", 25);
        cls2.ShowName = function () {
            alert(this.name+":"+this.age);
        };
        cls2.ShowName();


        // 使用Prototype对象来给函数添加方法
        function Animal(name, age) {
            this.name = name;
            this.age = age;
        }

        Animal.prototype.toString = function () {
            alert(this.name+":"+this.age);
        };

        // 实例化两个对象
        var dog = new Animal("dog", 15);
        dog.toString();
        var cat = new Animal("cat", 16);
        cat.toString();



        // 利用prototype属性给一个类添加多个方法
        function Person(name, age) {
            this.name = name;
            this.age = age;
        };
        Person.prototype = {
            toString : function () {
                alert(this.name+":"+this.age);
            },
            sayHello : function () {
                alert("say Hello!");
            }

        };

        var student = new Person("小明", 25);
        student.sayHello();
        student.toString();

        /************************************************静态类******************************************************/
        var StaticClass = function () {

        }
        StaticClass.name = "StaticClass";
        StaticClass.Sum = function (value1, value2) {
            return value1 + value2;
        };
        alert(StaticClass.name+", "+StaticClass.Sum(10, 20));




        /************************************************继承******************************************************/
        function PeopleClass() {
            this.type = "People";
        };
        PeopleClass.prototype = {
            getType : function () {
                alert("This is a Person");
            }
        };

        function StudentClass(name, sex) {
            // 使用apply方法将父类对象的构造函数绑定到子类对象上
            PeopleClass.apply(this, arguments);
            this.name = name;
            this.sex = sex;
        }
        var stu = new StudentClass("小红", "");
        alert(stu.type);        // 实现了属性的继承


        /**
         * 实现方法的继承
         */
        function Sophermore(name, sex) {
            PeopleClass.apply(this, arguments);
            // 实现父类方法的继承
            /**
             *  实现思路: 需要循环将父类对象的prototype进行赋值, 即可达到继承的目的
             */
            var prop;
            for (prop in PeopleClass.prototype){
                var proto = this.constructor.prototype;
                if (!proto[prop]){
                    proto[prop] = PeopleClass.prototype[prop];
                }
                proto[prop]["super"] = PeopleClass.prototype;
            }
            this.name = name;
            this.sex = sex;
        }
        var stu2 = new Sophermore("xiuxiu", 22);
        alert(stu2.type);
        stu2.getType()


        /**
         * 方法二:实现继承的第二种方法, 使用对象冒充的方法
         */
        function AnimalNew(name, age) {
            this.name = name;
            this.age = age;

            this.Sum = function () {
                alert(this.name+","+this.age);
            }
        }
        // 成员方法
        /*AnimalNew.prototype = {
            sayhello : function () {
                alert(this.name+"is saying Hello!");
            },
            sayAge : function () {
                alert(this.name+"'s age is "+this.age);
            }
        }*/
        AnimalNew.prototype.sayHello = function () {
            alert(this.name+" is saying Haha!");
        }

        // 子类开始实现继承
        function Duck(name, age) {
            this.animal = AnimalNew;

            this.animal(name, age);
        }

        var duck = new Duck("鸭子", 12);
        //duck.sayHello();      //error!
        //duck.sayAge();     //error!
        //duck.sayHello();    //error!
        duck.Sum();         //ok的!



        /************************************************JavaScript继承知识加强******************************************************/
        function Animal(name) {
            // 属性
            this.name = name;

            //实例方法
            this.sleep = function () {
                console.log(this.name+"正在睡觉!");
            }
        }
        // 原型方法
        Animal.prototype.eat = function (food) {
            console.log(this.name+"正在吃"+food);
        }

        /**
         * 方法一: 将父类的实例作为子类的原型, 可以同时实现父类的属性和方法的继承
         */
        function Cat() {

        }
        Cat.prototype = new Animal();
        Cat.prototype.name = "cat";

        // test
        var cat =new Cat();
        console.log(cat.name);
        cat.sleep()
        cat.eat("fish");
        console.log(cat instanceof Animal);
        console.log(cat instanceof Cat);


        /**
         * 方法二: 组合继承
         * 通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
         */
        function Cow(name) {
            Animal.call(this);
            this.name = name;
        }
        Cow.prototype = new Animal();
        Cow.prototype.constructor = Cat;

        var cow = new Cow("小牛博客");
        console.log(cow.name);
        console.log(cow.sleep());
        console.log(cat instanceof Animal);
        console.log(cat instanceof Cat);


        // 利用方法二:组合继承实现继承的综合案例
        function Family(name, age) {
            // 属性
            this.name = name;
            this.age = age;

            // 实例方法
            this.Member = function () {
                alert("This family is having 5 memnbers now!");
            }
        };

        // 原型方法
        Family.prototype = {
          sayHello : function () {
              alert(this.name +" is saying hello!");
          },
          sayAge : function () {
              alert(this.name +" is saying age:"+this.age);
          }
        };

        // 开始实现继承
        function Son(name, age) {
            Family.call(this);

            this.name = name;
            this.age = age;
        }
        Son.prototype = new Family();
        Son.prototype.constructor = Family;

        // 开始测试
        var son = new Son("王老大", 15);
        alert(son.age+", "+son.age);
        son.sayAge();
        son.sayHello();
        alert(son instanceof Family);
        alert(son instanceof Son);

    </script>
</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章