javascript class类

最新推荐文章于 2023-06-09 16:38:12 发布
最新推荐文章于 2023-06-09 16:38:12 发布
阅读量425 收藏 1
点赞数
分类专栏： javscript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyadyx/article/details/108883120
版权

一、定义类

类实际上是个“特殊的函数”，就像你能够定义的函数表达式和函数声明一样，类语法有两个组成部分：类表达式和类声明。

1、类声明

定义一个类的一种方法是使用一个类声明。要声明一个类，你可以使用带有class关键字的类名：
函数声明和类声明之间的一个重要区别是函数声明会提升，类声明不会。你首先需要声明你的类，然后访问它，否则像下面的代码会抛出一个ReferenceError：

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

let p = new Rectangle(); // ReferenceError

class Rectangle {}

2、类表达式

一个类表达式是定义一个类的另一种方式。类表达式可以是具名的或匿名的。
一个具名类表达式的名称是类内的一个局部属性，它可以通过类本身（而不是类实例）的name属性来获取。

// 匿名类
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"

// 具名类
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 输出: "Rectangle2"

二、类体和方法定义

一个类的类体是一对花括号/大括号 {} 中的部分。这是你定义类成员的位置，如方法或构造函数

1、严格模式

类声明和类表达式的主体都执行在严格模式下。比如，构造函数，静态方法，原型方法，getter和setter都在严格模式下执行。

2、构造函数

constructor方法是一个特殊的方法，这种方法用于创建和初始化一个由class创建的对象。一个类只能拥有一个名为 “constructor”的特殊方法。如果类包含多个constructor的方法，则将抛出 一个SyntaxError 。

一个构造函数可以使用 super 关键字来调用一个父类的构造函数。

class Rectangle {
    // constructor
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // Getter
    get area() {
        return this.calcArea()
    }
    // Method
    calcArea() {
        return this.height * this.width;
    }
}
const square = new Rectangle(10, 10);

console.log(square.area); // 100

3、静态方法

static 关键字用来定义一个类的一个静态方法。调用静态方法不需要实例化该类，但不能通过一个类实例调用静态方法。静态方法通常用于为一个应用程序创建工具函数。

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.hypot(dx, dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));

4、用原型和静态方法包装

当调用静态或原型方法时没有指定 this 的值，那么方法内的 this 值将被置为 undefined。即使你未设置 “use strict” ，因为 class 体内部的代码总是在严格模式下执行。

class Animal { 
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined

Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined

如果上述代码通过传统的基于函数的语法来实现，那么依据初始的 this 值，在非严格模式下方法调用会发生自动装箱。若初始值是 undefined，this 值会被设为全局对象。

严格模式下不会发生自动装箱，this 值将保留传入状态。

function Animal() { }

Animal.prototype.speak = function() {
  return this;
}

Animal.eat = function() {
  return this;
}

let obj = new Animal();
let speak = obj.speak;
speak(); // global object

let eat = Animal.eat;
eat(); // global object

5、实例属性
实例的属性必须定义在类的方法里：

class Rectangle {
  constructor(height, width) {    
    this.height = height;
    this.width = width;
  }
}

静态的或原型的数据属性必须定义在类定义的外面。

Rectangle.staticWidth = 20;
Rectangle.prototype.prototypeWidth = 25;

公有字段声明
通过预先声明字段，类定义变得更加自我记录，并且字段始终存在。

class Rectangle {
  height = 0;
  width;
  constructor(height, width) {    
    this.height = height;
    this.width = width;
  }
}

私有字段声明
从类外部引用私有字段是错误的。它们只能在类里面中读取或写入。通过定义在类外部不可见的内容，可以确保类的用户不会依赖于内部，因为内部可能在不同版本之间发生变化。

class Rectangle {
  #height = 0;
  #width;
  constructor(height, width) {    
    this.#height = height;
    this.#width = width;
  }
}

6、使用 extends 创建子类

extends 关键字在 类声明 或 类表达式 中用于创建一个类作为另一个类的一个子类。

如果子类中定义了构造函数，那么它必须先调用 super() 才能使用 this 。

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 调用超类构造函数并传入name参数
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

var d = new Dog('Mitzie');
d.speak();// 'Mitzie barks.'

7、使用 super 调用超类

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

三、constructor 构造方法

constructor 是一种用于创建和初始化class创建的对象的特殊方法。
1、 在一个类中只能有一个名为 “constructor” 的特殊方法。 一个类中出现多次构造函数 (constructor)方法将会抛出一个 SyntaxError 错误。
2、在一个构造方法中可以使用super关键字来调用一个父类的构造方法。
3、如果没有显式指定构造方法，则会添加默认的 constructor 方法。
4、如果不指定一个构造函数(constructor)方法, 则使用一个默认的构造函数(constructor)。

class Square extends Polygon {
    constructor(length) {
        // 在这里, 它调用了父类的构造函数, 并将 lengths 提供给 Polygon 的"width"和"height"
        super(length, length);
        // 注意: 在派生类中, 必须先调用 super() 才能使用 "this"。
        // 忽略这个，将会导致一个引用错误。
        this.name = 'Square';
    }
    get area() {
        return this.height * this.width;
    }
    set area(value) {
        // 注意：不可使用 this.area = value
        // 否则会导致循环call setter方法导致爆栈
        this._area = value;
    }
}

默认构造方法
如前所述，如果不指定构造方法，则使用默认构造函数。对于基类，默认构造函数是：

constructor() {}

对于派生类，默认构造函数是：

constructor(...args) {
  super(...args);
}

四、static 静态方法

类（class）通过 static 关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。这些通常是实用程序方法，例如创建或克隆对象的功能。

1、从另一个静态方法
静态方法调用同一个类中的其他静态方法，可使用 this 关键字。

class StaticMethodCall {
    static staticMethod() {
        return 'Static method has been called';
    }
    static anotherStaticMethod() {
        return this.staticMethod() + ' from another static method';
    }
}
StaticMethodCall.staticMethod();
// 'Static method has been called'

StaticMethodCall.anotherStaticMethod();
// 'Static method has been called from another static method'

2、从类的构造函数和其他方法
非静态方法中，不能直接使用 this 关键字来访问静态方法。而是要用类名来调用：CLASSNAME.STATIC_METHOD_NAME() ，或者用构造函数的属性来调用该方法： this.constructor.STATIC_METHOD_NAME().

class StaticMethodCall {
    constructor() {
        console.log(StaticMethodCall.staticMethod());
        // 'static method has been called.'
        console.log(this.constructor.staticMethod());
        // 'static method has been called.'
    }
    static staticMethod() {
        return 'static method has been called.';
    }
}

五、类元素

1、公有字段
静态公有字段和实例公有字段都是可编辑的，可遍历的，可配置的。它们本身不同于私有对应值（private counterparts）的是，它们参与原型的继承。
（1）静态公有字段

静态公有字段在你想要创建一个只在每个类里面只存在一份，而不会存在于你创建的每个类的实例中的属性时可以用到。你可以用它存放缓存数据、固定结构数据或者其他你不想在所有实例都复制一份的数据。
静态公有字段是使用关键字 static 声明的。我们在声明一个类的时候，使用Object.defineProperty方法将静态公有字段添加到类的构造函数中。在类被声明之后，可以从类的构造函数访问静态公有字段。

class ClassWithStaticField {
  static staticField = 'static field';
}

console.log(ClassWithStaticField.staticField);
// 预期输出值: "static field"​

静态公有字段不会在子类里重复初始化，但我们可以通过原型链访问它们。

class ClassWithStaticField {
  static baseStaticField = 'base field';
}

class SubClassWithStaticField extends ClassWithStaticField {
  static subStaticField = 'sub class field';
}

console.log(SubClassWithStaticField.subStaticField);
// 预期输出值: "sub class field"

console.log(SubClassWithStaticField.baseStaticField);
// 预期输出值: "base field"

当初始化字段时，this指向的是类的构造函数。你可以通过名字引用构造函数，并使用super获取到存在的超类构造函数。

class ClassWithStaticField {
  static baseStaticField = 'base static field';
  static anotherBaseStaticField = this.baseStaticField;

  static baseStaticMethod() { return 'base static method output'; }
}

class SubClassWithStaticField extends ClassWithStaticField {
  static subStaticField = super.baseStaticMethod();
}

console.log(ClassWithStaticField.anotherBaseStaticField);
// 预期输出值: "base static field"

console.log(SubClassWithStaticField.subStaticField);
// 预期输出值: "base static method output"

（2）公有实例字段

公有实例字段存在于类的每一个实例中。通过声明一个公有字段，我们可以确保该字段一直存在，而类的定义则会更加像是自我描述。
公有实例字段可以在基类的构造过程中（构造函数主体运行前）使用Object.defineProperty添加，也可以在子类构造函数中的super()函数结束后添加。

class ClassWithInstanceField {
  instanceField = 'instance field';
}

const instance = new ClassWithInstanceField();
console.log(instance.instanceField);
// 预期输出值: "instance field"

当初始化字段时，this指向的是类正在构造中的实例。和公共实例方法相同的是：你可以在子类中使用super来访问超类的原型。

class ClassWithInstanceField {
  baseInstanceField = 'base field';
  anotherBaseInstanceField = this.baseInstanceField;
  baseInstanceMethod() { return 'base method output'; }
}

class SubClassWithInstanceField extends ClassWithInstanceField {
  subInstanceField = super.baseInstanceMethod();
}

const base = new ClassWithInstanceField();
const sub = new SubClassWithInstanceField();

console.log(base.anotherBaseInstanceField);
// 预期输出值: "base field"

console.log(sub.subInstanceField);
// 预期输出值: "base method output"

2、公共方法
（1）静态公共方法

关键字static将为一个类定义一个静态方法。静态方法不会在实例中被调用，而只会被类本身调用。它们经常是工具函数，比如用来创建或者复制对象。

静态方法是在类的赋值阶段用Object.defineProperty方法添加到类中的。静态方法是可编辑的、不可遍历的和可配置的。

class ClassWithStaticMethod {
  static staticMethod() {
    return 'static method has been called.';
  }
}

console.log(ClassWithStaticMethod.staticMethod());
// expected output: "static method has been called."

（2）公共实例方法

公共实例方法是可以在类的实例中使用的。

在实例的方法中，this指向的是实例本身，你可以使用super访问到超类的原型，由此你可以调用超类的方法。

class BaseClass {
  msg = 'hello world';
  basePublicMethod() {
    return this.msg;
  }
}

class SubClass extends BaseClass {
  subPublicMethod() {
    return super.basePublicMethod();
  }
}

const instance = new SubClass();
console.log(instance.subPublicMethod());
// 预期输出值: "hello worl​d"

3、私有字段
（1）静态私有字段

静态私有字段可以在类声明本身内部的构造函数上被访问到。

静态变量只能被静态方法访问的限制依然存在。

class ClassWithPrivateStaticField {
  static #PRIVATE_STATIC_FIELD;

  static publicStaticMethod() {
    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42;
    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD;
  }
}

assert(ClassWithPrivateStaticField.publicStaticMethod() === 42);

静态私有字段有一个来源限制。只有定义静态私有字段的类可以访问该字段。这在使用this时，可能会导致不符合预期的行为。

class BaseClassWithPrivateStaticField {
  static #PRIVATE_STATIC_FIELD;

  static basePublicStaticMethod() {
    this.#PRIVATE_STATIC_FIELD = 42;
    return this.#PRIVATE_STATIC_FIELD;
  }
}

class SubClass extends BaseClassWithPrivateStaticField { }

assertThrows(() => SubClass.basePublicStaticMethod(), TypeError);

（2）私有实例字段

私有实例字段是通过# names句型（读作“哈希名称”）声明的，即为识别符加一个前缀“#”。“#”是名称的一部分，也用于访问和声明。

封装是语言强制实施的。引用不在作用域内的 # names 是语法错误。

class ClassWithPrivateField {
  #privateField;
  
  constructor() {
    this.#privateField = 42;
    this.#randomField = 666; # Syntax error
  }
}

const instance = new ClassWithPrivateField();
instance.#privateField === 42; // Syntax error

4、私有方法

（1）静态私有方法

和静态公共方法一样，静态私有方法也是在类里面而非实例中调用的。和静态私有字段一样，它们也只能在类的声明中访问。

class ClassWithPrivateStaticMethod {
    static #privateStaticMethod() {
        return 42;
    }

    static publicStaticMethod() {
        return ClassWithPrivateStaticMethod.#privateStaticMethod();
    }
}

assert(ClassWithPrivateStaticMethod.publicStaticMethod() === 42);

（2）私有实例方法

私有实例方法在类的实例中可用，它的访问方式的限制和私有实例字段相同。

class ClassWithPrivateMethod {
  #privateMethod() {
    return 'hello world';
  }

  getPrivateMessage() {
      return #privateMethod();
  }
}

const instance = new ClassWithPrivateMethod();
console.log(instance.getPrivateMessage());
// 预期输出值: "hello worl​d"
cyadyx
关注
专栏目录
【JavaScript】类class
Jamcy123的博客
07-27 279
看看js中的类，如有错误，望不吝赐教
JavaScript --class类的用法
m0_59359854的博客
07-08 2029
JavaScript 语言中，生成实例对象的传统方法是通过构造函数，ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。类的定义 说明：使用class关键词 声明类，constructor为构造方法，一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加，this关键字则代表实例对象，getstr()为普通方法，不要用“function”，getstr()存在 prototype
JavaScript中的类(Class)详细介绍
01-19
在JavaScript中，可以使用类(Class)来实现面向对象编程(Object Oriented Programming)。不过，JavaScript中的类与Java中的有所不同，其相应的定义和使用也不一样。 JavaScript中类的定义 在JavaScript中，所有从同一个原型对象(prototype)处衍生出来的对象组成了一个类；也就是说，JavaScript中的类是一个对象集合的概念，如果两个对象它们的prototype相同，那么它们就属于同一个类；JavaScript中的类甚至都不需要类名。以下面的代码为例： 代码如下: var p = {x:42}; var a = Obj
Javascript定义类（class）的三种方法
weixin_33989780的博客
07-12 106
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript 类(class)
m0_59075169的博客
04-22 375
JavaScript 类(class)
js-ES6学习笔记-Class
weixin_34270865的博客
03-09 79
1、ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 2、 //定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y +...
Javascript定义类（class）的三种方法详解
10-24
由于 JavaScript 早期版本不直接支持类（class）的概念，开发者需要通过其他方式来实现类似的功能。本文将详细解释三种在JavaScript中定义类的方法：构造函数法、Object.create()法以及极简主义法。 1. 构造函数法 ...
JavaScript ES6 Class类实现原理详解
10-15
JavaScript ES6之前的版本没有Class类的概念，对象的实例化多数通过构造函数完成。构造函数的方法使得代码写起来更加复杂和冗长，而ES6的Class定义方式则提供了更加简洁和直观的语法。 在ES6中，使用class关键字...
ES6 javascript中class类的get与set用法实例分析
11-28
本文实例讲述了ES6 javascript中class类的get与set用法。分享给大家供大家参考，具体如下： 与 ES5 一样， 在 Class 内部可以使用get和set关键字， 对某个属性设置存值函数和取值函数， 拦截该属性的存取行为。 ...
JavaScript class 声明与使用
love and share
07-27 733
class简单声明 以下声明了一个简单类 Cat constructor 为构造函数(该类若需要被继承则必须声明构造函数否则可忽略) // 声明 class Cat { constructor() { console.log('constructor') } } // new一个对象 var cat = new Cat(); 使用 constructor 构造函数传递参数并调用参数 // 声明 class Cat { constructor(name) { t...
JavaScript Class类详解
热门推荐
m0_37824255的博客
05-18 1万+
ECMAScript 6 提供了更接近传统语言的写法，新引入的class关键字具有正式定义类的能力。类（class）是ECMAScript中新的基础性语法糖结构，虽然ECMAScript 6类表面上看起来可以支持正式的面向对象编程，但实际上它背后使用的仍然是原型和构造函数的概念，让对象原型的写法更加清晰、更像面向对象编程的语法。
Javascript定义类（class）的方法
chuangaixian5735的博客
01-22 143
原地址：http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html JS创建对象 ...
JavaScript 类
一出好剧
03-11 714
JavaScript类 理解类，忘记类。
JavaScript 中的class类
最新发布
码农键盘上的梦
06-09 728
JavaScript 中的类是一种用于创建对象的模板或蓝图。它们提供了一种简单而优雅的方式来组织代码，并使代码可重复使用和可维护。使用类，可以定义对象的属性和方法，从而可以在多个地方实例化该类以创建新的对象。类是一种面向对象的编程概念，它内置于许多面向对象的编程语言中。具体来说，类是用于创建对象、初始化数据和定义函数的模版，是一种以可重复使用的格式组织某类对象的信息的方法。通过使用类，我们可以创建所述类的特定实例并访问特定类的数据和函数。举个例子，假如你想创建猫、狗和兔子的对象。
Javascript 之 Class
yeCaofire的博客
03-26 222
声明：以下编码标准，除非特意指出，否则均基于ES6 回顾 以前如何定义并生成新对象？ functionOrder(id,amount){ this.id=id; this.amount=amount; Order.prototype.toString=function(){ return'id:'+this.id+',amount:'+this.amount } } id和amount是对象Or...
JavaScript Class
gnimgnot
11-17 1059
构造方法构造函数是大多数类最基本的东西，用 new 创建实例时就调用它，名称必须是constructor。class MyClass { constructor(option) { console.log(`Creating instance using ${option} option.`); this.option = option; } }用法
javascript class
Claroja
02-03 177
ES6标准中 支持class语法创建对象 class Polygon { constructor(height, width) { this.area = height * width; } } console.log(new Polygon(4,3).area); 继承 语法 class name [extends] { // class body } class Po...
【JavaScript】Class 类
Superman_H的博客
09-06 196
# Class ES6 引入了 Class 这个概念，通过关键字 `class`，可以定义类 关键字 `class` 可以看作是构造函数的语法糖，`class` 的绝大部分功能都能通过构造函数实现 ## ES5 的构造函数 ```js // 通过构造函数设置实例属性 function Person(name) { this.name = name; }; // 为原型 Person.prototype 添加方法, 使得所有实例共享此方法 Person.prototype.sho
ES6 JavaScript 中的 Class 类继承详解
"ES6中的JavaScript Class类继承详解，包括基本用法、构造函数与super关键字的使用，以及对原型链的理解" 在ES6中，`Class`语法引入了一种新的面向对象编程的表达方式，使得类的继承更加简洁和直观。`Class`类继承...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值