Javascript 中的 function foo(){} 和 foo: function(){} 有什么區別？

Question

所以我正在查看一段代碼，我注意到了這一點：

clickNext: function(e) {
            var cal = $(e.target).parents('.drp-calendar');
            if (cal.hasClass('left')) {
                this.leftCalendar.month.add(1, 'month');
            } else {
                this.rightCalendar.month.add(1, 'month');
                if (this.linkedCalendars)
                    this.leftCalendar.month.add(1, 'month');
            }
            this.updateCalendars();
},

這和這個一樣嗎？

function clickNext(e) {
            var cal = $(e.target).parents('.drp-calendar');
            if (cal.hasClass('left')) {
                this.leftCalendar.month.add(1, 'month');
            } else {
                this.rightCalendar.month.add(1, 'month');
                if (this.linkedCalendars)
                    this.leftCalendar.month.add(1, 'month');
            }
            this.updateCalendars();
},

我以前沒有見過那種函數聲明，我很困惑，因為我嘗試更改上面的下面的代碼並且代碼停止工作。

Answer 1

您可以通過兩種方式編寫函數：作為命名函數或作為具有匿名函數值的變量：

var fooBoo = function () {};
function fooBoo(){}

調用它是相同的： fooBoo() 。

---

從您的示例中，您似乎有一個具有以下功能的鍵的對象：

var myObj = {
    fooBar: function () {}
}

現在在這種情況下你不能用function fooBar(){}替換它，因為它最終會出現錯誤的語法：

// NOT VALID!
var myObj = {
    function fooBar() {}
}

Answer 2

它是一個對象屬性聲明：

const thing = {
   clickNext: function(e) {
            ...
   }
}

thing.clickNext()

它的對象字面量語法如下：

const person = {
  name: "Jane",
  age: 33
}

Answer 3

它們不是相同的東西。

// this cannot be in itself
clickNext: function(e) {
  var cal = $(e.target).parents('.drp-calendar');
  if (cal.hasClass('left')) {
    this.leftCalendar.month.add(1, 'month');
  } else {
    this.rightCalendar.month.add(1, 'month');
    if (this.linkedCalendars)
      this.leftCalendar.month.add(1, 'month');
  }
  this.updateCalendars();
},

這是“對象”的一部分，例如：

 const obj = { value1: 5, clickNext: function(e) { console.log(`${e} is your function`) }, value2: [0, 1, 2, 3, 4, 5] } obj.clickNext('this')

這本身就是一個函數：

 // no comma at the end!!! function clickNext(e) { console.log(`${e} is your function`) } clickNext('this')

Answer 4

下面是一個在 JavaScript 中聲明函數的例子，它被稱為函數聲明。 注意要點：

• 我們將此函數稱為函數名，后跟括號 - clickNext() 。

• this關鍵字指的是函數聲明中的全局對象，也就是說它指的是window對象。

  function clickNext() { console.log(this) // this refers to global object window here. }

下面是方法的一個例子。 當我們在對象中有一個函數時，它被稱為方法。

• 我們使用 - dummyObject.clickNext()語法調用一個方法

• this關鍵字指的是聲明它的對象，這意味着在下面的示例中this指的是dummyObject 。

  const dummyObject = { clickNext: function(e) { console.log(this) // this refers to dummyObject here } };