Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list when using arrow functions as public field declarations (TC39 proposal) -- Safari #16

Open
Nashorn opened this issue Oct 8, 2020 · 0 comments
Labels
syntax wontfix This will not be worked on

Comments

@Nashorn
Copy link
Collaborator

Nashorn commented Oct 8, 2020

Safari 13 and below does not support public class field declarations on classes. Ex:

class T {
    foo = () => {
        //syntax error
    }
}

Copy and run that in Safaris console; will throw a syntax error:
"SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list."

See TC39 Proposal:
https://github.com/tc39/proposal-class-fields

Safari 14 beta does have support. Work around is to use ES6 working method syntax:

class T {
    foo() {
        //this works
    }
}

The benefit of arrow functions on classes is to preserve scope reference to [this] without having to .bind() your methods.
Example:

class T {
    constructor(){
        this.desc = "hello";
        document.addEventListener("click", this.foo)
    }
    foo() {
        alert(this.desc) // undefined
    }
}

Will alert undefined, because foo() will run in scope of document object which has no .desc property. But with arrow functions:

class T {
    constructor(){
        this.desc = "hello";
        document.addEventListener("click", this.foo)
    }
    foo =()=> {
        alert(this.desc) // "hello"
    }
}

WORK AROUND SOLUTION:

It works as you would expect. Now, to use the normal working method syntax and keep your reference to [this], you'll have to bind():

class T {
    constructor(){
        this.desc = "hello";
        document.addEventListener("click", this.foo.bind(this))
    }
    foo() {
        alert(this.desc) // "hello"
    }
}
@Nashorn Nashorn added the syntax label Oct 8, 2020
@Nashorn Nashorn changed the title Arrow functions and/or public fields declarations (TC39 proposal) not supported in Safari until v14 Arrow functions and/or public field declarations (TC39 proposal) not supported in Safari until v14 Oct 8, 2020
@Nashorn Nashorn changed the title Arrow functions and/or public field declarations (TC39 proposal) not supported in Safari until v14 SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list. Arrow functions and/or public field declarations (TC39 proposal) not supported in Safari until v14 Oct 8, 2020
@Nashorn Nashorn changed the title SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list. Arrow functions and/or public field declarations (TC39 proposal) not supported in Safari until v14 SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list when using arrow functions as public field declarations (TC39 proposal) -- Safari until v14 Oct 8, 2020
@Nashorn Nashorn changed the title SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list when using arrow functions as public field declarations (TC39 proposal) -- Safari until v14 SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list when using arrow functions as public field declarations (TC39 proposal) -- Safari Oct 8, 2020
@Nashorn Nashorn added the wontfix This will not be worked on label Nov 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
syntax wontfix This will not be worked on
Projects
None yet
Development

No branches or pull requests

1 participant