首页 > 编程语言 >JavaScript是怎样实现继承的?

JavaScript是怎样实现继承的?

时间:2023-01-16 02:11:06浏览次数:38  
标签:name 继承 age JavaScript Animal 父类 怎样 属性

一、是什么

继承(inheritance)是面向对象软件技术当中的一个概念。

如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超类”

  • 继承的优点

继承可以使得子类具有父类别的各种属性和方法,而不需要再次编写相同的代码

在子类别继承父类别的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类别的原有属性和方法,使其获得与父类别不同的功能

虽然JavaScript并不是真正的面向对象语言,但它天生的灵活性,使应用场景更加丰富

关于继承,我们举个形象的例子:

定义一个类(Class)叫汽车,汽车的属性包括颜色、轮胎、品牌、速度、排气量等

class Car{
    constructor(color,speed){
        this.color = color
        this.speed = speed
        // ...
    }
}

由汽车这个类可以派生出“轿车”和“货车”两个类,在汽车的基础属性上,为轿车添加一个后备厢、给货车添加一个大货箱

// 货车
class Truck extends Car{
    constructor(color,speed){
        super(color,speed)
        this.Container = true // 货箱
    }
}

这样轿车和货车就是不一样的,但是二者都属于汽车这个类,汽车、轿车继承了汽车的属性,而不需要再次在“轿车”中定义汽车已经有的属性

在“轿车”继承“汽车”的同时,也可以重新定义汽车的某些属性,并重写或覆盖某些属性和方法,使其获得与“汽车”这个父类不同的属性和方法

class Truck extends Car{
    constructor(color,speed){
        super(color,speed)
        this.color = "black" //覆盖
        this.Container = true // 货箱
    }
}

从这个例子中就能详细说明汽车、轿车以及卡车之间的继承关系

二、实现方式

JavaScript常见的继承方式:

  • 原型链继承

  • 借用继承(call继承,构造继承)
  • 组合继承

  • 类的继承

原型链继承

特点: 子类利用原型来将父类里面的属性和方法继承一份,给子类来进行使用 优点: 可以将父类里面的属性和方法给继承一份下来,提供给子类来进行使用 缺点: 子类没有自己的原型,用的原型父类的原型的
//定义一个动物的构造函数
function Animal(name,age){            
    //属性
    this.name = name;
    this.age = age;
}
//方法
Animal.prototype.eat = function(){
    console.log(this.name + "吃");
}

//创建一个父类
// const a = new Animal("动动",18)
// console.log(a);

//定义一个狗的构造函数
function Dog(){}
// 原型继承 将父类里面的复制一份,交给子类的原型里面来进行使用
Dog.prototype = new Animal()
// const d = new Dog("阿黄",3);//自身是没有的
const d = new Dog();//自身是没有的

//属性
d.name = "阿黄";
d.age = 3;
console.log(d);
//调用吃的方法
d.eat();

借用继承(call继承,构造继承)

特点: 将父类的构造函数当做普通函数来进行执行,使用call改变this的指向 优点: 可以将父类里面的属性继承一份,变成自己自己身上的属性 缺点: 不能继承父类里面的方法

案例:

//定义一个动物的构造函数
function Animal(name,age){            
    //属性
    this.name = name;
    this.age = age;
}
//方法
Animal.prototype.eat = function(){
    console.log(this.name + "吃");
}

//将父类的构造函数当中普通函数来进行调用
// Animal("张三",18)

//子类
function Dog(...arg){
    // 将父类的构造函数当中普通函数来进行调用,使用call改变this的指向
    Animal.call(this,...arg)
}

const d = new Dog("张三",18)
console.log(d);

组合继承

特点: 组合继承 = 原型继承 + 借用继承(call继承,构造继承) 优点: 可以继承属性,又可以继承方法 缺点: 在原型当中多了一套属性 案例:
//定义一个动物的构造函数
function Animal(name,age){            
    //属性
    this.name = name;
    this.age = age;
}
//方法
Animal.prototype.eat = function(){
    console.log(this.name + "吃");
}

//组合继承
function Dog(...arg){
    //借用继承
    Animal.call(this,...arg)
}
//原型继承
Dog.prototype = new Animal()


const d = new Dog("阿黄",3)
console.log(d);
d.eat();

类的继承

类的继承的关键字 extends     语法:         子类 extends 父类
    constructor这个属性是可以不写,如果我们不写,我就默认存在
    super => 超级
    父类也叫超类
class Father{
//属性 => constructor 里面
constructor(name,age){
    this.name = name;
    this.age = age;
}
//方法
eat(){
    console.log(this.name + '吃');
}
}

class Son extends Father{
//子类的构造器
//如果我们写了,就会把默认的构造器给覆盖掉了
constructor(...rest){
    super(...rest)
}
}
//创建一个儿子的实例对象
const s = new Son("张三",18);
console.log(s);
s.eat();

 

   

标签:name,继承,age,JavaScript,Animal,父类,怎样,属性
From: https://www.cnblogs.com/chccee/p/17054578.html

相关文章

  • JavaScript学习笔记—window对象
    window对象浏览器为我们提供了一个window对象,可以直接访问window对象代表的是浏览器窗口,通过该对象可以对浏览器窗口进行各种操作,除此之外window对象还负责存储JS中的内......
  • JavaScript学习笔记
     JavaScript学习笔记概念脚本语言:一行一行的翻译成机器语言,并一行一行的执行;而不是全部编译执行; 作用表单动态校验、网页特效、服务端开发Node.js、桌......
  • JavaScript学习笔记—全局和局部作用域
    作用域(scope)指的是一个变量的可见区域全局作用域在网页运行时创建,在网页关闭时消耗所有直接编写到script标签中的代码都位于全局作用域中变量是全局变量,可以在任意......
  • JavaScript学习笔记—函数
    1.语法function函数名(){语句......}2.定义和调用函数-语法:函数名()使用typeof检查函数对象时返回function定义方式(1)函数声明(2)函数表达式(3)箭头函数//......
  • JavaScript原型和原型链?有什么特点?
    一、原型JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的......
  • JavaScript – Temporal API & Date
    前言TemporalAPI是JS的新东西,用来取代Date.虽然现在(15-01-2023)没有任何游览器支持.但它已经是stage3了.而且有完整的polyfill,所以还是非常推荐大家积......
  • Javascript脚本运算符执行顺序对照表
    Javascript脚本运算符执行顺序对照表:在线查看Javascript脚本运算符执行优先级别 ​​窍门:Ctrl+F快速查找​​Javascript脚本运算符优先级,是描述在计算机计算表达式时执行......
  • Javascript事件与功能说明大全
    Javascript事件与功能说明大全 ​​窍门:Ctrl+F快速查找​​总结了Javascript常用的各种事件,包括鼠标事件、加载事件、滚动事件、表单事件、编辑事件、数据绑定事件等下表......
  • JavaScript while 语句
    while语句可以在某个条件表达式为真的前提下,循环执行指定的一段代码,直到那个表达式不为真时结束循环。——MDNwhile语句也是一种循环语句,也称while循环。while循环接......
  • JavaScript 中搜索数组元素的四种方法
    在实际开发当中,我们经常会遇到类似诸如下面的需求:获取满足特定条件的数组中的所有项目要检查是否满足条件?检查数组中是否有特定值?在数组中找到指定值的索引?在本文中,我们将讨......