ES6 class类

作者: 微语博客 | 来源:发表于2021-10-07 23:07 被阅读0次

在ES6以前,没有类的概念,所有的面向对象都是基于原型实现的。ES6中可以通过class定义类,但是class的本质也是函数,ES6的类更像是语法糖。class让对象原型的写法更加清晰、更像面向对象编程的语法。

class类定义

类表达式可以为匿名或命名类。

let Person = class{
    constructor(name){
        this.name = name;
    }
}
let Person = class Person{
    constructor(name){
        this.name = name;
    }
}
let person = new Person("Cherry");//实例化

类不可重复声明,否则会报错。类定义不会被提升,这意味着,必须在访问前对类进行定义,否则就会报错。

prototype属性

对象的原型属性,在ES6中任然存在,用于覆盖方法初始化时添加方法。

let Person = class Person{
    constructor(name){
        this.name = name;
    };
    greet(){
        console.log("Hello"+this.name);
    }
}
Person.prototype.greet = function (){
  console.log("你好"+this.name);
}

new Person("Cherry").greet();//你好Cherry

添加方法

let Person = class Person{
    constructor(name){
        this.name = name;
    };
    greet(){
        console.log("Hello"+this.name);
    }
}
Object.assign(Person.prototype,{
  say(){
    console.log("this is "+this.name+" method");
  }
})
new Person("Cherry").say();//this is Cherry method

其它属性

静态属性

class Person{
    static city = "Guangzhou";//静态属性,类的固定属性
}
console.log(Person.city);//Guangzhou
//或者直接添加给类
Person.city = "Shenzhen";
console.log(Person.city);//Shenzhen 
//通过实例对象访问
console.log(new Person().city);//undefined

公共属性

class Person{
    //
}
Person.prototype.id = 1230;//原型链上的属性
let person1 = new Person();
let person2 = new Person();
console.log(person1.id);//1230
console.log(person2.id);//1230
console.log(person1 == person2);//false

实例属性

class Person{
    age = 18;//实例对象this上的属性
    constructor(age){
        this.age = age;
    }
}
console.log(new Person(20).age);//20

name属性

class Person{}//name属性返回当前类名
console.log(Person.name);//Person

constructor方法

constructor 方法是类的默认方法,创建类的实例化对象时被调用,相当于构造方法。

class Person{
    constructor(){
        console.log("触发了此方法");
    }
}
new Person();//触发了此方法

返回指定对象

class Person{
    constructor(){
        return window;//指定返回了window对象,不指定默认返回的this
    }
}
console.log(new Person() === window);//true

静态方法

class Person{
    static sayHi(){
        console.log("我是静态方法");
    }
}
Person.sayHi();

原型方法

class Person{
    sayHi(){
        console.log("我是原型方法");
    }
}
let person1 = new Person();
let person2 = new Person();
person1.sayHi();//我是原型方法
person2.sayHi();//我是原型方法

实例方法

class Person {
    constructor() {
        this.sayHi = () => {
            console.log("我是实例方法");
        }
    }
}
new Person().sayHi();//我是实例方法

getter与setter

class Person{
    constructor(name){
        this.name = name;
    }
    get name(){
        console.log("this is getter");
        return this._name;
    }
    set name(name){
        console.log("this is setter");
        this._name = name;
    }
}
let person = new Person("Cherry");//this is setter
console.log(person._name);//Cherry

getter 与 setter 必须同级出现,而且setter必须有参数。

类的继承

通过关键字extends可以实现类的继承。

class Father{
    constructor(){
        console.log("this is Father class");
    }
}
class Child extends Father{
    constructor(){
        super()
        console.log("this is Child class");
    }
}
new Child();//this is Father class this is Child class

子类必须有super关键字实现继承,且要出现this前面,而且只能在子类构造方法中调用父类构造方法。

调用父类普通方法

class Father{
    constructor(){
    }
    info(){
        console.log("父类的普通方法");
    }
}
class Child extends Father{
    constructor(){
        super();
        super.info();//super.方法名调用父类普通方法
    }
}
new Child();//父类普通方法

调用父类静态方法

class Father{
    static info(){
        console.log("父类的静态方法");
    }
    constructor(){
    }
}
class Child extends Father{
    constructor(){
        super();
    }
    static test(){
        super.info();//在子类静态方法中调用
    }
}
Child.test();//父类的静态方法

类的继承是面向对象编程的基础,而继承只能出现在class类中,原始对象不能被继承。

相关文章

  • ES6 class与继承

    class是什么 class是定义类的方法。ES6之前用构造函数的方式定义类,ES6引入了class。 class...

  • 深入理解JS面向对象 - JavaScript实现继承的五种方式

    一、类与实例 1. 类的声明 传统function类的声明 ES6中的class声明 1.1 ES6 class与...

  • 2JavaScript设计模式--class/extends

    ES6语法 类 class ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • react组件

    es6 的class类的继承 运用es6 class继承 通过继承React.Component类来定义一个组件

  • 第三十二节: ES6 Class类

    1. ES6 Class 类 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • 第三十二节: ES6 Class类

    1. ES6 Class 类 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • 深入理解ES6中class的this指向

    在ES6中,引入了类似其他语言的类的写法:即class(类),作为类对象模板。ES6 的class可以看作一个语法...

  • ES6 class类

    在ES6以前,没有类的概念,所有的面向对象都是基于原型实现的。ES6中可以通过class定义类,但是class的本...

  • ES6 class类

    ES6 class类知识点梳理 大概从几个方面来讲解ES6 class类和传统的构造函数的区别。 必须要有cons...

  • class to es5

    1.Class 众所周知js是没有class的,但是es6却给了我们“类”的概念;我们先写一个es6的类: 查看其...

网友评论

    本文标题:ES6 class类

    本文链接:https://www.haomeiwen.com/subject/uzrtoltx.html