JS面向对象高级特性

本篇是通过学习视频《一头扎进javascirpt高级篇》整理的一些相关知识,大致包括下面几个方面:   1 对象的创建方法   2 对象的对象属性、私有属性、类属性   3 对象的对象方法、私有方法、类方法   4 javascirpt的继承、封装、与多态

  对象的创建方法:

  对象的创建可以通过两种方式,第一种通过对象初始化的方法:

            var person={
                name:"xingoo",
                age:26,
                say:function(){
                    console.log("say something");
                },
                action:function(){
                    console.log("do something");
                }
            };

            console.log(person.name);
            console.log(person.age);
            person.say();
            person.action();

  第二种方式通过构造函数创建:

            function student(name,age){
                this.name = name;
                this.age = age;
                this.say = function(){
                    console.log("say something");
                }
                this.action = function(){
                    console.log("do something");
                }
            }
            var xingoo = new student("xingoo",27);
            console.log(xingoo.name);
            console.log(xingoo.age);
            xingoo.say();
            xingoo.action();

  对象的属性

  对象的属性分为对象属性、私有属性和类属性。

  对象属性需要创建对象后才能使用;

  私有属性在内部可以直接使用,在外部需要通过闭包才能使用。

  类属性可以通过对象名称直接使用。

       function func(){
                this.objPro1 = "对象属性";
                func.prototype.objPro2 = "对象属性";

                var privatePro = "私有属性";
            }
            func.classPro = "类属性";

            console.log(func.classPro);

            var f = new func();
            console.log(f.objPro1);
            console.log(f.objPro2);

            <!-- 私有属性可以通过闭包获取 -->

  对象的方法

  对象方法包括:对象方法,私有方法和类方法,使用类似前面的属性。

            function demoFunc1(){
                var privateFunc = function(){
                    console.log("this is privateFunc");
                };

                privateFunc();

                this.objFunc1 = function(){
                    console.log("this is objFunc1");
                };
                demoFunc1.prototype.objFunc2 = function(){
                    console.log("this is objFunc2");
                };
            }
            demoFunc1.classFunc = function(){
                console.log("this is classFunc");
            };
            demoFunc1.classFunc();

            var f = new demoFunc1();
            f.objFunc1();
            f.objFunc2();

  继承、封装与多态

  JS要想实现继承,需要通过apply方法或者prototype实现。

  如果单纯的使用apply方法,子类的原型是子类;如果使用prototype,那么子类的原型也将继承父类。

  例如下面的代码:

            function Animal(name,age){
                this.name = name;
                this.age =age;
                this.say = function(){
                    console.log("animal say something");
                }
            }
            function Cat(name,age){
                Animal.apply(this,[name,age]);
            }
            <!-- Cat.prototype = new Animal();-->

            var cat1 = new Cat("xingoo",3);
            console.log(cat1.name);
            console.log(cat1.age);
            cat1.say();

  上面代码中,cat的原型是cat;

  如果开启注释的部分,可以发现,cat类的原型也变成了Animal。

  子类的方法会覆盖父类的方法,即表现出多态性:

            function Pig(name,age){
                this.say = function(){
                    console.log("i am pig");
                }
            }
            Pig.prototype = new Animal();
            function Dog(name,age){
                this.say = function(){
                    console.log("i am dog");
                }
            }
            Dog.prototype = new Animal();

            function say(animal){
                if(animal instanceof Animal){
                    animal.say();
                }
            }
            var dog = new Dog();
            var pig = new Pig();
            say(dog);
            say(pig);

  使用到的全部代码:

<!doctype html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <script type="text/javascript">
            <!-- 对象初始化器方式 -->
            var person={
                name:"xingoo",
                age:26,
                say:function(){
                    console.log("say something");
                },
                action:function(){
                    console.log("do something");
                }
            };

            console.log(person.name);
            console.log(person.age);
            person.say();
            person.action();

            <!-- 构造函数方式 -->
            function student(name,age){
                this.name = name;
                this.age = age;
                this.say = function(){
                    console.log("say something");
                }
                this.action = function(){
                    console.log("do something");
                }
            }
            var xingoo = new student("xingoo",27);
            console.log(xingoo.name);
            console.log(xingoo.age);
            xingoo.say();
            xingoo.action();

            <!-- 对象属性 私有属性,对象属性,类属性 -->
            function func(){
                this.objPro1 = "对象属性";
                func.prototype.objPro2 = "对象属性";

                var privatePro = "私有属性";
            }
            func.classPro = "类属性";

            console.log(func.classPro);

            var f = new func();
            console.log(f.objPro1);
            console.log(f.objPro2);

            <!-- 私有属性可以通过闭包获取 -->

            <!-- 私有方法,对象方法,类方法 -->
            function demoFunc1(){
                var privateFunc = function(){
                    console.log("this is privateFunc");
                };

                privateFunc();

                this.objFunc1 = function(){
                    console.log("this is objFunc1");
                };
                demoFunc1.prototype.objFunc2 = function(){
                    console.log("this is objFunc2");
                };
            }
            demoFunc1.classFunc = function(){
                console.log("this is classFunc");
            };
            demoFunc1.classFunc();

            var f = new demoFunc1();
            f.objFunc1();
            f.objFunc2();

            <!-- 封装性,继承性,多态性 -->
            <!-- apply()实现属性和方法的集成,prototype实现原型的继承 -->

            function Animal(name,age){
                this.name = name;
                this.age =age;
                this.say = function(){
                    console.log("animal say something");
                }
            }
            function Cat(name,age){
                Animal.apply(this,[name,age]);
            }
            <!-- Cat.prototype = new Animal();-->

            var cat1 = new Cat("xingoo",3);
            console.log(cat1.name);
            console.log(cat1.age);
            cat1.say();

            <!-- 继承 -->
            function Pig(name,age){
                this.say = function(){
                    console.log("i am pig");
                }
            }
            Pig.prototype = new Animal();
            function Dog(name,age){
                this.say = function(){
                    console.log("i am dog");
                }
            }
            Dog.prototype = new Animal();

            function say(animal){
                if(animal instanceof Animal){
                    animal.say();
                }
            }
            var dog = new Dog();
            var pig = new Pig();
            say(dog);
            say(pig);
        </script>
    </body>
</html>

  运行结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript文件加载优化

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行。 所以,...

    企鹅号小编
  • CSS补充之--页面布局、js补充,dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width...

    coders
  • js的高级知识---词法分析

    词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 具体步骤如下: 函数在运...

    coders
  • JavaScript资源大全中文版(Awesome最新版)

    Awesome系列的JavaScript资源整理。awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器、加载器、测...

    张果
  • jS正则和WEB框架Django的入门

    JS正则 -test 判断字符串是否符合规定的正则表达式 -exec 获取匹配的数据 test的例子: ? 从上述的例子我们可以看出,如果rep.test匹配到...

    coders
  • css补充、JavaScript、Dom

    css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码...

    coders
  • 全本 | iKcamp翻译 | 《JavaScript 轻量级函数式编程》|《你不知道的JS》姊妹篇

    本书主要探索函数式编程(FP)的核心思想。在此过程中,作者不会执着于使用大量复杂的概念来进行诠释,这也是本书的特别之处。我们在 JavaScript 中应用的仅...

    iKcamp
  • Java资源大全中文版(Awesome最新版)

    Awesome系列的Java资源整理。awesome-java 就是akullpp发起维护的Java资源列表,内容包括:构建工具、数据库、框架、模板、安全、代码...

    张果
  • 可迭代对象、迭代器、生成器的理解

    所有的生成器都是迭代器 关于迭代器和生成器的一种定义:迭代器用于从集合中取出元素;生成器用于凭空生成元素。 Python中,所有的集合都是可以迭代的,在Pyth...

    coders
  • 利用IronJs在.NET程序里面跑javascript脚本

    what’s dlr The dynamic language runtime (DLR) is a runtime environment that adds...

    kklldog

扫码关注云+社区

领取腾讯云代金券