es6-class

问题 This question already has answers here : Should I write methods as arrow functions in Angular's class (3 answers) Arrow vs classic method in ES6 class (1 answer) Closed last year . class App extends Component { constructor(props) { ... } onChange = (e) => this.setState({term: e.target.value}) onSubmit(e){ e.preventDefault(); const api_key = "C1hha1quJAQZf2JUlK"; const url = `http://api.giphy.com/v1/gifs/search?q=${this.state.term}&api_key=${api_key}`; } render() { return ( <div> <form

问题 How come in React you can define state like below: class Test extends React.Component { state = { foo: 'bar' } } But in order to define other instance properties you need to do it in the constructor or other functions? As in, you can't do this: class Test extends React.Component { myField = 0; render() { myField++ } } 回答1: You can do this.myField++ . Though syntax is wrong since you must return something from render like: class Test extends React.Component { myField = 0; render() { return

问题 I have some ES6 class inherited from Array : class Cache extends Array { add(item) { if(!item.doNotRemove) this.push(item) } printLast() { if(this.length > 0) console.log(this[this.length - 1].text) } } The following code works fine const myCache = new Cache() myCache.add({text: 'hello'}) myCache.add({text: 'world'}) myCache.add({text: '!!!', doNotRemove: true}) myCache.printLast() // world But I can't transpile it to ES5 with Babel (I know there is an issue), and currently as a workaround I

问题 The Udacity ES6 training has a question about overriding a base class constructor. I've got a solution but Udacity doesn't let me get away with it. The assignment is: Create a Bicycle subclass that extends the Vehicle class. The Bicycle subclass should override Vehicle's constructor function by changing the default values for wheels from 4 to 2 and horn from 'beep beep' to 'honk honk'. class Vehicle { constructor(color = 'blue', wheels = 4, horn = 'beep beep') { this.color = color; this

问题 I'm in a weird situation that i need to instantiate a new Class with a string stored in a variable but even i'm sure the class name is correct i get an error that given class name is not a constructor Here is a dummy code that doesn't work: class Foo { constructor(){ console.log('Foo!'); } }; const foo = 'Foo'; const bar = new window[foo](); console.log(bar); This trow this error: Uncaught TypeError: window[foo] is not a constructor 回答1: One possibility is to use eval . class Foo {

问题 I am trying to fit my website to all well known browsers In all browsers my JavaScript code is working, but not in Safari. I get next error in Safari: "SyntaxError: Use of reserved word 'class'" my code is look like: class _MontInit { constructor() {} sendXMLHTTPRequest(url, data, method, callback, error) { var xmlHTTP = new XMLHttpRequest(); // new HttpRequest instance xmlHTTP.open(method, url); xmlHTTP.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');

问题 I am trying to set an eslint rule for methods in class that are never used. Like in the following react component I have a method unUsedMethod which is never used, but eslint does not show an error for it. class Sample extends Component { unUsedMethod() { console.log('I am never used'); } render() { return 'Hello!'; } } My eslint file looks like this { "parser": "babel-eslint", "env": { "browser": true, "es6": true, "node": true }, "extends": ["eslint:recommended", "plugin:react/recommended"]

问题 class TestObject { constructor(value) { if (value === null || value === undefined) { throw new Error('Expect a value!'); } } } describe('test the constructor', () => { test('it works', () => { expect(() => { new TestObject(); }).toThrow(); }); test('not work', () => { expect(new TestObject()).toThrow(); }); }); 2 Test cases here, one works and the other not. The failing message for the not work one is as the following: ● test the constructor › not work Expect a value! at new TestObject (tests

问题 I have a simple ES6 class, like so: class Ring extends Array { insert (item, index) { this.splice(index, 0, item); return this; } } I want to make it so that the indexing for Ring objects wraps, so that new Ring(1, 2, 3)[3] returns 1, new Ring(1, 2, 3)[-1] returns 3, and so on. Is this possible in ES6? If so, how would I implement it? I've read about proxies, which allow a completely customized getter, but I can't figure out how to apply a proxy to a class. I did manage this: var myRing = new

问题 I am refactoring an es6 class based React component that uses the normal constructor, and then binds methods, and defines state/attributes within that constructor. Something like this: class MySpecialComponent extends React.Component { constructor(props) { super(props) this.state = { thing: true } this.myMethod = this.myMethod.bind(this) this.myAttribute = { amazing: false } } myMethod(e) { this.setState({ thing: e.target.value }) } } I want to refactor this so that I am autobinding the