Javascript Girl
  1. Javascript Girl
  3. Qu'est-ce que le symbole symbole fait dans ES6 javascript? (ECMAScript 2015)
Intereting Posts
Fermetures d'JavaScript – À l'aide de la spécification ECMA, expliquez comment la fermeture est créée et maintenue Comment ajouter code el code ou jstl via javascript Ajout d'un auditeur d'événements croisé navigateur Ajax – Je dois vérifier si une session valide existe avant chaque demande AJAX L'ajout d'un attribut de style sur l'élément Réactif personnalisé ne semble pas reprendre Détection d'URL avec JavaScript Impossible de se connecter à MySQL avec Sequelize Javascript – alert ("zoo"> "house") renvoie vrai Jquery -Get Valeurs de propriétés CSS pour une classe non encore appliquée Quelle est l'utilisation de l'ajout d'une chaîne vide dans une instruction javascript Event.observe les événements «changement» qui ne sont pas déclenchés dans IE Comment présenter de manière sécurisée un score élevé dans un jeu de base pour empêcher le détournement de poste Pourquoi PassportJS dans Node ne supprime pas la session lors de la connexion Spécifiez l'élément <tbody> d'une table HTML en tant que région dans Marionette pour Backbone.js Comment les robots d'exploration Web traitent-ils le javascript

Qu'est-ce que le symbole symbole fait dans ES6 javascript? (ECMAScript 2015)

Je regarde un code ES6 et je ne comprends pas ce que le symbole @ fait quand il est placé devant une variable. La chose la plus proche que j'ai pu trouver a quelque chose à voir avec les champs privés?

Le code que je regardais à partir de la bibliothèque redux : 

import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'redux/react'; import Counter from '../components/Counter'; import * as CounterActions from '../actions/CounterActions'; @connect(state => ({ counter: state.counter })) export default class CounterApp extends Component { render() { const { counter, dispatch } = this.props; return ( <Counter counter={counter} {...bindActionCreators(CounterActions, dispatch)} /> ); } }

Voici une publication sur le blog que j'ai trouvé sur le sujet: https://github.com/zenparsing/es-private-fields

Dans cette publication de blog, tous les exemples sont dans le contexte d'une classe: qu'est-ce que cela veut dire lorsque le symbole est utilisé dans un module?

    C'est un décorateur . C'est une proposition à ajouter à ECMAScript. Il existe plusieurs exemples équivalents ES6 et ES5 sur: https://github.com/wycats/javascript-decorators

    Les décorateurs modifient dynamiquement la fonctionnalité d'une fonction, d'une méthode ou d'une classe sans avoir à utiliser directement des sous-classes ou modifier le code source de la fonction à décorer.

    Ils sont couramment utilisés pour contrôler l'accès, l'enregistrement, l'annotation.

    J'ai trouvé que la réponse acceptée n'était pas suffisante pour m'aider à régler le problème, alors j'ajoute un peu plus de détails pour aider ceux qui le trouvent.

    Le problème est qu'il n'est pas clair exactement ce qu'est le décorateur. Le décorateur dans l'exemple donné n'est pas seulement le symbole @ , c'est la fonction @connect . Autrement dit, la fonction @connect est la décoration de la classe CounterApp .

    Et qu'est-ce qu'il fait dans ce cas? Il relie la valeur state.counter aux accessoires de la classe. Rappelez-vous que dans redux, la fonction de connect prend deux arguments: mapStateToProps et mapDispatchToProps . Dans cet exemple, il ne prend qu'un seul argument – mapStateToProps .

    Je n'ai pas trop étudié cela, mais cela semble être un moyen d'encapsuler vos mappages d'état-à-pièces et de répartition, de sorte qu'ils accompagnent vos composants plutôt que d'être situés dans un fichier différent.