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();
};

未完待续...

posted @ 2018-04-23 19:21  水墨墨心  阅读(182)  评论(0编辑  收藏  举报