Question

JavaScript中的函数声明function test()和test: function()有什么区别？

function test() {
    …
}

VS

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()和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将引用该函数所属的对象。在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");
}

JavaScript函数声明，函数声明中的冒号

3 个答案:

致电：

此绑定

住宿：