继承

es5 的三种继承方式

一、构造函数继承( 缺点是:原型上的方法或者属性,无法继承)

function Fn(){
    this.name = "zhangsan",
    this.age = 12
    this.eat = function(){
          console.log("eat")
      }
 }
    Fn.prototype.sleep = function(){
          console.log("sleep")
    } // 无法继承
    function F(){
     console.log(this)
     Array.prototype.join.call(obj,'-')  // 上下文模式 call 和 apply
         Array.prototype.join.apply(obj,['-'])
    Fn.call(this)
     }
     var fn = new Fn()
     console.log(fn)
     var f = new F()
    console.log(f.sleep())

二、 原型继承
共用一个原型对象,导致谁修改原型对象的值,其余对象都会被更改

function Fn(){
        this.name = "zhangsan"
        this.age = 12
        this.color = ["yellow", "pink"]
        this.eat = function(){
                console.log("eat")
                 }
         }
         Fn.prototype.sleep=function(){
            console.log("sleep")
        }
        function F(){}
        F.prototype = new Fn()
       var f = new F()
       var f1 = new F()
       f.color.push("black")
       console.log(f1.color)// color=['yellow','pink','black']

三、组合方式

 function Fn(){
            this.name = "zhangsan"
            this.age = 12
            this.color = ["yellow", "pink"]
            this.eat = function(){
                console.log("eat")
            }
        }
        function F(){
             Fn.call(this)  // this指向 Fn()
        }
        F.prototype = Object.create(Fn.prototype)
        // F.prototype = Fn.prototype.constructor === Fn
        F.prototype.constructor = F
        
        var f = new F()
        var f1 = new F()
        f.color.push("black")
        console.log(f1.color) //color =["yellow", "pink"]
        
        function FCC(){}
        console.log(f instanceof FCC)
        console.log(f instanceof Fn)

es6继承

1.通过extends 关键字来继承

2.子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工,如果不调用super方法,子类就得不到this对象。因此,只有调用super之后,才可以使用this关键字。

class People{
            constructor(name,age,skin){
                this.name = name,
                this.age = age
                this.skin = skin
            }
            eat(){
                console.log("eat")
            }
            sleep(){
                console.log("sleep")
            }
            speak(){
                console.log("speak")
            }
        }  
        class Student extends People{
             constructor(name,age,skin,id,classs){
                 super(name,age,skin) 
                 this.id = id
                 this.classs = classs
             }
             study(){
                 console.log("study")
             }
        }
        var stu = new Student("zhangsan",12,"yellow",110,'一年级01班')
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基本语法 简介 JavaScript语言中,生成实例对象的传统方法是通过构造函数. ES6提供更接近传统语言的写法...
    JarvanZ阅读 886评论 0 0
  • 简介 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。...
    emmet7life阅读 361评论 0 0
  • 继承是面向对象中一个比较核心的概念。其他正统面向对象语言都会用两种方式实现继承:一个是接口实现,一个是继承。而EC...
    lovelydong阅读 387评论 0 2
  • 简介 Class可以通过extends关键字实现继承。 上面代码定义了一个ColorPoint类,该类通过exte...
    oWSQo阅读 685评论 0 1
  • 文/白茶心 夫妻有七年之痒,听说朋友也有七年之期。但很多夫妻和朋友,却是连七年也到不了。 我们在讨论萧红的故事。左...
    白茶心阅读 376评论 4 2