美文网首页
JavaScript类的继承

JavaScript类的继承

作者: 鐘濤 | 来源:发表于2017-08-11 02:56 被阅读0次
            //  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)也可以实现我们想要的效果。

    相关文章

      网友评论

          本文标题:JavaScript类的继承

          本文链接:https://www.haomeiwen.com/subject/xrakrxtx.html