JavaScript函數聲明，函數聲明中的冒號

Question

JavaScript中的函數聲明function test()和test: function()什么區別？

function test() {
    …
}

與

test: function() {
    …
}

---

在問題« var functionName = function（）{} vs function functionName（）{} »函數被聲明為：

function test() {
    …
}

和

var test = function() {
    …
};

與我的問題相比，這與語法角度有點不同。

Answer 1

function test()是正常的函數聲明，可以使用函數名直接調用。 test: function()是在某個對象中定義的函數，因此必須使用定義它的對象來調用它。

例

功能聲明

function test() {
    alert('In Test');
}

test(); // Calling test

方法

var myObj = {
    test: function() {
        alert('Inside test');
    }
};

myObj.test(); // Calling test

Answer 2

考慮這個javascript對象：

{ "name" : "Joe",
  "age" : "23"}

Javascript被弱化，你可以用23（數字）替換“23”（字符串）：

{ "name" : "Joe",
  "age" : 23}

沒有錯誤，完美無缺。

實際上，您可以用其他任何東西替換23：布爾值

{ "name" : "Joe",
  "age" : true}

另一個對象

{ "name" : "Joe",
  "age" : {"2014" : 22 , "2015": 23 } }

甚至是一個功能

{ "name" : "Joe",
  "age" : function(){ alert("23");} }

旁注：有些人因為如此寬松而討厭Javascript。 其他人（像我一樣）喜歡Javascript也是出於同樣的原因，因為這種靈活性就是它的力量（那是異步的）。

您可以將該對象命名為“人”並詢問他的姓名和年齡：

var person = { "name" : "Joe",
      "age" : function(){ alert("23");} }

console.log( person.name ); // will log "Joe"
person.age(); // "age" is a function, so you need to call it. It will alert 23.

現在您可以創建一個將返回該對象的函數：

function Person() {
    return{
      "name" : "Joe",

      "age" : function(){ alert("23");},

      sayHello : function() {
        alert("Hello");
      },

      sleep : function() {
        alert("I'm sleeping");
      }
    }
};

console.log( Person().name ); // logs "Joe"
Person().age(); // alerts "23"
Person().sayHello(); // alerts "Hello"
Person().sleep(); // alerts "I'm sleeping".

age ， sayHello和sleep是函數，被稱為Person函數的方法。

通常避免多次調用Person() ，而是創建一個new Person ：

var person = new Person();
person.sayHello(); // alerts "Hello"
person.sleep(); // alerts "I'm sleeping".

此方法允許通過傳遞參數創建許多人：

function Person(name, age) {
    return{
        "name" : name,

        "age" : function(){ alert(age);},

        sayHello : function() { // sayHello or "sayHello", both work
          alert("Hello, my name is "+ this.name );
        },

        sleep : function() {
          alert("I'm sleeping");
        }
     }
};

var person = new Person("John", 25);
person.sayHello(); // alerts "Hello, my name is John"
person.age(); // alerts "25".

此方法目前替換Javascript 5（EcmaScript 5）缺少的類。 但是EcmaScript 6很快就會推出適當的課程。

Answer 3

test:function()有三個不同之處test:function()和function test() 。

呼叫：

test:function()將在對象內定義一個函數。 所以你需要它從那個對象調用。 function test()是一個普通的函數，你用test()調用它。
考慮這個例子。

 const obj = { insidefunc:function(){ console.log("Inside"); } } function test(){ console.log("Outside"); } obj.insidefunc(); //Inside test(); //Outside insidefunc(); //Uncaught ReferenceError: insidefunc is not defined 

這個綁定

在test:function() this將引用函數屬性為的Object。而在function test() this將引用window對象。

 const obj = { value:"something", insidefunc:function(){ console.log(this); } } function test(){ console.log(this); } obj.insidefunc(); //will log 'obj' test(); //window object 

起升：

你可以在聲明它的行之前使用test ，但obj.test只能在聲明它的行之后訪問。 實際上function test()顯示提升

 test(); //outer function called const obj = {} obj.test() //"Uncaught TypeError: obj.test is not a function" obj.test = function(){ console.log("object method") } function test(){ console.log("outer function called"); }