实例:借用构造函数继承及问题

实现原理:

在子类的构造函数内部,借用call() 或者 apply() 方法,调用超类型的构造函数

优点:

相比于原型链继承而言,借用构造函数有一个很大的优势,就是子类型函数构造函数可以向超类型构造函数传递参数。

缺点:

方法都在构造函数内部定义,因此函数的复用性就无从谈起了。

基本思想:

借用构造函数的基本思想就是利用call 或者 apply 把父类中通过 this 指定的属性和方法复制(借用)到子类创建的实例中。因为this 对象是在运行时基于函数的执行环境绑定的。也就是说,this等于window,而当函数被作为 某个对象的方法调用时,this 等于那个对象。call、apply方法可以用来代替另一个对象调用一个方法。call、apply方法可将一个函数的对象上下文从初始的上下文改变为 thisObj 指定的新对象。

实例展示:

function Animal(speices){
    this.speices = speices;
}

function Dog(speices){
    Animal.call(this,speices); //dog拥有了animal中的属性speices
}

var dog1 = new Dog("中华田园犬");
var dog2 = new Dog("德国牧羊犬");
console.dir(dog1);
console.dir(dog2);

控制台显示(子类型构造函数可以向超类型构造函数中传递参数了):

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DjFH25VM-1604910898406)(C:\Users\yingl\AppData\Roaming\Typora\typora-user-images\image-20201109104304257.png)]

存在的问题:

1):在借用构造函数实现继承这一模式下,方法都在构造函数中定义,因此就不存在函数的复用了

2):父类在原型中定义的方法,对子类不可见的

解决之道:

举例说明:

function Animal(speices){
    this.speices = speices;
    //方法都在构造函数中定义,因此函数复用就无从谈起了
    this.write = function(){
        console.log(speices + "呜哈哈");
    }
}
//在超类型的原型中定义的方法,对子类型而言也是不可见的
Animal.prototype.say = function(){
    console.log("我好饿!");
}

function Dog(speices){
    Animal.call(this,speices);
}

var dog1 = new Dog("中华田园犬");
var dog2 = new Dog("德国牧羊犬");
dog1.write();//中华田园犬呜哈哈
dog2.write();//德国牧羊犬呜哈哈

dog1.say();//借用构造函数.html:65 Uncaught TypeError: dog1.say is not a function
dog2.say();

控制台输出:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gZG32UPU-1604910898409)(C:\Users\yingl\AppData\Roaming\Typora\typora-user-images\image-20201109105654853.png)]

ion
dog2.say();


 控制台输出:

[外链图片转存中...(img-gZG32UPU-1604910898409)]

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值