Compartir tecnología

Resumen de clase ES6 (9)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

La clase en ES6 es un azúcar sintáctico para la programación orientada a objetos, que proporciona una forma concisa de definir la estructura y el comportamiento de los objetos.

En el lenguaje JavaScript, la forma tradicional de generar objetos de instancia es mediante constructores. A continuación se muestra un ejemplo.

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Básicamente, la clase ES6 puede considerarse simplemente como un azúcar sintáctico. La mayoría de sus funciones se pueden lograr con ES5. El nuevo método de escritura de clases solo hace que el método de escritura del prototipo de objeto sea más claro y más parecido a la sintaxis de la programación orientada a objetos. El código anterior se reescribe utilizando clases ES6, de la siguiente manera:

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Las clases de ES6 pueden considerarse como otra forma de escribir constructores:

class Point {
  // ...
}
typeof Point // "function"
Point === Point.prototype.constructor // true

----------------------------------------------------------------------------
class Point {
  constructor() {
    // ...
  }
  toString() {
    // ...
  }
  toValue() {
    // ...
  }
}
// 等同于
Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

Principales características:

1. Sintaxis declarativa: Utilice la palabra clave class para declarar una clase.
2. Constructor: Utilice el método constructor para inicializar una instancia de clase.
3. Métodos de instancia: Un método común definido dentro de una clase, utilícelo para acceder a las propiedades de la instancia.
4. Métodos estáticos: Se define mediante la palabra clave estática y no depende de la instancia de la clase.
5. Propiedades de instancia: Inicializar en el constructor o utilizar la sintaxis de declaración de campo (actualmente una propuesta de Etapa 3).
6. Herencia: Implementado usando la palabra clave extends.
7. súper palabra clave: Llame al constructor o método de la clase principal en el constructor de la subclase.
8. captador y definidor: Utilice get y set para definir descriptores de acceso para propiedades.
9. Propiedades y métodos privados.: Utilice # para definir propiedades y métodos privados (actualmente una propuesta de Etapa 3).

1. Definición e instanciación de clases básicas

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

    toString() {
        return `Point(${this.x}, ${this.y})`;
    }
}

let point = new Point(10, 20);
console.log(point.toString()); // 输出: Point(10, 20)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

2. Métodos y propiedades estáticos.

class MathUtils {
	constructor() {
    	console.log(MyClass.myStaticProp); // 42
    }
    static add(a, b) {
        return a + b;
    }
    static myStaticProp = 42;
}

console.log(MathUtils.add(1, 2)); // 输出: 3

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

3. Herencia y super

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

    area() {
        return this.width * this.height;
    }
}

class Square extends Rectangle {
    constructor(sideLength) {
        super(sideLength, sideLength);
    }
}

let square = new Square(5);
console.log(square.area()); // 输出: 25

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

4. captador y definidor

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

    get area() {
        return this.width * this.height;
    }

    set width(newWidth) {
        if (newWidth > 0) {
            this.width = newWidth;
        } else {
            console.log("Width must be positive.");
        }
    }
}

let rect = new Rectangle(4, 5);
console.log(rect.area); // 输出: 20
rect.width = -10; // 输出: Width must be positive.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

notas sobre las clases

(1) modo estricto

Internamente, las clases y módulos están en modo estricto de forma predeterminada, por lo que no es necesario utilizar estricto para especificar el modo de ejecución. Siempre que su código esté escrito en una clase o módulo, solo estará disponible el modo estricto. Teniendo en cuenta que todo el código futuro se ejecutará en módulos, ES6 en realidad actualiza todo el lenguaje al modo estricto.

(2) No hay promoción

Las clases no tienen elevación variable (polipasto), lo cual es completamente diferente de ES5.

new Foo(); // ReferenceError
class Foo {}

//不会报错
//因为 Bar 继承 Foo 的时候， Foo 已经有定义了。
//但是，如果存在 class 的提升，上面代码就会报错，
//因为 class 会被提升到代码头部，而 let 命令是不提升的，
//所以导致 Bar 继承 Foo 的时候， Foo 还没有定义。
{
  let Foo = class {};
  class Bar extends Foo {
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

(3) atributo de nombre

Dado que, en esencia, una clase ES6 es solo un contenedor para el constructor de ES5, la clase hereda muchas características de la función, incluido el atributo de nombre.

class Point {}
Point.name // "Point"
//name 属性总是返回紧跟在 class 关键字后面的类名。

  • 1
  • 2
  • 3

(4)Método generador

Si un método está precedido por un asterisco (*), significa que el método es una función Generador.

class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}
for (let x of new Foo('hello', 'world')) {
  console.log(x);
}
// hello
// world

//Foo 类的 Symbol.iterator 方法前有一个星号，表示该方法是一个 Generator 函数。 
//Symbol.iterator 方法返回一个 Foo 类的默认遍历器， for...of 循环会自动调用这个遍历器。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

(5) El punto de este

Si un método de clase contiene esto, apunta a una instancia de la clase de forma predeterminada. Sin embargo, debes tener mucho cuidado, ya que este método puede causar errores si se usa solo.

class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`);
  }
  print(text) {
    console.log(text);
  }
}
const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Evite usar esto, vincule esto en el constructor:

class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }
  // ...
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Evite usar esto, use funciones de flecha:

class Obj {
  constructor() {
    this.getThis = () => this;
  }
}
const myObj = new Obj();
myObj.getThis() === myObj // true

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Evite usar esto, use Proxy

function selfish (target) {
  const cache = new WeakMap();
  const handler = {
    get (target, key) {
      const value = Reflect.get(target, key);
      if (typeof value !== 'function') {
        return value;
      }
      if (!cache.has(value)) {
        cache.set(value, value.bind(target));
      }
      return cache.get(value);
    }
  };
  const proxy = new Proxy(target, handler);
  return proxy;
}
const logger = selfish(new Logger());

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

Perfil personal

Se ha dedicado a la investigación de tecnología durante más de 30 años y domina varios lenguajes como java, linux, javascript, php, css, etc. Ha realizado muchas contribuciones en el campo del código abierto. Estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.

Mi informacion de contacto

Correo