07月07, 2019

js中的面向对象 类 class 继承

类的声明

function ani(){
    this.name='name'
}

//es6
class ani2 {
   constructor(){
        this.name=name
   }
}


生成实例

 new ani()   newani2()

类的继承

1.借助构造函数

 //缺点:父级的原型的方法不会被继承
        function Parent1() {
            this.name = "parent1";
        }
        function Child1() {
            Parent1.call(this);
            this.type = "child";
        }
        Parent1.prototype.say = function() {};
//child1不会继承say方法

2.借助原型链实现继承

        function Parent2() {
            this.name = "parent2";
        }
        function Child2() {
            this.type = "child2";
        }
        Child2.prototype = new Parent2();
        console.log(new Child2().name); //parent2
//缺点:实例化的其中一个对象改原型属性的值 所有实例的对象的属性的对应的变了,因为他们都是指向的实例的原型的同一个对象
    function Parent2() {
            this.name = [1, 2, 3, 4];
        }
        function Child2() {
            this.type = "child2";
        }
        Child2.prototype = new Parent2();

        var s1 = new Child2();
        var s2 = new Child2();
        s1.name.push(5);
        console.log(s1.name, s2.name);//[1,2,3,4,5]

3.组合方式

    function Parent3() {
            this.name = "Parent3";
            this.play = [1, 2, 3];
        }
        function Child3() {
            Parent3.call(this);
            this.type = "child3";
        }

 //缺点:调用两次构造函数
  Child3.prototype = new Parent3();
//缺点 实例化的对象的constructor 指向parent 而不是child 找不到这个对象真正是谁实例化出来的
  Child3.prototype = Parent3.prototype; 
//最理想的答案
 Child3.prototype = Object.create(Parent3.prototype);
Child3.prototype.constructor =Child3



es6继承

alt

本文链接:http://zzl.bzpwhite.cn/post/js面向对象.html

-- EOF --

Comments