JS---继承

本文探讨了JavaScript中的继承概念,如何处理构造器和原型上的重复代码,以避免冗余。通过实例展示了VIP会员与普通会员的关系,指出在VIPUser构造函数和原型中存在重复代码,并提出解决方案:修改构造函数并使用`Object.setPrototypeOf()`来设置原型链。同时,解释了继承的单根性和传递性特征。
摘要由CSDN通过智能技术生成

如视频网站有两种会员:(VIP会员是普通会员,普通会员不是VIP会员)

  • 普通会员

    • 属性:用户名、密码

    • 方法:观看免费视频

  • VIP会员

    • 属性:普通会员的所有属性、会员到期时间

    • 方法:普通会员的所有方法、观看付费视频

如果我们需要使用构造函数来创建会员,如何书写构造函数才能实现上面的需求?

// 普通会员的构造函数
function User(username, password){
  this.username = username;
  this.password = password;
}
User.prototype.playFreeVideo = function(){
  console.log('观看免费视频')
}

// VIP会员的构造函数
function VIPUser(username, password, expires){
  this.username = username;
  this.password = password;
  this.expires = expires;
}
VIPUser.prototype.playFreeVideo = function(){
  console.log('观看免费视频')
}
VIPUser.prototype.playPayVideo = function(){
  console.log('观看付费视频')
}

上面的代码出现了两处重复代码:

  1. VIPUser的构造函数中包含重复代码

    this.username = username;
    this.password = password;

    这段代码和User构造函数并没有区别,可以想象得到,将来也不会有区别,即:普通用户该有的属性,VIP用户一定有

  2. VIPUser的原型上包含了重复代码

    VIPUser.prototype.playFreeVideo = function(){
      console.log('观看免费视频')
    }

    这个方法和User上的同名方法逻辑完全一致,可以想象得到,将来也不会有区别,即:普通用户该有的方法,VIP用户一定有

处理构造器内部的重复

可以将VIPUser构造器改写为

function VIPUser(username, password, expires){
  User.call(this, username, password);
  this.expires = expires;
}

处理原型上的重复

 

即 Object.setPrototypeOf(VIPUser.prototype, User.prototype) 

 

继承是面向对象的概念,它描述了两个对象类型(类,构造函数)之间的关系

如果在逻辑上可以描述为:A不一定是B,但B一定是A,则:B继承A、A派生B、A是B的父类、B是A的子类

子类的实例应该自动拥有父类的所有成员

继承具有两个特性:

  • 单根性:子类最多只有一个父类

  • 传递性:间接父类的成员会传递到子类中

如何在JS中封装继承

function inherit(Child, Parent){
  // 在原型链上完成继承 
  Object.setPrototypeOf(Child.prototype, Parent.prototype);
}

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值