• JavaScript面向对象


    一,类与实例

    1,类的声明

        /**
         *类的声明
         */
        function Animal(name) {
            this.name = name;
        }
    
        /**
         *ES6中class的声明
         */
        class Animal2 {//类的声明
            constructor(name) {//构造函数
                this.name = name;
            }
        }

    2,生成实例

         /**
         *实例类的对象/实例化(通过new实例化,如果没有参数,可以省略括号,但不建议这么做)
         */
          console.log(new Animal(),new Animal2());

    二,类与继承

    1,如何实现继承

    借用构造函数,使用原型链,组合继承

    2,继承的几种方式

    (1)借助构造函数实现继承

        /**
         * 借助构造函数实现继承
         */
        function Parent1() {
            this.name = 'parent1';
        }
        Parent1.prototype.say = function() { //构造函数继承无法继承原型对象上的属性 !!!
        };
    
        function Child1() {
            Parent1.call(this);
            this.type = 'child1';
        }
        console.log(new Child1());
        console.log(new Child1().say()) //(intermediate value).say is not a function !!!

     (2)借助原型链实现继承

        /**
         * 借助原型链实现继承
         */
        function Parent2() {
            this.name = 'parent2';
            this.play = [1, 2, 3];
        }
    
        function Child2() {
            this.type = 'child2';
        }
        Child2.prototype = new Parent2();
    
        var s1 = new Child2();
        var s2 = new Child2();
        console.log(s1.play, s2.play); //[1, 2, 3]  [1, 2, 3]
        s1.play.push(4);
        console.log(s1.play); //[1, 2, 3, 4]  !!!
        console.log(s2.play); //[1, 2, 3, 4]  !!!
        console.log(s1.constructor,s2.constructor); //Parent2 Parent2  !!!

     (3)组合方式

        /**
         * 组合方式
         */
        function Parent3() {
            this.name = 'parent3';
            this.play = [1, 2, 3];
        }
    
        function Child3() {
            Parent3.call(this);
            this.type = 'child3';
        }
        Child3.prototype = new Parent3();
        var s3 = new Child3();  //实例化的时候,父类构造函数执行的两次 !!!
        var s4 = new Child3();
        s3.play.push(4);
        console.log(s3.play); //[1, 2, 3, 4]
        console.log(s2.play); //[1, 2, 3]
        console.log(s3.constructor); //Parent3 !!!

      (4)组合方式优化1

    /**
         * 组合继承的优化1
         */
        function Parent4() {
            this.name = 'parent4';
            this.play = [1, 2, 3];
        }
    
        function Child4() {
            Parent4.call(this);
            this.type = 'child4';
        }
        Child4.prototype = Parent4.prototype;
        var s5 = new Child4();
        var s6 = new Child4();
        console.log(s5, s6);
         s5.play.push(4);
        console.log(s5.play); //[1, 2, 3, 4]
        console.log(s6.play); //[1, 2, 3]
        console.log(s5 instanceof Child4, s5 instanceof Parent4); //true true
        console.log(s5.constructor); //Parent4 !!!

       (5)组合方式优化2

        /**
         * 组合继承的优化2
         */
        function Parent5() {
            this.name = 'parent5';
            this.play = [1, 2, 3];
        }
    
        function Child5() {
            Parent5.call(this);
            this.type = 'child5';
        }
        Child5.prototype = Object.create(Parent5.prototype);
        Child5.prototype.constructor = Child5;
        var s7 = new Child5();
        var p5 = new Parent5();
        console.log(s7.constructor); //Child5

    附:Object.create的实现方式

    Object.create =  function (o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    };

    未完待续...

  • 相关阅读:
    ASP.NET在MVC控制器中获取Form表单值的方法
    MVC中几种常用ActionResult
    EF 配置MySQL
    HTTP 错误 403.6
    26个Jquery使用小技巧(转)
    Win2008R2配置WebDeploy(转)
    IIS快捷方式
    发布你的程序包到Nuget
    PostgreSQL recovery.conf恢复配置
    PostgreSQL 9.5 高可用、负载均衡和复制
  • 原文地址:https://www.cnblogs.com/iceflorence/p/8921258.html
Copyright © 2020-2023  润新知