标签: arrow-functions

当ES6箭头函数似乎不适用于使用prototype.object将函数赋值给对象时.请考虑以下示例:

function Animal(name, type){
 this.name = name;
  this.type = type;
  this.toString = () => `${this.name} is a ${this.type}`;

}
var myDog = new Animal('Max', 'Dog');
console.log(myDog.toString()); //Max is a Dog

在对象定义中显式使用箭头函数,但使用带有Object.prototype语法的箭头函数不会:

function Animal2(name, type){
  this.name = name;
  this.type = type;
}
Animal2.prototype.toString = () => `${this.name} is a ${this.type}`;

var myPet2 = new Animal2('Noah', 'cat');
console.log(myPet2.toString()); //is a undefined

正如概念验证一样,使用带有Object.prototype语法的Template字符串语法可以正常工作:

function Animal3(name, type){
  this.name = name;
  this.type = type;
}
Animal3.prototype.toString = function(){ return `${this.name} is a ${this.type}`;}

var myPet3 …

在抱怨function一遍又一遍地写关键字的动荡之后,我向某人询问了一个更简单的方法.该人说PHP将具有类似于es6的箭头函数语法.

const foo = (x, y) => {
    return x + y;
};

在我继续研究这个问题时,我无法在网上找到很多例子.

有合适口径的人可以解释一下吗？

在这一点上,我也非常感兴趣,这将如何适应PHP的OOP方面.

我正在尝试ES6,并希望在我的函数中包含一个属性,就像这样

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

person.shout() // Should print out my name is jason

但是,当我运行此代码控制台时只记录日志my name is.我究竟做错了什么？

除了常规功能和内置功能之外,还有一种优雅的方式可以告诉Harmony的纤细箭头功能吗？

在和谐维基指出:

箭头函数就像内置函数一样缺乏.prototype和任何[[Construct]]内部方法.所以new(()=> {})抛出一个TypeError,否则箭头就像函数一样

这意味着,您可以测试箭头功能,如:

!(()=>{}).hasOwnProperty("prototype") // true
!(function(){}).hasOwnProperty("prototype") // false

但是测试也将返回true任何内置函数,例如setTimeout或Math.min.

如果您获得源代码并检查它是否可以在Firefox中运行"native code",但它看起来不太可靠也不可移植(其他浏览器实现,NodeJS/iojs):

setTimeout.toSource().indexOf("[native code]") > -1

小的GitHub项目node-is-arrow-function依赖于函数源代码的RegExp检查,这不是那么整洁.

编辑:我尝试了一下JavaScript解析器橡子,看起来工作得很好 - 即使它太过分了.

acorn = require("./acorn");

function fn_sample(a,b){
    c = (d,e) => d-e;
    f = c(--a, b) * (b, a);
    return f;
}

function test(fn){
    fn = fn || fn_sample;
    try {
        acorn.parse("(" + fn.toString() + ")", {
            ecmaVersion: 6,
            onToken: function(token){ …

我想弄清楚为什么在对象文本的箭头函数被调用window为this.有人可以给我一些见解吗？

var arrowObject = {
  name: 'arrowObject',
  printName: () => {
    console.log(this);
  }
};

// Prints: Window {external: Object, chrome: Object ...}
arrowObject.printName();

一个按预期工作的对象:

var functionObject = {
  name: 'functionObject',
  printName: function() {
    console.log(this);
  }
};

// Prints: Object {name: "functionObject"}
functionObject.printName();

根据巴贝尔REPL的说法,他们被描述为

var arrowObject = {
  name: 'arrowObject',
  printName: function printName() {
    console.log(undefined);
  }
};

和

var functionObject = {
  name: 'functionObject',
  printName: function printName() {
    console.log(this);
  }
};

为什么没有arrowObject.printName();被arrowObject …

这个问题类似于使用React时最好使用胖箭头函数还是在构造函数中绑定函数？但有点不同.您可以this在构造函数中绑定函数,或者只在构造函数中应用箭头函数.请注意,我只能在项目中使用ES6语法.

1.

class Test extends React.Component{
  constructor(props) {
    super(props);

    this.doSomeThing = this.doSomeThing.bind(this);
  }

  doSomething() {}
}

2.

class Test extends React.Component{
  constructor(props) {
    super(props);

    this.doSomeThing = () => {};
  }
}

这两种方式的优点和缺点是什么？谢谢.

我现在对新反应挂钩 API 的用例以及你可以用它做什么感到非常惊讶.

在试验期间出现的一个问题是,在使用时总是创建一个新的处理函数以便抛弃它是多么昂贵useCallback.

考虑这个例子:

const MyCounter = ({initial}) => {
    const [count, setCount] = useState(initial);

    const increase = useCallback(() => setCount(count => count + 1), [setCount]);
    const decrease = useCallback(() => setCount(count => count > 0 ? count - 1 : 0), [setCount]);

    return (
        <div className="counter">
            <p>The count is {count}.</p>
            <button onClick={decrease} disabled={count === 0}> - </button>
            <button onClick={increase}> + </button>
        </div>
    );
};

虽然我将处理程序包装成一个useCallback以避免在每次渲染时传递一个新的处理程序,但仍然必须创建内联箭头函数,以便在大多数情况下抛弃它.

如果我只渲染一些组件,可能不是什么大问题.但如果我这样做了1000次,对性能的影响有多大？是否有明显的性能损失？什么是避免它的方法？可能是一个静态处理程序工厂,只有在必须创建新处理程序时才会调用它？

有人请解释以下内容:

我跟随丹阿布拉莫夫的讲座和做练习.

代码工作正常,但是当使用大括号编写以下特定函数时,测试失败**{ }**.

    case 'toggleTodo' :
        return (
            state.map( (one) => {
                oneTodo( one, action )
            })
        );

相同的代码工作正常,没有花括号.

    case 'toggleTodo' :
        return (
            state.map( (one) => 
                oneTodo( one, action )
            )
        );

这是JsBin.请参阅第31行.

我开始使用ES6胖箭头功能表示法,我非常喜欢它.但我对它的背景有点困惑.据我所知,关键字this fat arrow函数指的是函数当前运行的上下文.我想做一些简单的jQuery迭代,如:

$('ul#mylist > li').each(() => {
   $(this).addClass('some-class-name');
});

但显然这段代码不起作用.如何在胖箭头函数中引用此特定代码中的当前"LI"元素？

我想把我的javascript代码"更新"到新的ES6标准,所以我看看现在如何编写函数并在我的全局函数上试用它,在"旧"es5中读取如下所示

function logMessage(message) {
    document.getElementById("logs").innerHTML = document.getElementById("logs").innerHTML + `<li  class="item-padding">  ${message} </li>`
}

现在,如果我没错,es6的正确"转换"将是这样的:

logMessage = message => {
    etc
}

但我的ESLint告诉我,我的logMessage没有定义,我的控制台出错了,我错过了什么吗？我必须在logMessage之前声明var,let或const吗？

我不知道它是否重要,但我也想将这个函数从文件One导出到文件二,并在文件二中的另一个函数中使用函数logMessage,这样做有什么我必须记住的吗？

谢谢你的帮助!

编辑:谢谢大家的答案帮了我很多,我的问题解决了!