码迷,mamicode.com
首页 > 其他好文 > 详细

ES6里关于类的拓展(二):继承与派生类

时间:2017-12-08 00:05:16      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:一个   定义类   指定   标识符   传递   square   cto   new   参数   

继承与派生类

  在ES6之前,实现继承与自定义类型是一个不小的工作。严格意义上的继承需要多个步骤实现

function Rectangle(length, width) {
    this.length = length;
    this.width = width;
}
Rectangle.prototype.getArea = function() {
    return this.length * this.width;
};
function Square(length) {
    Rectangle.call(this, length, length);
}
Square.prototype = Object.create(Rectangle.prototype, {
    constructor: {
        value:Square,
        enumerable: true,
        writable: true,
        configurable: true
    }
});
var square = new Square(3);
console.log(square.getArea()); // 9
console.log(square instanceof Square); // true
console.log(square instanceof Rectangle); // true

  Square继承自Rectangle,为了这样做,必须用一个创建自Rectangle.prototype的新对象重写Square.prototype并调用Rectangle.call()方法。JS新手经常对这些步骤感到困惑,即使是经验丰富的开发者也常在这里出错

  类的出现让我们可以更轻松地实现继承功能,使用熟悉的extends关键字可以指定类继承的函数。原型会自动调整,通过调用super()方法即可访问基类的构造函数

class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
    getArea() {
        return this.length * this.width;
    }
}
class Square extends Rectangle {
    constructor(length) {
        // 与 Rectangle.call(this, length, length) 相同
        super(length, length);
    }
}
var square = new Square(3);
console.log(square.getArea()); // 9
console.log(square instanceof Square); // true
console.log(square instanceof Rectangle); // true

  这一次,square类通过extends关键字继承Rectangle类,在square构造函数中通过super()调用Rectangle构造函数并传入相应参数。请注意,与ES5版本代码不同的是,标识符Rectangle只用于类声明(extends之后)

  继承自其他类的类被称作派生类,如果在派生类中指定了构造函数则必须要调用super(),如果不这样做程序就会报错。如果选择不使用构造函数,则当创建新的类实例时会自动调用super()并传入所有参数

class Square extends Rectangle {
    // 没有构造器
}
// 等价于:
class Square extends Rectangle {
    constructor(...args) {
        super(...args);
    }
}

  示例中的第二个类是所有派生类的等效默认构造函数,所有参数按顺序被传递给基类的构造函数。这里展示的功能不太正确,因为square的构造函数只需要一个参数,所以最好手动定义构造函数

 

ES6里关于类的拓展(二):继承与派生类

标签:一个   定义类   指定   标识符   传递   square   cto   new   参数   

原文地址:http://www.cnblogs.com/goloving/p/8001438.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!