ES6 class关键字 ~ 非常详细

最新推荐文章于 2023-12-21 17:44:12 发布
最新推荐文章于 2023-12-21 17:44:12 发布
阅读量366 收藏 2
点赞数
分类专栏： ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46370867/article/details/111873288
版权

下面的对ES6中class关键字的整理，希望可以帮助到有需要的小伙伴~

文章目录


传统面向对象是基于类的面向对象，类的继承实际上是构造函数的继承

JSON是基于原型的面向对象

es6 给了JSON类的语法规则，但是底层没有提供类，底层是构造函数。类的继承实际上是构造函数的继承。

// 这个原型指向对象
Hero.prototype = {
    age : 18,
    myJob : function () {
        console.log("eat");
    }
}
var hero = new Hero();

// ES6创建类
class Hero {
    // 构造器
    constructor() {
        this.name = "张无忌";
        this.sayMe = function () {
            console.log("this is 张无忌");
        }
    }
}

类的声明

声明类具有以下两种方式：

  • 类的声明方式

    class name [extends]{
	// class body
}

    • name: 表示当前声明的类名。

    • extends：继承

      但是不同于类表达式，类声明不允许再次声明已经存在的类，否则将会抛出一个类型错误。

  • 类的表达式方式

    const MyClass = class [className][extends]{
	// class body
);
// 或者
let MyClass = class [className][extends]{
	// class body
);
// 或者
var MyClass = class [className][extends]{
	// class body
);

    和函数表达式相同的一点是，类表达式可以是命名也可以是匿名的。如果是命名类表达式，这个名字只能在类体内部才能访问到。

实例：

/*
    1. 类的声明方式
    class className {
        内部结构
    }
    * class关键字 - 用于创建类
    * className - 创建的类名
    * 使用类的声明方式时–不允许重复声明的

*/

class Hero {}

/*
2.类的表达式方式

    const/let/var className = class [className]{
        内部结构
    }
    * class关键字 – 用于创建类
    * myclass/className - 表示创建的类名
        * myClass -类名，用于后面的代码逻辑进行调用
        * className -类名，用于当前类的内部使用的
*/

const myHero = class Hero {}

// 使用var关键字可以重复声明一个类，其余声明类的方式都不允许重复声明
var myHero2 = class Hero2 {}
var myHero2 = class Hero2 {}

构造函数

构造函数(Constructor )是用于创建和初始化类中创建的一个对象的一种特殊方法。

constructor([arguments]) { ...}
  • 在一个类中只能有一个名为“constructor”的特殊方法。一个类中出现多次构造函数(Constructor)方法将会抛出一个SyntaxError错误。
  • 在一个构造方法中可以使用super关键字来调用一个父类的构造方法。
  • 如果没有显式指定构造方法，则会添加默认的constructor方法。
  • 如果不指定一个构造函数( constructor )方法,则使用一个默认的构造函数（ constructor ) 。
/*
    创建类 - 结构
    * 外层的类的语法结构
    * 内层的构造器的语法结构
*/

class Hero {
    // 构造器
    constructor() {
        this.name = "Jenny";
        this.sayMe = () => {
            console.log("this is Jenny");
        }
    }
}

let hero = new Hero();
console.log(hero); // Hero { name: 'Jenny', sayMe: [Function] }
hero.sayMe(); // this is Jenny

getter与setter

与ECMAScript 5一样，在“类”的内部可以使用get和 set 关键字(不可以自己定义)，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

在ES5中，et 和 set 是函数名，可以自己定义

/*// ES5 - get 和 set 是函数名，可以自己定义
function fn() {
    var v = 100; // 局部变量
    return {
        get : function () {
            return v;
        },
        set : function (value) {
            v = value;
        }
    }
}

var obj = fn();
console.log(obj.get()); // 100
obj.set(99);
console.log(obj.get()); // 99*/


/*function fn() {
    var v = 100;
    this.get = function () {
        return v;
    }
    this.set = function (value) {
        v = value;
    }
}

var obj = new fn();
obj.set(999);
console.log(obj.get()); // 999*/

// ES6
// 创建对象的属性 可以 设置和获取
/*class Hero {
    constructor() {
        this.v = 100;
    }
}

var hero = new Hero();
console.log(hero.v); // 100*/

// get 和 set [关键字]
class Hero {
    constructor() {
        this.v = 100;
    }

    get getV() {
        return this.v;
    }

    set setV(value) {
        this.v = value;
    }
}

var hero = new Hero();
console.log(hero); // Hero { v: 100 } 没有get和set方法
hero.getV(); // TypeError: hero.getV is not a function
console.log(hero.v);
console.log();


// 可以设置一个属性  没有自带的 get和set Object.defineProperty

不允许提前声明

声明类时，是不存在声明提前的现象的。如下示例代码所示:

new Foo():// ReferenceError: Foo is not defined
class Foo {}

上述代码示例中，Foo类调用在前，声明在后。由于ECMAScript6不允许类的声明提前，结果为报错。
这种规定的原因与继承有关，必须保证子类在父类之后定义。

不允许重复声明

声明类时，是不存在重复声明的。如果一个类被重复声明的话，则引起解析错误。

如下示例代码所示:

class Foo {};
class Foo {}; // SyntaxError; ldentifier 'Foo' has already been declared

若之前使用类表达式定义了一个类，则再次声明这个类同样会引起解析错误。

let Foo = class {};
class Foo {}}; // SvntaxError; ldentifier 'Foo' has already been declared

静态方法

静态方法的语法

static关键字为一个类定义了一个静态方法。静态方法不会在类的实例（通过类生成的对象）上被调用，相反被类本身调用。

static methodName() {...}

methodName:表示指定类中的静态方法名称。

注意：

静态方法直接在类上进行调用，不能在类的实例上调用。

ES6 实例：

/*
    在类的声明中
    * 构造器和普通方法中的this -> 指代创建后的对象
    * 静态方法中的this -> 指代当前的类
*/

class Hero {
    constructor() {
        this.name = "lucy";
        this.sayMe = ()=>{
            console.log("this is " + this.name); // this指向的是当前对象

            // 在构造器中调用静态方法，
            // 1.类名直接调用 即 类名.静态方法()
            Hero.sayYou(); // this is sayYou
            // 2. this.constructor.静态方法名()
            this.constructor.sayYou(); // this is sayYou
        }
    }
    // 对象的方法有2种 - 可枚举 / 不可枚举
    // 在构造器外面定义方法 - 不可枚举（存在但不能直接打印）
    toString () {
        console.log("name toString" + this.name);
        // this指向的是当前对象
        // return "name toString " + this.name
    }

    static sayYou() {
        console.log("this is sayYou"); // this指向的是当前类
    }

    static sayHe() {
        // 在当前静态方法中，调用另一个静态方法
        this.sayYou();
    }
}

let hero = new Hero();
hero.sayMe(); // this is lucy
console.log(hero.toString()); // undefined toString()方法中没有return语句，是打印不出结果的
// console.log(hero.toString()); // name toString lucy

// 调用sayYou()静态方法
Hero.sayYou(); // this is sayYou
// 调用sayHe()静态方法
Hero.sayHe(); // this is sayYou

类的继承

实现类的继承

类的继承在底层中实际上是 原型的继承

语法：

class ChildClass extends ParentClass {...}
  • extends：使用class创建类的时候，用extends指出该类的父类

注意：

  1. 必须在子类的构造器中写入super()，该super()指向父类的构造器，子类才能获取到父类构造器中的属性和方法

  2. 继承的.prototype必须是一个Object或者null.

class Parent {
    constructor() {
        this.name = 'parent';
        this.sayMe = function() {
            console.log('this is sayme')
        }
    }
    sayYou() {
        console.log("这是父类的一个普通方法"); // 这是父类的一个普通方法  undefined
    }

    static staticMethod() {
        console.log("这是父类的静态方法");
    }
}

// 声明Child类时，指定Child类作为Parent类的子类
class Child extends Parent {
    constructor() {
        super(); // super -> 指向当前子类的父类的构造器，否则获取不到父类构造器中的属性和方法
        this.age = 18;
    }


}

let child = new Child(); //
console.log(child); // Child { name: 'parent', sayMe: [Function], age: 18 }
console.log(child.sayYou()); //这是父类的一个普通方法
console.log(Parent.staticMethod()); // 这是父类的静态方法   undefined

继承于内置对象

写一个类继承于内置对象，基于内置对象扩充自己需要的方法，不会改变内置对象原型的内容。

之前使用原型方法的时候，把自己定义的方法加在了内置方法的原型上，改变了内置方法的原型，是不友好的

实例：

/*// myDate类继承于内置对象Date
class myDate extends Date{
    constructor() {
        super();
    }
    getFormattedDate(){

    }

}

let date = new Date();
console.log(date.getFullYear()); // 2020  只能单独返回年、月、日*/


// 继承于Date内置对象

// myDate类继承于内置对象Date
class myDate extends Date{
    constructor() {
        super();
    }

    // 自己定义方法 返回 年-月-日
    getFormattedDate(){
        var months = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
        //            日         -          月                    -          年
        return this.getDate() + "-" + months[this.getMonth()] +  "-" + this.getFullYear();
    }

}

/*
let date = new Date();
console.log(date.getFullYear()); // 2020  只能单独返回年、月、日*/

let date = new myDate();
console.log(date.getFormattedDate()); // 25-12月-2020

// 2.继承于数组
let arr = [1,2,3,4,5,4,3,2,1];
class MyArray extends Array {
    constructor() {
        super();
    }
    // Set数据结构中的值是唯一的，可以利用Set给数组中的值去重
    quchong(array) {
        return new Set(array);
    }
}

var array = new MyArray();
console.log(array.quchong(arr)); // Set { 1, 2, 3, 4, 5 }

Super关键字

super关键字可以当作函数使用、当作对象使用。这两种情况是不同的。

  • super关键字当作函数调用 - 代表父类的构造函数

    ES6要求子类的构造函数必须执行一次super函数

    注意：

    super虽然代表了父类A的构造函数，但是返回的是子类B的实例

    即 super内部的 this指的是B，因此 super()在这里相当于A.prototype.constructor.call(this)。

  • super关键字作为对象

    • 在普通方法中，指向父类的原型对象
    • 在静态方法中，指向父类

    注意：

    由于super指向父类的原型对象，super()不能调用定义是父类实例上的方法和属性。

类的实例

注意：父类中方法的返回值 必须用 return , 否则会返回undefined

// 定义一个类
class Parent {
    // 当前的构造器（如果省略，JS会自动生成一个构造器）- 创建对象的初始化方法
    constructor(name) {
        this.name = name;
    }
    // 当前类的（实例对象的）方法，不是当前类的原型方法
    toString() {
        console.log("this is toString method");
    }
    // 静态方法 - 由当前类直接调用的方法
    static staticMethod() {
        return "this is static method";
    }

    
}

// super作为对象，在普通方法中指向父类的原型对象，所以父类中的toString()方法必须是原型中的方法
    // 在类的原型中添加方法
    Parent.prototype.sayMe = function () {
        return "this is parent method."
    }




// 类也同样具有原型(类似于ES5中的构造函数)
// 对象中有一个隐式原型 - 指向类的原型
/*let parent = new Parent();
parent.toString(); // this is parent method.*/


// 定义一个类作为另一个类的子类
class Child extends Parent {
    // 因为父类的构造函数中有一个name形参，所以子类的构造函数中也要有和父类一样是形参，否则子类就不能继承父类了
    // 别忘了 super()里面也要写上父类中构造函数的形参
    constructor(name,age) {
        super(name); // super指向父类的构造器
        this.age = age;
        // 以下用法：super -> 指向父类的实例对象（具有隐式原型）
        //  原型对象不能调用实例对象，实例对象能调用原型对象
        super.sayMe(); // super指向父类的原型对象

        // super.staticMethod(); // 报错 TypeError: (intermediate value).sayMe is not a function

        super.toString(); // super指向父类实例化的对象 this is tostring method .

        // super的不同用法导致super的含义不同
    }

    sayMe() {
        // super 指向父类的原型对象
        console.log("this is child method. " + super.sayMe())
    }

    static staticMethod() {
        // super - 指向父类
        console.log("this is child static method. " + super.staticMethod())
    }
}

// 因为子类的构造函数中有形参name 和 age , 所以实例化子类的时候也要给形参传值
let child = new Child("lucy",18);
// console.log(child); // Child { name: 'lucy', age: 18 }
// 父类和子类中有相同函数名toString()，当子类对象调用该方法的时候，子类和父类的相同方法会被同时调用
child.sayMe();
/*
this is parent method.
this is child method. undefined

如果 super.staticMethod() 的返回值是 undefined
原因：super作为对象，在普通方法中指向父类的原型对象，而父类中的toString()方法不是原型中的方法

把父类中的toString()方法改为原型中的方法后：
返回结果是：
this is child method. this is parent method.
*/


// Child.staticMethod();
/*
this is static method
this is child static method. undefined
*/

end~
在这里插入图片描述

weixin_46370867
关注
专栏目录
ES6-class关键字
weixin_44486539的博客
02-07 549
class 关键字 es6 新增了 class 关键字，这是 es6 的新语法，用来实现 es6 中面向对象编程；可以通过该关键字来定义类。 class不存在变量提升，所以需要先定义再使用。 ES5: // 定义一个构造函数 function Preson(name, age) { this.name = name this.age = age } // 创建 preson 实例 ...
【Es6】关键字之 super、static、new.target
m0_48982503的博客
01-12 699
ES6引入了Class（类）这个概念,作为对象的模板,通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法 1.super关键字 super用在调用的时候有两种情况： 第一种情况，super作为函数调用时，代表父类的构造函数。 第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。 class Person {
ES6中的class关键字
nostrud ipsum6
01-29 994
ES6中的class关键字 欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 声明：本文参考业界大佬阮一峰老师的ES6标准入门 ES5 中的面向对象12345678910111213// 创建一个构造函数function People (name, age) { this.name = na...
ES6 class关键字
Ronychen的博客
11-17 367
本文转载至简书-这里王工头博文 ES5 中的面向对象 // 创建一个构造函数 function People (name, age) { this.name = name this.age = age } // 向构造函数的原型对象中添加 say 方法 People.prototype.say = function () { return 'hello everyon...
ES6之关键字
weixin_47412580的博客
07-29 367
ES6的关键字解析
ES6 语法详解(class关键字)
彼岸舞的博客
08-16 252
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type=...
解读ES6中class关键字
08-28
JavaScript ES6 中的 Class 关键字 ES6 中引入的 Class 关键字是 JavaScript 语言的一大进步，Class 是 ES6 中最重要的特性之一。通过实例代码，我们可以详细了解 Class 的用法和特点。 1. 定义 Class 在 ES6 中...
深入浅析ES6 Class 中的 super 关键字
08-29
深入浅析ES6 Class 中的 super 关键字 ES6 中的 Class 引入了一个新的关键字 super，这个关键字可以...本文对 ES6 Class 中的 super 关键字进行了详细的介绍，希望能够对读者有所帮助。如果您有任何疑问，请随时留言。
ES6 之关键字 let
weixin_33976072的博客
02-03 166
2019独角兽企业重金招聘Python工程师标准>>> ...
[ES6] 细化ES6之 -- Class关键字
DeathDomain的博客
10-29 287
类的声明 类是什么 类作为对象的模板,只是一个语法糖 class 关键字是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 // ES5创建构造函数 function Hero() { this.name = "张无忌" this.sayMe = function () { console.log("this is 张无忌"); } } Hero.prototype={ age:18, myjob:function () { co
【ES6丨前端进阶基础 】ES6的关键字，新特性以及解构赋值
zhaochen1127的博客
09-29 1763
ES全称EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript，是EcmaScript的一种实现，所以ES新特性其实指的就是JavaScript的新特性ECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会，这组织的目标是评估、开发和认可电信和计算机标准。1994年后该 组织改名为Ecma国际。ecmascrpit是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。我是Aic山鱼。
es6（五）：class关键字（extends，super，static）
demonHunter1234的博客
12-21 212
ES5中，生成对象通过构造函数： 1 function A(name,age){ 2 this.name=name; 3 this.age=age 4 } 5 // 在A的prototype属性上定义一个test方法，即A生成的实例化对象的原型对象上的方法 6 A.prototype.test=functio...
ES6新增关键字
XYZS_520的博客
10-21 468
ES6简介 ES6主要的更新：块级作用域、新的关键字、新的类、新的数据类型、新的数据结构、新的异步代码解决方案、新的方法... 关键字 let 关键字特点 块级作用域：if语句和for语句之类的大括号会隔离作用域 let定义的变量遵循块级作用域 if (true) { var a = 10; let b = 12; console.log(a); // 10 ...
class关键字
weixin_30788619的博客
11-10 259
class的数据类型为function，可以看做构造函数的另一种写法。事实上，类的所有方法都定义在类的prototype属性上面。一、声明class class Animal { constructor(eye,hair) { this.eye = eye; this.hair = hair; } speak() { ...
class 关键字
weixin_30532987的博客
09-05 612
class Ninja 表示创建一个名为Ninja的函数。constructor（...）指明Ninja函数的签名和函数体内容。 class Ninja{ constructor(name){ this.name=name; } swingSword(){ return true; } } const ...
Class关键字
码小余の博客
10-28 3843
Class关键字 类的声明 类是什么 ECMAScript 6提供了更接近传统开发语言的写法，引人了类(Class ）的概念。类作为对象的模板，只是一个语法糖。class关键字只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 // ECMAScript 5使用构造函数定义 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x +',
class命名 常用关键字
weixin_30559481的博客
10-22 193
常见class关键词： 布局类：header, footer, container, main, content, aside, page, section 包裹类：wrap, inner 区块类：region, block, box 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span ...
关键字：class关键字
最新发布
xu050906的博客
12-21 869
关键字是 Java 中用于定义类的关键字，类是 Java 程序的基本构建块，用于创建对象和定义对象的行为。类是 Java 程序的基本构建块，它用于创建对象并定义对象的属性和方法。类定义通常包含属性和方法的定义，用于描述该类的行为和功能。通过定义类，可以创建该类的对象，并使用这些对象执行类中定义的操作。是一个关键字，用于定义类（在 Java 编程语言中，
揭秘ES6 class实现机制：从传统到现代
"本文将深入解析ES6中的class关键字是如何实现类和继承的原理，以便帮助读者更好地掌握JavaScript ES6。在传统的JavaScript中，类的实现依赖于函数和原型链，例如通过`function`关键字定义构造函数和使用`prototype`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值