javascript - 對react傳參的困惑

Question

在看draft-js給的例子，出現了困惑。

平常傳參我都是直接

xxx={(ev, arg1, arg2,……) => {this.xxx(ev, arg1, arg2,……)}

官方給出的快速開始範例

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

想知道editorState參數是怎麼傳給onChange這個函數的？
我試了

this.onChange = (editorState) => {
    var length = arguments.length;
    console.log('change');
    for (var i = 0; i < length; i++) {
        if (arguments[i] == editorState) {
            console.log(i);
        }
    }
    this.setState({editorState})
};

arguments中並沒有editorState參數。而如果直接輸出是有的

this.onChange = (editorState) => {
    console.log(editorState);
    this.setState({editorState})
};

為什麼呢？

Answer 1

箭頭函數並不會建立新的 函數作用域, 所以 不會建構新的 this, 不能使用 arguments.

所以,題主寫的測驗 arguments 其實不是你想要的 "arguments"

參考中文:
http://es6.ruanyifeng.com/#do...
箭頭函數有幾個使用注意點。

（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
（2）不可以當作建構函數，也就是說，不可以使用new指令，否則會拋出錯誤。
（3）不可以使用arguments對象，該對像在函數體內不存在。如果要用，可以用Rest參數代替。
（4）不可以使用yield指令，因此箭頭函數不能用作Generator函數。

demo online: http://jsbin.com/yuforakeso/e...
demo:

function foo () {
  const bar = function bar (arg1) {
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`bar arg1:${arg1}`)
  }
  
  bar('barArg');
  
  const fooArguments = arguments;
  
  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    if(fooArguments === arguments) {
      console.log('Arrow Functions not have arguments');
    }
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');
}

foo()

Answer 2

_update(editorState: EditorState): void {
    this._latestEditorState = editorState;
    this.props.onChange(editorState);
}

這是Editor元件的一段原始碼，是這個元件傳回來了你所要的參數。

Answer 3

你平常的寫法是在標籤裡的寫法，即{}內用js語法來解釋
快速例子裡的才是正常的寫法
=>符號構建的函數的arguments跟function構建的函數的arguments是不一樣的，你可以直接輸出arguments看是什麼東西

Answer 4

自己總結了下。

把theone1006的函數改造下

function foo () {
  const bar = function bar (arg1) {
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`bar arg1:${arg1}`)
  }
  
  bar('barArg');
  
  const fooArguments = arguments;
  
  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    if(fooArguments === arguments) {
      console.log('Arrow Functions not have arguments');
    }
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');
}

foo('test');

可以發現baz的arguments就是foo的arguments。
如果把baz函數單獨提出

  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');

是會提示arguments is not defined的。

而後我試了

    constructor(props) {
        super(props);
        console.log(arguments);
        this.handleClick = (a, b, c) => {
            console.log(a);
            console.log(b);
            console.log(c);
            console.log('..............');
            console.log(arguments);
        }        
    }
    render() {
        return (
            <p>
                <p onClick={(event) => this.handleClick(event)}>111</p>
            </p>
        );
    }

看出handleClick的arguments就是constructor的arguments。參數a, b, c和arguments不一致。

最後根據chhu1的答案，知道了參數是從哪裡來的。