ES6之类（class）和继承

最新推荐文章于 2024-04-23 16:37:21 发布
最新推荐文章于 2024-04-23 16:37:21 发布
阅读量1k 收藏 3
点赞数 1
分类专栏： ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VVVZCS/article/details/82701117
版权

原来我们写面向对象编程，都是在通过构造函数，然后在原型上写的，比如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  Person.prototype.getName = function () {
    return this.name;
  }
  Person.prototype.getAge = function () {
    return this.age;
  }
  function Person (name, age) {
    this.name = name;
    this.age = age;
  }
  let person = new Person ('ReSword', 21);
  console.log(person.getName(), person.getAge());
</script>
</html>

当然我们也可以通过Object.assign方法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  // Person.prototype.getName = function () {
  //   return this.name;
  // }
  // Person.prototype.getAge = function () {
  //   return this.age;
  // }
  Object.assign(Person.prototype, {
    getName () {
      return this.name;
    },
    getAge () {
      return this.age;
    }
  });
  function Person (name, age) {
    this.name = name;
    this.age = age;
  }
  let person = new Person ('ReSword', 21);
  console.log(person.getName(), person.getAge());
</script>
</html>

这样也是可以的

接下里介绍ES6中新增的class方法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  class Person {
    constructor (name, age) { //构造方法（函数），调用new，自动执行
      console.log(name, age);
    }
  }

  let person = new Person('ReSword', 21);
</script>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  class Person {
    constructor (name, age) { //构造方法（函数），调用new，自动执行
      this.name = name;
      this.age = age;
    }
    getName () {
      return this.name;
    }
    getAge () {
      return this.age;
    }
  }
  console.log(typeof(Person));
  let person = new Person('ReSword', 21);
  console.log(person.getName(), person.getAge());
</script>
</html>

上面的Person使用的函数声明的方式，也可以是使用函数变量的方式来使用calss

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  const Person = class {
    constructor (name, age) { //构造方法（函数），调用new，自动执行
      this.name = name;
      this.age = age;
    }
    getName () {
      return this.name;
    }
    getAge () {
      return this.age;
    }
  }
  console.log(typeof(Person));
  let person = new Person('ReSword', 21);
  console.log(person.getName(), person.getAge());
</script>
</html>

这种方式也是可以的

--------------------------------------------------------------------------------------------

下面说明class中的方法名可以使用变量来代替

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  let AAA = 'BBB';
  const Person = class {
    constructor (name, age) { //构造方法（函数），调用new，自动执行
      this.name = name;
      this.age = age;
    }
    getName () {
      return this.name;
    }
    getAge () {
      return this.age;
    }
    AAA () {
      return 'AAA-function';
    }
  }
  let person = new Person('ReSword', 21);
  console.log(person.AAA());
</script>
</html>

这样子我们去访问AAA 是有这函数的

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  let AAA = 'BBB';
  const Person = class {
    constructor (name, age) { //构造方法（函数），调用new，自动执行
      this.name = name;
      this.age = age;
    }
    getName () {
      return this.name;
    }
    getAge () {
      return this.age;
    }
    [AAA]() {
      return 'AAA-function';
    }
  }
  let person = new Person('ReSword', 21);
  console.log(person.BBB());
</script>
</html>

在我们加了 [] 之后，再去看

他会提示你AAA不是一个函数

我们去Person.prototype中查看

所以我们改成BBB

在我们改成BBB之后，

就可以运行到函数了

这其实就是JS的基础，我们知道后缀点和方括号都可以调用属性，但是后缀点是不能跟变量的，但是方括号可以

--------------------------------------------------------------------------------------------

还有就是class没有预解析，即下面这种写法是错误的

-------------------------------------------------------------------------------------

下面说明class中this指向的问题

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  class Person {
    constructor (name, age) {
      this.name = name;
      this.age = age;
    }
    getName () {
      console.log('this: ', this);
      return this.name;
    }
  }
  let person = new Person ('ReSword', 21);
  let {getName} = person;
  console.log(getName());
</script>
</html>

这里是因为你将Person中方法提取了出来，那么这里的this就会指向运行环境，所以造成运行失败

解决方法1：

调用bind方法，将getName绑定到对象上

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  class Person {
    constructor (name, age) {
      this.name = name;
      this.age = age;
      this.getName = this.getName.bind(this);
    }
    getName () {
      console.log('this: ', this);
      return this.name;
    }
  }
  let person = new Person ('ReSword', 21);
  let {getName} = person;
  console.log(getName());
</script>
</html>

解决方法2：

使用箭头函数

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  class Person {
    constructor (name, age) {
      this.name = name;
      this.age = age;
      this.getName = () => {
        console.log('this: ', this);
        return this.name;
      }
    }
  }
  let person = new Person ('ReSword', 21);
  let {getName} = person;
  console.log(getName());
</script>
</html>

------------------------------------------------------------------------------------------------

class里面还新增了两个函数getter和setter

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  class Person {
    constructor (name, age) {
      this.name = name;
      this.age = age;
    }
    get work () {
      return 'gettter'
    }
    set work (value) {
      console.log('setter: ' + value);
    }
  }
  let person = new Person ('ReSword', 21);
  person.work = 'student';//调用set
  console.log(person.work);//调用get
</script>
</html>

get和set一般用于封装底层框架

-------------------------------------------------------------------------------------------------

class里的静态方法：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  class Person {
    constructor (name, age) {
      this.name = name;
      this.age = age;
    }
    static fun () {
      return 'this is a static function';
    }
  }
  console.log(Person.fun());
</script>
</html>

----------------------------------------------------------------------------------------------

class里面的继承

我们先来看原JS的继承方法（即原型链）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  Person.prototype.getName = function () {
    return this.name;
  }
  function Person (name, work) {
    this.name = name;
    this.work = work;
  }
  Student.prototype = new Person ();//继承方法
  function Student (name, work, grade) {
    Person.call(this, name, work);//继承属性
    this.grade = grade;
  }
  let student = new Student ('ReSword', 'Student', 'Junior');
  console.log(student.work);
  console.log(student.getName());
</script>
</html>

再来看class通过extends关键字的继承

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  class Person {
    constructor (name, work) {
      this.name = name;
      this.work = work;
    }
    getName () {
      return this.name;
    }
  }
  class Student extends Person {
    constructor (name, work, grade) {
      super(name, work);
      this.grade = grade;
    }
  }
  let student = new Student('ReSword', 'Student', 'Junior');
  console.log(student.work);
  console.log(student.getName());
</script>
</html>

注意点：

1，

等同于

2，必须要在super之后才能使用this，这是因为子类的创建是基于父类的，只有super方法才能调用父类实例

3，父类的静态方法也会被子类所继承

上面只是父类的属性调用，下面是讲父类的方法调用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="">
</head>
<body>
</body>
<script>
  class Person {
    constructor (name, work) {
      this.name = name;
      this.work = work;
    }
    getName () {
      return `This is father's function ${this.name}`;
    }
  }
  class Student extends Person {
    constructor (name, work, grade) {
      super(name, work);
      this.grade = grade;
    }
    getName () {
      console.log(super.getName());
      return `This is son's function ${this.name}`;
    }
  }
  let student = new Student('ReSword', 'Student', 'Junior');
  console.log(student.work);
  console.log(student.getName());
</script>
</html>

注意点：

如果直接在子类中写和父类相同名字函数，那么其实际上只会执行子类的函数，

如果想要执行父类的函数，请使用super

VVVGG
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
es6 class类继承（extends、super）
A20201130的博客
03-21 965
Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。 1.extends继承，用于类中的定义 2.super①当成函数使用，表示父类的构造器 ②当成对象使用，则表示为父类的原型 它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。 实例： // ES6 class继承 // extends 继承，用于类中的定义 // super 1...
ES6——class类实现继承
热门推荐
qq_49002903的博客
08-01 3万+
上面示例代码中子类中有两句重复的逻辑语句，在父类中我们已经声明过了，在子类中再写一次就冗余了，让我们接下来看看有没有什么好的解决办法。这就是上面的代码冗余的问题解决办法可以将name和age写到super参数中就可以直接继承父类的逻辑，减少冗余代码。注意在子类（派生类）的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数！子类继承父类之后，子类中也可以直接调用父类的方法（最上方示例代码中有涉及这里就不再做展示了）。中，以创建一个类，该类是另一个类的子类。...
ES6学习（八）：Class的继承
激洪的博客
04-17 1939
ES6之Class的继承
javascript（第三篇）原型、原型链、继承问题，使用 es5、es6实现继承，一网打尽所有面试题
最新发布
qq_17335549的博客
04-23 1906
总之关于原型这块记住三句话对象有一个内置属性 [[Prototype]]，使用 Object.getPrototypeOf(obj) 获取函数有一个公开可访问不可枚举属性 prototype函数的 prototype 属性有一个公开可访问的不可枚举属性 constructor，指向函数本身使用原型继承，是 es5 中实现继承的必须要学会的，同时还要记住原型继承存在的问题！这个时候就有一个新的问题了，就是如何使用 es5 中的知识解决这些问题。答案是将四种继承方式组合起来，取各自的优点。
JavaScript:ES6中类与继承
weixin_42132860的博客
08-07 847
此外，ES6的类还支持静态方法、getter和setter方法等高级特性，让我们更加灵活地进行编程。在JavaScript编程中，ES6引入了一种更现代、更清晰的方式来定义对象和实现继承，那就是通过类和继承机制。继承是面向对象编程中的重要概念，它允许我们创建一个新的类，基于现有类的属性和方法，并可以添加自己的属性和方法。ES6中的类与继承为JavaScript的面向对象编程带来了更清晰、更现代的语法。方法来定义，而其他方法则可以直接在类的内部定义。在上面的示例中，我们定义了一个名为Animal。
ES6中的class与继承
2301_77456141的博客
10-03 35
传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，独树一帜也可以说难以接受！
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
08-30
在ES6中，类（Class）和继承（Extends）是两种重要的新特性，它们引入了更接近传统面向对象编程的语法，使JavaScript在表达对象和类的关系时更加清晰。 一、类（Class） 1. **基本语法**： 在ES5中，我们通常使用...
ES6入门教程之Class和Module详解
08-30
ES6中的Class和Module详解 ES6中引入了Class和Module两个概念，分别解决了对象模板和模块化的问题。本篇文章将详细介绍Class和Module的相关知识点，供大家参考学习。 一、Class Class是ES6中引入的一个概念，作为...
es6新特性之 class 基本用法解析
08-27
"ES6 新特性之 Class 基本用法解析" ES6 中引入的 Class 语法是 JavaScript 中的一种新的编程方式，提供了更接近传统语言的写法，引入了类（Class）这个概念，作为对象的模板。下面是 ES6 中 Class 的基本用法解析...
原生JavaScript之es6中Class的用法分析
10-15
在JavaScript的ES6标准中，引入了一种新的语法特性——Class，这使得JavaScript的面向对象编程变得更加简洁和直观。Class的出现是对ES5中基于原型的面向对象编程方式的一个补充，提供了一种更加接近传统面向类的语言...
ES6 Class（类）的继承extends
u010234868的专栏
10-15 378
ES6 Class（类）的继承通过extends关键字实现。在子类的方法中通过super关键字调用父类的方法。 class Person { constructor(name) { this.name = name; } sayHi() { console.log(`This is ${this.name}`); } } class Student extends Person { constructor(name, number) { super(name.
JS面向对象编程——ES6 中class的继承用法详解
10-15
主要介绍了JS面向对象编程——ES6 中class的继承用法,结合实例形式详细分析了ES6中class继承的相关操作技巧与使用注意事项,需要的朋友可以参考下
ES6 class类以及继承
weixin_41436338的博客
04-05 1075
class类在ES6 中引入了class类这个概念，那么这个class究竟是什么怎么用呢？可能对于初学者的我们来说，有时候说多了反而不理解，我举了个例子，如下：经常听到老师们会说构造函数的首字母要大写，普通函数不用大写，这个只是大家方便区别构造函数和函数。然后到了ES6我们的构造函数就可以写成class了，也是引入了其他语言的类概念。下面这个例子就是一个简单的构造函数，但是函数和构造函数单从表现来...
es6 类 和 继承
weixin_41154070的博客
03-04 484
只使用 ECMAScript 5 的特性来模拟类似于类的行为。各种策略都有自己的问题，也有相应的妥协。正因为如此，实现继承的代码也显得非常冗长和混乱。 为解决这些问题，ECMAScript 6 新引入的 class 关键字具有正式定义类的能力。类是 ECMAScript 中新的基础性语法糖结构，背后使用的仍然是原型和构造函数的概念。 1.类的定义 和 构成 与函数类型相似，定义类也有两种方式：类声明 和 类表达式。 // class 声明 class Person{} //类表达式 let Person =
ES6 之 class 继承
xixi
03-12 2554
1、简介 Class 可以通过 extends 关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。 // 通过 extends 关键字继承了 Point 类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个 Point 类 class Point { } class ColorPoint extends Point { } // co...
JS中Class类的继承
关注最新技术问题并持续维护更新
04-25 5103
Class继承     Class 可以通过 extends 关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多 class Animate { constructor() { // 默认返回实例对象 this } } class Dog extends Animate { constructor() { super() } }     子...
ES6中的类与继承
m0_59761769的博客
04-14 418
类：定义一个类通过class关键字，ES6的类可以看成是构造函数的另一种写法。 class Animal{ constructor(name ,age,weight){ // 实例的私有属性 this.name=name; this.age=age; this.weight=weight; console.log("我是父构造器"); } // 写在外面的属性 也是实例的私有属性 test=[
es6中class继承的坑
kellywong的博客
11-23 1492
1. es6继承的过程 ES6 的继承机制和ES5完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。 2. super关键字 super作为函数调用时，代表父类...
ES6系列教程第六篇--Class继承
恰恰虎的博客
06-18 4617
一、extends关键字ES6中提供了extends关键字实现类的继承，相比较ES5的原型继承，更方便易懂，对于学过java的道友们来说，阅读无障碍，下面我们看下如果实现继承。class Person { constructor(name, age) { this.name = name; this.age = age; ...
ES6 class解决什么问题
05-23
2. 易于继承和扩展：ES6 class中的继承和扩展更加方便，开发者可以使用extends关键字轻松地继承和扩展现有的类。 3. 支持super关键字：ES6 class支持super关键字，可以在子类中调用父类的构造函数和方法。 4. 更加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值