前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Js如何模拟继承机制分别使用Es5和Es6来实现

Js如何模拟继承机制分别使用Es5和Es6来实现

作者头像
itclanCoder
发布2023-02-26 14:58:24
5440
发布2023-02-26 14:58:24
举报
文章被收录于专栏:itclanCoderitclanCoder

前言

继承是面向对象的特点,那么Js也可以借助prototype来模拟继承机制,以下分别使用Es5和Es6来实现继承

实现继承的目的是,实现代码的复用

1

Es5实现继承

如下是示例代码

代码语言:javascript
复制
// 用function模拟一个类出来,同时也作为构造函数
function Animal(name,age) {
    this.name = name; // name
    this.age = age; // 变量age
}

Dog.prototype = new Animal(); // 把animal的所有属性和函数都继承
Dog.prototype.constructor = Dog; // 将子类型原型的构造属性设置为子类型,修正指针对象,因为原型链继承多个实例的引用类型属性指向相同,一个实例修改了原型属性,另一个实例的原型属性也会被修改
Dog.prototype.outMsg = function() { // 重载outMsg函数
    // 实现一个outMsg方法
    alert(`我的名字是,${this.name},我的年龄是${this.age}`);
}
var dog = new Dog('小黑',4); // 新建一个Dog对象
dog.outMsg(); // 调用dog的outMsg()函数

以上就是使用Es5,通过原型prototype实现的继承

2

Es6实现继承

代码语言:javascript
复制
class Animal {
  constructor(name,age) {
      this.name = name;
      this.age = age;
  }

  outMsg() {
      alert(`我的名字是,${this.name},我的年龄是${this.age}`);
  }
}

let dog1 = new Animal("tom",4);
dog1.outMsg();


class Dog extends Animal {
  constructor(name,age) {
      super(name,age);
  }
}

let dog2 = new Dog("小黑",6);
dog2.outMsg();

在Es6中,引入了class类的概念,有一个默认的属性方法,constructor,该方法是类的构造函数,在我们通过new创建该类的实例时,会自动调用constructor函数

调用super()标识父类的构造函数,如果你写过React类组件,那对这个super会比较熟悉,接收父组件传递过来的属性,super(props)的

Es6中的类主要是解决Es5中麻烦的this以及constructor指向的改动

在Es6中直接使用extends和super()就能解决

分析

在最上面的用Es5继承方式中,先是定义了一个Animal类,然后又定义了一个Dog类,Dog的prototype完全使用Animal内部的属性和函数

这样Dog就继承了Animal所有的属性和函数,所以,在Dog类的构造函数里,可以访问和修改在Animal中定义的姓名和年龄

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2023-01-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 itclanCoder 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档