redux 函数调用后的花括号中的代码块

vhipe2zx  于 2023-08-05  发布在  其他
关注(0)|答案(4)|浏览(98)

我正在查看这段代码(Redux源代码中createStore实现的精简版本)

function createStore(reducer) {
    var state;
    var listeners = []

    function getState() {
        return state
    }

    function subscribe(listener) {
        listeners.push(listener)

        return unsubscribe() {
            var index = listeners.indexOf(listener)
            listeners.splice(index, 1)
        }
    }

    function dispatch(action) {
        state = reducer(state, action)
        listeners.forEach(listener => listener())
    }

    dispatch({})

    return { dispatch, subscribe, getState }
}

字符串
我的问题具体到下面的区块里面

function subscribe(listener)

return unsubscribe() {
   var index = listeners.indexOf(listener)
   listeners.splice(index, 1)
}


花括号中的部分

{
   var index = listeners.indexOf(listener)
   listeners.splice(index, 1)
}


该块是否会传递给unsubscribe()方法?和露比的积木有相似之处吗这在JavaScript中是如何工作的?

ia2d9nvy

ia2d9nvy1#

首先,你发布的代码有一些问题。createStore()函数的一个更好的简化版本是:

function createStore(reducer) {
  var listeners = [];

  function subscribe(listener) {
    listeners.push(listener);

    return function unsubscribe() {
      var index = listeners.indexOf(listener)
      listeners.splice(index, 1)
    };
  }

  return {subscribe};
}

字符串
请注意,您忘记了一些分号,并且(EDIT:但OP什么也没忘记。Redux skips semicolons to conform to React Router ESLintsubscribe()方法没有返回function unsubscribe(),而是返回unsubscribe()
现在,回答这个问题,this article是一个很好的讲座,说明了Ruby和JavaScript在这个主题上的差异。
Ruby方法不是函数或一等公民,因为它们不能作为参数传递给其他方法,不能被其他方法返回,也不能被赋值给变量。Ruby proc是一级的,类似于JavaScript的一级函数。
在JavaScript中,函数是真正的一等公民。它们可以像任何其他数据一样传递一轮。
在我们的示例中,createStore()函数返回一个对象,其中包含函数/方法subscribe()。它通过返回函数名(subscribe)来实现。同样,subscribe()也返回一个函数,但这次该函数的声明直接发生在return语句中。这两种方法都是传递函数的有效方法。
当您通过函数调用示例化createStore时,您将获得返回的对象。

var myObject = createStore("foo");


新对象的方法为subscribe()。如果调用该方法,将获得unsubscribe()函数。

var myFunction = myObject.subscribe("bar");


当然,你可以在一行中这样做:

var myFunction = createStore("foo").subscribe("bar");


在下面的代码片段中尝试一下:

function createStore(reducer) {
  var listeners = [];

  function subscribe(listener) {
    listeners.push(listener);

    return function unsubscribe() {
      var index = listeners.indexOf(listener)
      listeners.splice(index, 1)
    };
  }

  return {subscribe};
}

var myObject = createStore("foo");
console.log(myObject);  // print an object with the subscribe method.
var myFunction = myObject.subscribe("bar");
console.log(myFunction);  // print the unsubscribe function

console.log(createStore("foo").subscribe("bar"));


您可能还想了解MDN中的对象。

2hh7jdfx

2hh7jdfx2#

当你调用subscribe并传递给它一个监听器时,它会返回一个你可以在以后任何时候调用的函数。例如:

const {dispatch, subscribe, getState} = createStore(this.myReducer); 
// for demonstration purpose. Now you have references to the values createStore() returns;

const subscription = this.subscribe(this.listener)

字符串
现在,无论何时调用this.subscription(),它都会执行以下命令:

var index = listeners.indexOf(listener)
listeners.splice(index, 1)


其中listener保存在闭包中。

nbewdwxp

nbewdwxp3#

该代码块是subscribe方法返回的unsubscribe函数的一部分

2admgd59

2admgd594#

我也花了一些时间,找到它的语法定义,它是一个简写的对象方法定义,如下所述:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

const obj = {
  foo: function () {
    // …
  },
  bar: function () {
    // …
  },
};

字符串
您现在可以将其缩短为:

const obj = {
  foo() {
    // …
  },
  bar() {
    // …
  },
};

相关问题