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"); }