开发者社区> 向善的灯> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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>

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

相关文章
《JavaScript面向对象编程指南(第2版)》——1.9 本章小结
然后,对面向对象程序设计的概念进行了一些基本论述。接着,我们向您详细阐述了为什么JavaScript不是传统的基于类的面向对象语言,而是一套独特的原型系统。现在,您已经为下一步深入学习JavaScript语言、掌握其面向对象特性打下了一定的基础,但让我们一步步来。
1332 0
《JavaScript面向对象编程指南(第2版)》——1.4 展望未来
对于未来的情况,我们这里只能做一些猜测。但几乎可以肯定地说,JavaScript语言必将会有它的一席之地。毕竟,在过去相当长的一段时间里,JavaScript在被严重低估、始终未得到充分利用(或者被错误地滥用了)的情况下,依然几乎每天都能有很多新的、有趣的JavaScript应用被开发出来。
1205 0
《JavaScript面向对象编程指南(第2版)》——1.7 OOP小结
本节书摘来自异步社区《JavaScript面向对象编程指南(第2版)》一书中的第1章,第1.7节,作者:【加拿大】Stoyan Stefanov著,更多章节内容可以访问云栖社区“异步社区”公众号查看
1394 0
《JavaScript面向对象编程指南(第2版)》——第1章 面向对象的JavaScript 1.1 回顾历史
自Web诞生以来,人们对于动态与响应式页面的需求便与日俱增。虽然静态的HTML文本页面在可读性方面或许会更好一些,特别是在有了CSS的辅助之后,页面排版显得更加美观了,但从另一方面来说,如果我们能让人们像在桌面上那样使用浏览器中的应用程序,事情或许会变得更有趣一些。
1747 0
+关注
53
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载