ES5、ES6的四种继承方法 |
您所在的位置：网站首页 › es5实现class继承 › ES5、ES6的四种继承方法 |
|
ES5、ES6的四种继承
众所周知，在ES6之前，前端是不存在类的语法糖，所以不能像其他语言一样，使用extends关键字就搞定继承关系，需要一些额外的方法来实现继承。 一. 原型链继承 function Parent(){ this.name = 'mortal' } Parent.prototype.getName = function(){ console.log(this.name) } function child(){ } //主要精髓所在 Child.prototype = new Parent() Child.prototype.constructor = Child let mortalChild = new Child() mortalChild.getName() //'mortal'原型链继承缺点： 1.每个实例对引用类型属性的修改都会被其他的实例共享。 function Parent(){ this.names = ['mortal','mortal1'] } function Child(){ } //主要精髓所在 Child.prototype = new Parent() Child.prototype.constructor = Child let mortalChild2 = new Child() mortalChild2.name.push('mortal2') console.log(mortalChild2.names) //['mortal','mortal1','mortal2'] let mortalChild3 = new Child() mortalChild3.name.push('mortal3') console.log(mortalChild3.names) //['mortal','mortal1','mortal2','mortal3']2.在创建Child实例的时候，无法向Parent传参。这样就会使Child实例没法自定义自己的属性(名字) 二. 借用构造函数(经典继承) function Parent(){ this.names = ['mortal','mortal1'] } function Child(){ Parent.call(this) } let mortalChild2 = new Child() mortalChild2.names.push('mortal2') console.log(mortalChild.names) //['mortal','mortal1','mortal2'] let mortalChild3 = new Child() mortalChild3.names.push('mortal3') console.log(mortalChild3.names) //['mortal','mortal1','mortal3']优点： 1.解决了每个实例对引用类型属性的修改都会被其他的实例共享的问题。 2.子类可以向父类传值。 function Parent(name){ this.name = name } function Child(name){ Parent.call(this,name) } let mortalChild = new Child('mortal') console.log(mortalChild.name) //mortal let mortal2Child = new Child('mortal2') console.log(mortal2Child.name) //mortal2缺点： 1.无法复用父类的公共函数 2.每次子类构造实例都得执行一次父类函数。 三. 原型式继承复制传入的对象到创建对象的原型上，从而实现继承 function createObj(o){ function F(){} F.prototype = o return new F() } let person = { name:'mortal' body:['foot','hand'] } let person1 = createObj(person) let person2 = createObje('person') console.log(person1) //mortal person1.body.push('head') console.log(person2) //['foot','hand','head']缺点：同原型链继承一样，每个实例对引用类型属性的修改都会被其他的实例共享。 ES6继承ES6支持通过类来实现继承，方法比较简单，代码如下： class Point{ constructor(x,y){ this.x = x this.y = y } toString(){ return this.x + '' + this.y } } class ColorPoint extends Point{ constructor(x,y,color){ super(x,y) //调用父类的constructor(x,y) this.color = color } toString(){ return this.color + ' ' + super.toString() //调用父类的toString() } } let colorPoint = new ColorPoint('1','2','red') console.log(colorPoint.toString()) //red 12 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |