我最近开始保持别人的JavaScript代码,我正在修复错误,添加功能,也试图更新代码并使其更加一致。

以前的开发人员使用了两种方式来宣布功能,我无法解决是否有原因。

兩種方式是:

var functionOne = function() {
    // Some code
};
function functionTwo() {
    // Some code
}

使用这两种不同的方法的原因是什么?每个方法的优点和缺点是什么?可以用一种方法做些什么,不能用另一种方法做些什么?


当前回答

函数One = 函数() {} 定义在运行时间,函数Two() {} 定义在部分时间。

// Run-Time function declaration 
functionOne(); // Calling functionOne function here will give an Error
var functionOne = function () {
  // Some code
};

// Parse-Time function declaration 
functionTwo(); // Calling functionTwo function will not give an Error
function functionTwo() {
  // Some code...
}

此分類上一篇: Run-time vs Parse-time javascript run-time vs parse-time

其他回答

我正在列出下面的差异:

函数声明可以在代码中的任何地方放置。 即使它在定义在代码中出现之前被引用,它也被执行,因为函数声明被承诺记忆或以某种方式被加密,在页面上的任何其他代码开始执行之前。 查看下面的函数: 函数外部函数() {函数 foo() { 返回 1; } 返回 foo(); 函数

function x() {
    console.log('x');
}

x(); // Works even though it's above the declaration
function x() {
    console.log('x');
}

if (someCondition) {
    function foo() {    // <===== HERE THERE
    }                   // <===== BE DRAGONS
}

"use strict";
if (someCondition) {
    foo();               // Works just fine
    function foo() {
    }
}
console.log(typeof foo); // "undefined" (`foo` is not in scope here
                         // because it's not in the same block)

var y = function () {
    console.log('y');
};

名称函数表达式

var z = function w() {
    console.log('zw')
};

var z = function w() {
    console.log(typeof w); // "function"
};
console.log(typeof w);     // "undefined"

配件功能启动器(ES5+)

var obj = {
    value: 0,
    get f() {
        return this.value;
    },
    set f(v) {
        this.value = v;
    }
};
console.log(obj.f);         // 0
console.log(typeof obj.f);  // "number"

您还可以使用 Object.defineProperty、Object.defineProperties 和 Object.create 更不熟悉的第二个论点创建附件功能。

Arrow 功能表达式(ES2015+)

var a = [1, 2, 3];
var b = a.map(n => n * 2);
console.log(b.join(", ")); // 2, 4, 6

看到 n => n * 2 隐藏在地图() 呼叫? 这是一个函数。

关于箭头功能的一些事情:

他們沒有自己的這一點. 相反,他們關閉了他們所定義的背景的這一點. (他們也關閉了論點,在相關的情況下,超級.) 這意味著他們內在的這一點是相同的這一點,在那裡他們是創造的,並且不能改變。

var a = [1, 2, 3];
var b = a.map((n, i) => n * i);
console.log(b.join(", ")); // 0, 2, 6

如果您正在做一个单一表达式以上,请使用 {} 和一个明确的回报(如果您需要返回值),如正常:

var a = [
  {first: "Joe", last: "Bloggs"},
  {first: "Albert", last: "Bloggs"},
  {first: "Mary", last: "Albright"}
];
a = a.sort((a, b) => {
  var rv = a.last.localeCompare(b.last);
  if (rv === 0) {
    rv = a.first.localeCompare(b.first);
  }
  return rv;
});
console.log(JSON.stringify(a));

对象初步化方法宣言(ES2015+)

var o = {
    foo() {
    }
};

var o = {
    foo: function foo() {
    }
};

ES2015为我们提供类合成,包括声明的建筑师和方法:

class Person {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName() {
        return this.firstName + " " + this.lastName;
    }
}

兩個函數之間的另一個區別是函數One 可以用作可持有多個函數的變量,而函數Two 持有某些代碼區塊,在呼叫時全部執行。

   var functionOne = (function() {
      return {

         sayHello: function(){
                console.log('say hello')

         },
         redirectPage:function(_url){
                window.location.href = _url;
         }

      }
})();

您有一个选项,该函数将被称为. e.g 函数One.sayHello 或函数One. redirectPage. 如果您呼叫函数Two 那么整个代码块将被执行。

区别在于,函数One 是一种函数表达式,因此只有在到达该行时才定义,而函数Two 是一种函数声明,并在其周围函数或脚本执行后才定义。

例如,函数表达式:

// TypeError: functionOne 不是函数函数One(); var 函数One = 函数() { console.log(“Hello!”); };

还有一个功能声明:

// 输出: “Hello!”函数Two();函数函数Two() { console.log(“Hello!”); }

“使用严格”; { // 注意此区块! 函数三() { console.log(“Hello!”); } } 函数三(); // 参考错误

格雷格的答案足够好,但我仍然想添加一些我刚才学会了观看杜格拉斯·克罗克福德的视频。

功能表达:

var foo = function foo() {};

功能声明:

function foo() {};

函数声明仅仅是函数值的每个声明的短片。

因此

function foo() {};

扩展到

var foo = function foo() {};

它进一步扩展到:

var foo = undefined;
foo = function foo() {};

两者都被推到代码的顶部。

此分類上一篇