×

JavaScript类的继承

96
鐘濤
2017.08.11 02:56* 字数 172
        //  superclass 父类
        function Person(first, last) {
            this.first = first
            this.last = last
        }

        Person.prototype = {
            fullName: function() {
                console.log(this.first + ',' + this.last)
            },
            fullNameReversed: function() {
                console.log(this.first + this.last)
            },
            sayHello: function(str) {
                alert(str)
            },
        }

        //  subclass  子类
        function cuteGirl(args) {
            Person.apply(this, args)
            //    把父类Person的this绑定到当前子类cuteGirl下
        }

        //  subclass extends superclass  子类继承父类
        cuteGirl.prototype = Object.create(Person.prototype)
        //  新建了一个对象,参数Person.prototype是新创建的对象的原型
        cuteGirl.prototype.constructor = cuteGirl
        //  修正cuteGirl的构造器,因为上面改动了cuteGirl.prototype

        var xiaohong = new cuteGirl(['xiao', 'hong'])

        xiaohong.sayHello('hhh')  //    一个弹窗
        xiaohong.fullName()  //    xiao,hong
        xiaohong.fullNameReversed()  //    xiaohong
        //  superclass
        function Person (first, last) {
            this.first = first
            this.last = last
        }

        Person.prototype = {
            fullName:function() {
                console.log(this.first + ',' + this.last)
            },
            fullNameReversed:function() {
                console.log(this.first + this.last)
            },
            sayHello:function (str) {
                alert(str)
            },
        }

        function Girl (sex) {
            this.sex = sex
        }

        Girl.prototype = {
            saySex:function () {
                console.log(this.sex)
            }
        }


        //  subclass
        function cuteGirl (args, sex) {
            Person.apply(this, args)
            Girl.call(this, sex)
        }

        //  subclass extends superclass
        // cuteGirl.prototype = Object.create(Person.prototype)
        Object.assign(cuteGirl.prototype, Person.prototype, Girl.prototype)
        cuteGirl.prototype.constructor = cuteGirl

        var xiaohong = new cuteGirl(['xiao','hong'], '妹子')

        xiaohong.sayHello('hhh')        //  一个弹窗
        xiaohong.fullName()             //  xiao,hong
        xiaohong.fullNameReversed()     //  xiaohong
        xiaohong.saySex()               //  妹子

Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.assign(target, ...sources)
两个参数,第一个为目标对象,后面的为源对象,该方法的返回值是目标对象。
Object.assign(cuteGirl.prototype, Person.prototype, Girl.prototype) 这一句代码的作用就是把Person和Girl的原型都加到cuteGirl上面去。

还有其实第一种单继承可以不使用cuteGirl.prototype = Object.create(Person.prototype)直接用cuteGirl.prototype = Person.prototype)也可以实现我们想要的效果。

日常踩坑
Web note ad 1