一、函数之 JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
</head>
<body>
  <button id="btn1">click one</button>
  <button id="btn2">click two</button>
  <script>

    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");

    btn1.onclick = fn

    btn2.onclick = fn()

    function fn(){
      console.log(333);

      return (function f(){
          console.log("hello world")

      }).bind(this)
    }
  </script>
<body>
<html>

执行上述代码后：

第一个 button 没有任何打印，当点击该按钮时，打印：333；

第二个 button 打印 333，当点击该按钮时，继续打印：hello world

二、函数之 Vue

<template>
    <div>
        <button @click="handleClick">Click Me</button>
        <button @click="handleClick()">Click Me</button>
    </div>
</template>
<script>
export default {
    methods: {
        handleClick () {
            console.log(333)

            return () => {
                console.log("hello world")
            }
        }
    }
}
</script>

执行上述代码后，没有任何打印，当点击这两个button时，结果都一样：hello world。

三、函数之 React+JSX

import { Component } from 'react'

class Test extends Component {

  const handlerClick = () => {
    console.log(333)

    return () => {
      console.log("hello world");

    }
  }
  render () {

    return (
      this.state.list.map((item, idx) => {

        return (
          <button onClick="this.handlerClick">click me</button>
          <button onClick="this.handlerClick()">click me</button>
        );
      })
    );
  }
}
export default Test;

执行上述代码后：

第一个 button 没有任何打印，当点击该按钮时，打印：333；

第二个 button 打印 333，当点击该按钮时，继续打印：hello world

【总结】综上所述：

JavaScript 和 React+JSX 里的函数执行结果一致：

直接写一个函数名，执行函数体内 return 之前的代码；
在函数名后写（）调用函数，先执行函数体内 return 之前的代码，然后，执行 return 后的代码。

Vue 里的函数：

直接写一个函数名或者在函数名后写（）调用函数，都是只执行 return 后的代码。

函数之JavaScript、Vue 与 React+JSX

一、函数之 JavaScript

二、函数之 Vue

三、函数之 React+JSX

猜你喜欢