ES6——class类实现继承

Posted 2023-03-30 不苒

赶快悄悄的努力起来吧，不苒在这里衷心祝愿各位大佬都能顺利通过面试。
面试专栏分享，感觉有用的小伙伴可以点个订阅，不定时更新相关面试题：面试专栏 。

🍘正文

1.实现类的继承

在ES6 中新增了 extends关键字，用于实现类的继承。

MDN中对 extends关键字的解释是这么说的：

**定义：****extends**关键字用于类声明或者类表达式中，以创建一个类，该类是另一个类的子类。

语法：

class ChildClass extends ParentClass  ... 

描述： extends关键字用来创建一个普通类或者内建对象的子类。

接下里展示一段示例代码展示一下ES6中 extends关键字实现的继承：

// 父类名字Parent
class Parent 
    constructor(name, age) 
        this.name = name
        this.age = age
    

    running () 
        console.log(this.name + ' 在跑步~')
    


// 使用关键字创建子类Son继承父类
class Son extends Parent 
   

const P1 = new Son('Jee', 20)
console.log(P1) // Son  name: 'Jee', age: 20 
P1.running() // Jee 在跑步~

只需要一个extends 关键字即可轻松实现继承父类中的constructor属性

2. Super关键字

注意：在子类（派生类）的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数！

super的使用位置有三个：

1. 子类的构造函数
2. 实例方法
3. 静态方法

2.1：Super关键字使用方法一：

在子类（派生类）的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数,否则会报错。

比如：Son类中constructor属性中没有去掉super方法就会报错。

如下展示正确的使用方法一：

// 父类名字Parent
class Parent 
    constructor(name, age) 
        this.name = name
        this.age = age
    

    running () 
        console.log(this.name + ' 在跑步~')
    


class Son extends Parent 
    constructor(name, age, height) 
        super()
        this.name = name
        this.age = age
        this.height = height
    

const P1 = new Son('Jee', 20, '1.80')
console.log(P1) // Son  name: 'Jee', age: 20, height: '1.80' 

上面示例代码中子类中有两句重复的逻辑语句，在父类中我们已经声明过了，在子类中再写一次就冗余了，让我们接下来看看有没有什么好的解决办法。

2.2：Super关键字使用方法二：

class Son extends Parent 
    constructor(name, age, height) 
        super(name,age)
        // this.name = name
        // this.age = age
        this.height = height
    

这就是上面的代码冗余的问题解决办法：可以将name和age写到super参数中就可以直接继承父类的逻辑，减少冗余代码。

3.重写父类方法

子类继承父类之后，子类中也可以直接调用父类的方法（最上方示例代码中有涉及这里就不再做展示了）。

但是在很多情况下，父类中的方法是达不到子类的要求的，那么子类就可以有一下两个操作：

3.1：重写父类方法

class Parent 
    constructor(name, age) 
        this.name = name
        this.age = age
    

    running () 
        console.log(this.name + ' 在跑步~')
    



class Son extends Parent 
    constructor(name, age, height) 
        super(name, age)
        this.height = height
    
    // 重写父类方法
    running () 
        console.log('我看见' + this.name + '在跑步~')
    


const P1 = new Son('Jee', 20, '1.80')
console.log(P1)
P1.running()

3.2：新增方法，并在新增方法中调用父类方法内容

class Parent 
    constructor(name, age) 
        this.name = name
        this.age = age
    

    parentMethod () 
        console.log('处理逻辑一')
        console.log('处理逻辑二')
        console.log('处理逻辑三')
    


class Son extends Parent 
    constructor(name, age, height) 
        super(name, age)
        this.height = height
    
    sonMethod () 
        // 调用父类的方法供子类使用
        super.running()
        console.log('处理逻辑四')
        console.log('处理逻辑五')
        console.log('处理逻辑六')
    


const P1 = new Son('Jee', 20, '1.80')
console.log(P1) // Son  name: 'Jee', age: 20, height: '1.80' 

P1.sonMethod()
// 处理逻辑一
//处理逻辑二
//处理逻辑三
//处理逻辑四
//处理逻辑五
//处理逻辑六
//我看见Jee在跑步~

🎃专栏分享：

javascript相关面试题就更新到这里啦，相关 Web前端面试题 可以订阅专栏哦🥰
专栏地址：《面试必看》

---

⏳ $名言警句：说能做的做说过的$

✨ $原创不易，还希望各位大佬支持一下$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

JavaScript高级class类ES6实现继承ES6对象增强

文章目录

• • class类
  • • 构造函数
    • 访问器方法：getter和setter
    • 静态方法
  • ES6实现继承
  • • extends
    • super
    • 继承内置类
  • 类的混入（了解）
  • ES6对象的增强
  • • 字面量的增强
    • 解构
    • 解构相关应用
  • 多态
  • 参考

class类

ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类。

有两种定义方式：类声明和类表达式。

注意: 类结构中定义多个内容, 不需要加逗号进行分隔

//类声明
class Person



//类表达式
var Student=class
    

构造函数

• 每个类都可以有一个自己的构造函数（方法），这个方法的名称是固定的constructor
• 通过new操作符，操作一个类的时候会调用这个类的构造函数constructor
• 每个类只有一个构造函数，如果包含多个构造函数，那么会抛出异常

当我们通过new关键字操作类的时候，会调用这个constructor函数，并且执行如下操作：

1. 在内存中创建一个新的空对象
2. 这个对象内部的prototype属性会被赋值为该类的prototype属性
3. this指向创建出来的新对象
4. 执行构造函数的内部代码（函数体代码）
5. 如果构造函数没有返回非空对象，则默认返回创建出来的新对象

实例的隐式原型会绑定Person的显式原型

class Person 
  // 类中的构造函数
  // 当我们通过new关键字调用一个Person类时, 默认调用class中的constructor
  constructor(name, age) 
    this.name = name;
    this.age = age;
  


var p1 = new Person("coder", 18);

console.log(p1.name, p1.age); // coder 18
// 实例的隐式原型会绑定Person的显式原型
console.log(p1.__proto__ === Person.prototype); // true

注意： function定义的类可以作为普通函数去调用; class定义的类, 不能作为一个普通函数调用

访问器方法：getter和setter

对象的访问器方法：通过属性描述符定义访问器

var obj = 
  // 程序员之间的约定: 以下划线开头的属性和方法, 是不在外界访问的
  _name: "kaisa"


Object.defineProperty(obj, "name", 
  set: function(value) 
    this._name = value
  ,
  get: function() 
    return this._name
  
)

class的访问器方法：

class Person 
  constructor(name, age) 
    this.name = name;
    this._age = age;
  

  set age(value) 
    this._age = value;
  

  get age() 
    return this._age;
  
 

静态方法

ES5的静态方法：在类上添加或调用的方法。

function Person() 
// 添加实例方法
Person.prototype.running = function() 

// 添加静态方法(类方法)
Person.eating = function() 

var p1 = new Person()
p1.running() // 调用实例方法
Person.eating() // 调用静态方法

ES6中class, 使用static关键字来定义静态方法(类方法)：

class Person 
  // 实例方法
  eating() 
  running() 

  // 类方法
  static studying() 

var p1 = new Person();
p1.running(); // 调用实例方法
p1.eating(); // 调用实例方法

Person.studying(); // 调用类方法

注意: 实例方法的this指向实例对象, 静态方法的this指向类

ES6实现继承

extends

关键字：extends

//父类
class Person
    constructor(name,age)
        this.name=name;
        this.age=age;
    

    running()
        console.log("runninng!");
    


//子类
class Student extends Person
    constructor(name,age,id)
        //super 调用父类构造函数, 将属性传进去
        super(name,age);
        this.id=id;
    

    studying()
        console.log("studying!");
    


//子类实例
var stud1=new Student("a",18,1);
stud1.running()//runninng!
stud1.studying()//studying!

super

• super.method(…):调用一个父类方法
• super:调用父类constructor(只能在constructor中使用)

注意：

• 在子（派生）类的构造函数中使用this或者返回(return)默认对象之前，必须先通过super调用父类的构造函数
• 使用位置：子类的构造函数、实例方法、静态方法(类方法)

位置一：举例如上

位置二：实例方法

class Person
    running()
        console.log("Person running!");
    


class Student extends Person
    running()
        //调用父类的running
        super.running();
        //子类的running
        console.log("Studeng running!");
    


var stu1=new Student();
stu1.running();//Person running! Studeng running!

位置三： 静态方法——注意要通过类调用

class Person
    static running()
        console.log("static Person running!");
    


class Student extends Person
    static running()
        super.running()
        console.log("static Student running!");
    


//要通过类调用
Student.running()//static Person running!  static Student running!

继承内置类

让我们的类继承自内置类，如：

class MyArray extends Array 
    lastItem()
        return this[this.length-1];
    


var arr = new MyArray(1,2,3,4,5);
console.log(arr.lastItem());//5

也可以直接对Array进行扩展，如：

Array.prototype.lastItem = function() 
  return this[this.length - 1]


var arr = new Array(10, 20, 30, 40);
console.log(arr.lastItem()); // 40

类的混入（了解）

JavaScript的类只支持单继承：也就是只能有一个父类。

若我们需要在一个类中添加更多相似的功能时，可以使用混入（mixin）。

//传入一个类，返回一个类
//这个类继承自传入的类，并添加running方法
function mixinRun(BaseClass)
    return class extends BaseClass
        running()
            console.log("running!");
        
    


function mixinFly(BaseClass)
    return class extends BaseClass
        flying()
            console.log("flying!");
        
    


class Bird
    eating()
        console.log("eating!");
    


//把Bird跟Fly、Run混在一起，得到一个会飞会跑的小鸟
class newBird extends mixinFly(mixinRun(Bird))

var bird=new newBird();

bird.flying()//flying!
bird.running()//running!
bird.eating()//eating!

这种写法和react的高阶组件中的写法是非常相似。

ES6对象的增强

字面量的增强

增强对象字面量：Enhanced object literals。主要包括：

1. 属性的简写
2. 方法的简写
3. 计算属性名

1.属性的简写

简写前：

var name = "kaisa";
var age = 18;

// 一般情况写我们会这样写
var obj = 
  name: name,
  age: age
;

简写后：key和value的标识符一样的情况下可以使用

var name = "kaisa";
var age = 18;

// 属性的增强写法
var obj = 
  name,
  age
;

2.方法的简写

简写前：

var obj = 
  running: function () ,
  eating: function () ,
;

简写后：

var obj = 
  running() ,
  eating() ,
;

3.计算属性名

想要使用变量key的值, 作为obj对象的属性名：

var key = "address";

var obj = 
  [key]: "成都市",
;

console.log(obj.address); // 成都市

解构

ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。分为：

1. 数组的解构
2. 对象的解构

1.数组的解构

基本解构：

var names=["a","b","c","d"]

var [n1,n2,n3]=names
console.log(n1,n2,n3);//a b c

顺序解构：严格按顺序，不要的要空出来

var names=["a","b","c","d"]

var [n1,,n3]=names
console.log(n1,n3);//a c

…语法：…里的会放入一个新数组里

var names=["a","b","c","d"]

var [n1,...rest]=names
console.log(n1,rest);//a (3) ['b', 'c', 'd']

默认值：若某个值是undefined，我们可以给它赋值。

var names=["a","b",undefined,"d"]

var [n1,n2,n3="defined"]=names
console.log(n1,n2,n3);//a b defined

2.对象的解构

基本解构：

var obj=
    name:"name",
    age:18,
    height:1.88


var name,height=obj
console.log(name,height);//name 1.88

任意顺序：

var obj=
    name:"name",
    age:18,
    height:1.88


var height,name=obj
console.log(height,name);//1.88 'name'

重命名：对变量进行重命名

var obj=
   name:"name",
   age:18,
   height:1.88


var name:namee,height:heightt,age:agee=obj
console.log(namee,heightt,agee);//name 1.88 18

默认值：可以添加key并对其设置默认值

var obj=
    name:"name",
    age:18,
    height:1.88


var 
    name,age,address:Address="add"
=obj;

console.log(name,age,Address);//name 18 add

…语法：

var obj=
    name:"name",
    age:18,
    height:1.88


var name,...rest=obj
console.log(rest);//age: 18, height: 1.88

解构相关应用

function getPosition(x,y)
    console.log(x,y);


//相当于做了x,y=x:10,y:100这个操作
getPosition(x:10,y:100);

多态

• 为不同数据类型的实体提供统一的接口，或使用一个单一的符号来表示多个不同的类型
• 不同的数据类型进行同一个操作，表现出不同的行为

如：

function sum(a,b)
    console.log(a+b);


sum(1,2)//3
sum("1","2")//12

参考

coderwhy的课
JavaScript中class类、ES6中实现继承的方法
JavaScript面向对象(3)—深入ES6的class
JavaScript中ES6对象的增强使用、解构、多态