JavaScript ES6中class定义类的方法有哪些

发布时间：2022-07-08 13:43:12 作者：iii
来源：亿速云阅读：307

JavaScript ES6中class定义类的方法有哪些

JavaScript ES6引入了class关键字，使得面向对象编程更加直观和易于理解。通过class，开发者可以更方便地定义类和创建对象。本文将详细介绍在ES6中如何使用class定义类，并探讨类中定义方法的多种方式。

1. 基本语法

在ES6中，使用class关键字可以定义一个类。类的基本语法如下：

class MyClass {
  // 构造函数
  constructor() {
    // 初始化属性
  }

  // 方法
  myMethod() {
    // 方法体
  }
}

1.1 构造函数

constructor方法是类的构造函数，用于初始化对象的属性。当使用new关键字创建类的实例时，constructor方法会自动调用。

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

const person = new Person('Alice', 30);
console.log(person.name); // 输出: Alice
console.log(person.age);  // 输出: 30

1.2 实例方法

实例方法是定义在类中的方法，可以通过类的实例来调用。实例方法可以访问类的实例属性。

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person = new Person('Alice', 30);
person.greet(); // 输出: Hello, my name is Alice and I am 30 years old.

2. 静态方法

静态方法是定义在类本身上的方法，而不是类的实例上。静态方法通常用于执行与类相关的操作，而不是与类的实例相关的操作。静态方法使用static关键字定义。

class MathUtils {
  static add(a, b) {
    return a + b;
  }

  static subtract(a, b) {
    return a - b;
  }
}

console.log(MathUtils.add(5, 3));      // 输出: 8
console.log(MathUtils.subtract(5, 3)); // 输出: 2

静态方法不能通过类的实例调用，只能通过类本身调用。

const math = new MathUtils();
// math.add(5, 3); // 报错: math.add is not a function

3. Getter 和 Setter 方法

Getter和Setter方法用于定义类的属性的读取和写入操作。Getter方法用于获取属性的值，Setter方法用于设置属性的值。Getter和Setter方法使用get和set关键字定义。

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

  get name() {
    return this._name;
  }

  set name(newName) {
    this._name = newName;
  }

  get age() {
    return this._age;
  }

  set age(newAge) {
    if (newAge > 0) {
      this._age = newAge;
    } else {
      console.log('Age must be a positive number.');
    }
  }
}

const person = new Person('Alice', 30);
console.log(person.name); // 输出: Alice
person.name = 'Bob';
console.log(person.name); // 输出: Bob

console.log(person.age); // 输出: 30
person.age = -5; // 输出: Age must be a positive number.
console.log(person.age); // 输出: 30

4. 私有方法和属性

在ES6中，并没有直接支持私有方法和属性的语法。然而，可以通过一些约定或使用Symbol和WeakMap来实现类似的效果。

4.1 使用命名约定

一种常见的做法是使用下划线_作为前缀来表示私有属性和方法。

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

  _privateMethod() {
    console.log('This is a private method.');
  }

  greet() {
    this._privateMethod();
    console.log(`Hello, my name is ${this._name}.`);
  }
}

const person = new Person('Alice', 30);
person.greet(); // 输出: This is a private method. Hello, my name is Alice.
// person._privateMethod(); // 仍然可以访问，但约定上不推荐

4.2 使用Symbol

Symbol是ES6引入的一种新的原始数据类型，可以用作对象的唯一键。通过将属性键设置为Symbol，可以实现私有属性。

const _name = Symbol('name');
const _age = Symbol('age');

class Person {
  constructor(name, age) {
    this[_name] = name;
    this[_age] = age;
  }

  greet() {
    console.log(`Hello, my name is ${this[_name]}.`);
  }
}

const person = new Person('Alice', 30);
person.greet(); // 输出: Hello, my name is Alice.
console.log(person[_name]); // 输出: Alice
// console.log(person.name); // 输出: undefined

4.3 使用WeakMap

WeakMap是ES6引入的一种新的数据结构，用于存储键值对，其中键必须是对象。通过将私有属性存储在WeakMap中，可以实现真正的私有属性。

const privateProps = new WeakMap();

class Person {
  constructor(name, age) {
    privateProps.set(this, { name, age });
  }

  greet() {
    const { name } = privateProps.get(this);
    console.log(`Hello, my name is ${name}.`);
  }
}

const person = new Person('Alice', 30);
person.greet(); // 输出: Hello, my name is Alice.
// console.log(person.name); // 输出: undefined

5. 继承

ES6中的class支持继承，通过extends关键字可以实现类的继承。子类可以继承父类的属性和方法，并且可以重写父类的方法。

class Animal {
  constructor(name) {
    this.name = name;
  }

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数
    this.breed = breed;
  }

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

const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // 输出: Rex barks.

5.1 调用父类方法

在子类中，可以通过super关键字调用父类的方法。

class Animal {
  constructor(name) {
    this.name = name;
  }

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

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  speak() {
    super.speak(); // 调用父类的speak方法
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // 输出: Rex makes a noise. Rex barks.

6. 类的静态属性和实例属性

ES6中的class支持定义静态属性和实例属性。静态属性是类本身的属性，而实例属性是类的实例的属性。

6.1 静态属性

静态属性使用static关键字定义。

class MyClass {
  static myStaticProperty = 'static value';

  static myStaticMethod() {
    console.log('This is a static method.');
  }
}

console.log(MyClass.myStaticProperty); // 输出: static value
MyClass.myStaticMethod(); // 输出: This is a static method.

6.2 实例属性

实例属性可以在构造函数中定义，也可以在类的主体中直接定义。

class MyClass {
  myInstanceProperty = 'instance value';

  constructor() {
    this.anotherInstanceProperty = 'another instance value';
  }

  myInstanceMethod() {
    console.log(this.myInstanceProperty);
  }
}

const instance = new MyClass();
console.log(instance.myInstanceProperty); // 输出: instance value
console.log(instance.anotherInstanceProperty); // 输出: another instance value
instance.myInstanceMethod(); // 输出: instance value

7. 类的表达式

除了使用class声明类外，还可以使用类表达式来定义类。类表达式可以是匿名的，也可以是有名的。

// 匿名类表达式
const MyClass = class {
  constructor() {
    this.name = 'Anonymous';
  }
};

const instance = new MyClass();
console.log(instance.name); // 输出: Anonymous

// 有名类表达式
const MyNamedClass = class NamedClass {
  constructor() {
    this.name = 'Named';
  }
};

const namedInstance = new MyNamedClass();
console.log(namedInstance.name); // 输出: Named

8. 类的混入（Mixin）

混入是一种将多个类的功能组合到一个类中的技术。在ES6中，可以通过函数来实现混入。

const Mixin1 = (Base) => class extends Base {
  method1() {
    console.log('Method 1');
  }
};

const Mixin2 = (Base) => class extends Base {
  method2() {
    console.log('Method 2');
  }
};

class MyClass extends Mixin1(Mixin2(Object)) {
  method3() {
    console.log('Method 3');
  }
}

const instance = new MyClass();
instance.method1(); // 输出: Method 1
instance.method2(); // 输出: Method 2
instance.method3(); // 输出: Method 3

9. 类的装饰器

装饰器是一种特殊类型的声明，可以附加到类声明、方法、访问器、属性或参数上。装饰器使用@符号表示，通常用于修改或扩展类的行为。

function log(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with`, args);
    return original.apply(this, args);
  };
  return descriptor;
}

class MyClass {
  @log
  myMethod(a, b) {
    return a + b;
  }
}

const instance = new MyClass();
instance.myMethod(1, 2); // 输出: Calling myMethod with [1, 2]

10. 类的Symbol.species属性

Symbol.species是一个内置的Symbol值，用于指定创建派生对象时使用的构造函数。通过重写Symbol.species属性，可以控制派生对象的类型。

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}

const myArray = new MyArray(1, 2, 3);
const mappedArray = myArray.map(x => x * 2);

console.log(mappedArray instanceof MyArray); // 输出: false
console.log(mappedArray instanceof Array);   // 输出: true

11. 类的Symbol.iterator属性

Symbol.iterator是一个内置的Symbol值，用于定义对象的默认迭代器。通过实现Symbol.iterator方法，可以使类成为可迭代对象。

class MyIterable {
  constructor(data) {
    this.data = data;
  }

  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
}

const iterable = new MyIterable([1, 2, 3]);
for (const value of iterable) {
  console.log(value); // 输出: 1, 2, 3
}

12. 类的Symbol.toStringTag属性

Symbol.toStringTag是一个内置的Symbol值，用于定义对象的默认字符串描述。通过重写Symbol.toStringTag属性，可以自定义对象的toString方法的输出。

class MyClass {
  get [Symbol.toStringTag]() {
    return 'MyClass';
  }
}

const instance = new MyClass();
console.log(instance.toString()); // 输出: [object MyClass]

13. 类的Symbol.hasInstance属性

Symbol.hasInstance是一个内置的Symbol值，用于定义对象的instanceof操作符的行为。通过重写Symbol.hasInstance属性，可以自定义instanceof操作符的逻辑。

class MyClass {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

const instance = [];
console.log(instance instanceof MyClass); // 输出: true

14. 类的Symbol.toPrimitive属性

Symbol.toPrimitive是一个内置的Symbol值，用于定义对象在转换为原始值时的行为。通过重写Symbol.toPrimitive属性，可以自定义对象的类型转换逻辑。

class MyClass {
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') {
      return 42;
    }
    if (hint === 'string') {
      return 'MyClass';
    }
    return true;
  }
}

const instance = new MyClass();
console.log(+instance); // 输出: 42
console.log(`${instance}`); // 输出: MyClass
console.log(instance == true); // 输出: true

15. 类的Symbol.match属性

Symbol.match是一个内置的Symbol值，用于定义对象的match方法的行为。通过重写Symbol.match属性，可以自定义对象的match方法的逻辑。

class MyMatcher {
  [Symbol.match](string) {
    return string.indexOf('match') !== -1;
  }
}

const matcher = new MyMatcher();
console.log('match me'.match(matcher)); // 输出: true
console.log('no match'.match(matcher)); // 输出: false

16. 类的Symbol.replace属性

Symbol.replace是一个内置的Symbol值，用于定义对象的replace方法的行为。通过重写Symbol.replace属性，可以自定义对象的replace方法的逻辑。

class MyReplacer {
  [Symbol.replace](string, replacement) {
    return string.replace(/foo/g, replacement);
  }
}

const replacer = new MyReplacer();
console.log('foo bar foo'.replace(replacer, 'baz')); // 输出: baz bar baz

17. 类的Symbol.search属性

Symbol.search是一个内置的Symbol值，用于定义对象的search方法的行为。通过重写Symbol.search属性，可以自定义对象的search方法的逻辑。

class MySearcher {
  [Symbol.search](string) {
    return string.indexOf('search') !== -1 ? 0 : -1;
  }
}

const searcher = new MySearcher();
console.log('search me'.search(searcher)); // 输出: 0
console.log('no search'.search(searcher)); // 输出: -1

18. 类的Symbol.split属性

Symbol.split是一个内置的Symbol值，用于定义对象的split方法的行为。通过重写Symbol.split属性，可以自定义对象的split方法的逻辑。

class MySplitter {
  [Symbol.split](string) {
    return string.split(' ');
  }
}

const splitter = new MySplitter();
console.log('split me'.split(splitter)); // 输出: ['split', 'me']

19. 类的Symbol.isConcatSpreadable属性

Symbol.isConcatSpreadable是一个内置的Symbol值，用于定义对象在concat方法中的行为。通过重写Symbol.isConcatSpreadable属性，可以控制对象在concat方法中是否展开。

class MyArrayLike {
  constructor(data) {
    this.data = data;
  }

  get [Symbol.isConcatSpreadable]() {
    return true;
  }
}

const arrayLike = new MyArrayLike([1, 2, 3]);
console.log([].concat(arrayLike)); // 输出: [1, 2, 3]

20. 类的Symbol.unscopables属性

Symbol.unscopables是一个内置的Symbol值，用于定义对象在with语句中的行为。通过重写Symbol.unscopables属性，可以控制对象在with语句中是否可访问。

class MyClass {
  foo() {
    console.log('foo');
  }

  bar() {
    console.log('bar');
  }

  get [Symbol.unscopables]() {
    return { foo: true };
  }
}

const instance = new MyClass();
with (instance) {
  bar(); // 输出: bar
  // foo(); // 报错: foo is not defined
}

21. 类的Symbol.species属性

Symbol.species是一个内置的Symbol值，用于指定创建派生对象时使用的构造函数。通过重写Symbol.species属性，可以控制派生对象的类型。

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}

const myArray = new MyArray(1, 2, 3);
const mappedArray = myArray.map(x => x * 2);

console.log(mappedArray instanceof MyArray); // 输出: false
console.log(mappedArray instanceof Array);   // 输出: true

22. 类的Symbol.iterator属性

Symbol.iterator是一个内置的Symbol值，用于定义对象的默认迭代器。通过实现Symbol.iterator方法，可以使类成为可迭代对象。

class MyIterable {
  constructor(data) {
    this.data = data;
  }

  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.data.length) {
          return { value: this.data[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
}

const iterable = new MyIterable([1, 2, 3]);
for (const value of iterable) {
  console.log(value); // 输出: 1, 2, 3
}

23. 类的Symbol.toStringTag属性

Symbol.toStringTag是一个内置的Symbol值

JavaScript ES6中class定义类的方法有哪些

JavaScript ES6中class定义类的方法有哪些

1. 基本语法

1.1 构造函数

1.2 实例方法

2. 静态方法

3. Getter 和 Setter 方法

4. 私有方法和属性

4.1 使用命名约定

4.2 使用Symbol

4.3 使用WeakMap

5. 继承

5.1 调用父类方法

6. 类的静态属性和实例属性

6.1 静态属性

6.2 实例属性

7. 类的表达式

8. 类的混入（Mixin）

9. 类的装饰器

10. 类的Symbol.species属性

11. 类的Symbol.iterator属性

12. 类的Symbol.toStringTag属性

13. 类的Symbol.hasInstance属性

14. 类的Symbol.toPrimitive属性

15. 类的Symbol.match属性

16. 类的Symbol.replace属性

17. 类的Symbol.search属性

18. 类的Symbol.split属性

19. 类的Symbol.isConcatSpreadable属性

20. 类的Symbol.unscopables属性

21. 类的Symbol.species属性

22. 类的Symbol.iterator属性

23. 类的Symbol.toStringTag属性

相关阅读