JavaScript中的继承(3)

1.uber-子对象访问父对象的方式

在一般的面向对象语言中,通常都会提供一种用于子类访问父类的特殊语法,因为我们在实现子类方法时往往要父类方法的额外辅助。在这种情况下,子类通常就要去调用父类中的同名方法,以便最终完成工作。
JS中虽然没有这种语法,但是可以实现类似功能。
接下来,在之前构建的继承关系中引入一个uber属性,并令其指向父级原型对象。

function Shape(){}
//    augment prototype
Shape.prototype.name = 'shape';
Shape.prototype.toString = function () {
    var cst = this.constructor;
    return cst.uber
        ? this.cst.uber.toString() + ', ' + this.name
        : this.name;
};

function TwoDShape(){}
//take care of inheritance
var F = function(){};
F.prototype = Shape.prototype;
TwoDShape.prototype =new F();
TwoDShape.prototype.constructor = TwoDShape;
TwoDShape.uber = Shape.prototype;
//augment prototype
TwoDShape.prototype.name = '2D shape';

function Triangle(side, height){
    this.side = side;
    this.height = height;
}

//take care of inheritance
var F = function() {};
F.prototype = TwoDShape.prototype;
Triangle.prototype = new F();
Triangle.prototype.constructor = Triangle;
Triangle.prototype.constructor = TwoDShape.prototype;
//augment prototype
Triangle.prototype.name = 'Triangle'
Triangle.prototype.getArea = function () {
    return this.side * this.height / 2;
}


对于这段代码,新增的部分有:

  • 将uner属性设置成指向其父级原型的引用
  • 对toString()方法进行了更新
    在此之前,toString所做的仅仅是返回this.name的内容而已。现在为其新增了一项额外任务,即检查对象中是否存在this.constructor.uber属性,如果存在,就先调用该属性的toString方法。由于this.constructor本身是一个函数,而this.constructor.uber是指向当前对象父级原型的引用。所以当我们调用Triangle实体的toString方法时,其原型链上所有的toString都会被调用。

2.将继承部分封装成函数

下面,将之前的实现继承关系的代码提炼出来,并封装进一个名字叫做extend的方法中:

function extend(Child, Parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype= new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;
}

//实现继承

extend(TwoDShape, Shape);
extend(Triangle, TwoDShape);

下面看一个完整的例子:

function extend(Child, Parent){
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype= new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;
}

//实现继承

function Shape(){};
Shape.prototype.name = 'Shape';
Shape.prototype.toString = function(){
    return this.constructor.uber ?
        this.constructor.uber.toString() + ', '+ this.name
        : this.name;
};

function TwoDShape() {};
extend(TwoDShape, Shape);
TwoDShape.prototype.name = '2D Shape';


function Triangle(side,height) {
    this.side = side;
    this.height = height;
}

extend(Triangle, TwoDShape);

Triangle.prototype.name = 'Triangle';
Triangle.prototype.getArea= function () {
    return this.side * this.height / 2;
};

3.属性拷贝

在构建可重用的继承代码时,我们也可以简单的将父对象的属性拷贝给子对象,参照之前的extend()接口,我们可以创建一个extend2()函数,该函数也可以接收两个构造器函数为参数,并将Parent的原型的所有属性全部拷贝给Child的原型,其中包括方法。因为方法也是一种函数类型的属性。

function extend2(Child, Parent){
    var p = Parent.prototype;
    var c = Child.prototype;
    for (var i in p){
        c[i] = p[i];
    }
    c.uber = p;
}

如此,通过一个简单的循环遍历了函数所接受的所有属性。在之前的示例中,如果子对象主要访问父对象的方法,可以通过设置uber属性来实现。而这里的情况与之前有所不同,由于我们已经完成了对Child原型进行扩展,不需要再去重置Child.prototype.constructor属性,因为它不会再被完全覆盖了,因此在这里,constructor属性所指向的值是正确的。
这种方法只适用于包含基本类型的对象,所有的对象类型(函数与数组)都是不可复制的,因为那他们只支持引用传递。

下面有两个构造器函数Shape()和TwoDShape()。其中,Shape()的原型中包含了一个基本类型属性name,和一个非基本类型属性toString方法:

var Shape = function(){};
var TwoDShape = function(){};
Shape.prototype.name = 'shape';
Shape.prototype.toString = function(){
    return  this.uber
    ? this.uber.toString() + ', ' + this.name
        : this.name;
    
};

如果通过extend()方法来实现继承,name属性既不会是TwoDShape()示例的属性,也不会成为其原型对象的属性,但是子对象依然可以通过继承方式来访问属性。

如果继承是通过extend2来实现的,TwoDShape的原型中就会拷贝获得属于自己的name属性。同样,其中也会拷贝属于自己的toString方法,但这只是已和函数引用,函数本身并没有再次被创建。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 继承是一个非常常见的概念。ES6 引入了 Class 语法糖,让继承更加易于理解和实现。在 Class ,我们可以使用 extends 关键字来创建一个子类,使其继承父类的属性和方法。 下面我们来详细了解一下如何在 JavaScript 使用 extends 实现继承。 ### 基础语法 首先,我们需要定义一个父类。在 ES6 ,我们可以使用 Class 来定义一个类。例如: ```javascript class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + ' makes a noise.'); } } ``` 这个 Animal 类有一个构造函数和一个 speak 方法。构造函数会在创建实例时被调用,而 speak 方法则可以让动物发出一些声音。 接下来,我们来创建一个子类。使用 extends 关键字来创建子类,并使用 super() 方法调用父类的构造函数。例如: ```javascript class Dog extends Animal { constructor(name) { super(name); } speak() { console.log(this.name + ' barks.'); } } ``` 这个 Dog 类继承了 Animal 类,并覆盖了其 speak 方法。在构造函数,我们通过 super() 方法来调用父类的构造函数,并将传递的参数传递给它。 现在,我们可以创建一个 Dog 的实例,并调用其 speak 方法: ```javascript let d = new Dog('Mitzie'); d.speak(); // Mitzie barks. ``` ### 继承父类的方法 当一个子类继承了一个父类时,它会继承父类的属性和方法。例如,在上面的例子,Dog 类继承了 Animal 类,因此它继承了 Animal 类的 speak 方法。 当我们调用子类的方法时,如果子类没有实现该方法,它会自动调用父类的方法。例如,在上面的例子,如果我们不覆盖 Dog 类的 speak 方法,它将调用 Animal 类的 speak 方法。 ### 覆盖父类的方法 如果一个子类需要覆盖父类的方法,我们可以在子类重新定义该方法。例如,在 Dog 类,我们覆盖了 Animal 类的 speak 方法,使其输出“barks”而不是“makes a noise”。 ### 调用父类的方法 有时候,我们需要在子类调用父类的方法。我们可以使用 super 关键字来调用父类的方法。例如,在 Dog 类,我们可以通过调用 super.speak() 来调用 Animal 类的 speak 方法。 ### 总结 继承是一个非常常见的概念,也是面向对象编程的重要概念之一。在 JavaScript ,我们可以使用 extends 关键字来实现继承。通过继承,子类可以继承父类的属性和方法,也可以覆盖父类的方法,并且可以调用父类的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值