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

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

兩種方式是:

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

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


当前回答

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 是一种函数声明,并在其周围函数或脚本执行后才定义。

例如,函数表达式:

// 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() {};

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

此分類上一篇

你在那里发布的两个代码剪辑,几乎所有目的都会以相同的方式行事。

然而,行为的差异是,在第一个变量(有函数One = 函数() {}),该函数只能在代码中的那个点之后被称为。

第二个选项(函数Two()),函数可用于代码,运行在函数被宣布的地方。

这是因为第一种变量,函数在运行时分配给变量foo;第二种函数在运行时分配给这个识别器,foo。

更多技术信息

JavaScript 有三种方式来定义功能。

你的第一个剪辑显示一个函数表达式. 这意味着使用“函数”操作员创建一个函数 - 该操作员的结果可以存储在任何变量或对象属性. 函数表达式是强大的这种方式. 函数表达式经常被称为“匿名函数”,因为它不需要一个名字, 你的第二个例子是一个函数声明。

当原始忍者物体被移除时,测试失败(第13页)

function assert(predicate, message) { if(!predicate) { throw new Error(message); } } var ninja = { yell: function(n){ return n > 0 ? ninja.yell(n-1) + "a" : "hiy"; } }; assert( ninja.yell(4) == "hiyaaaa", "A single object isn't too bad, either." ); var samurai = { yell: ninja.yell }; var ninja = null; try { samurai.yell(4); } catch(e){ assert( false, "Uh, this isn't good! Where'd ninja.yell go?" ); }

function assert(predicate, message) { if(!predicate) { throw new Error(message); } } var ninja = { yell: function yell(n){ return n > 0 ? yell(n-1) + "a" : "hiy"; } }; assert( ninja.yell(4) == "hiyaaaa", "Works as we would expect it to!" ); var samurai = { yell: ninja.yell }; var ninja = {}; assert( samurai.yell(4) == "hiyaaaa", "The method correctly calls itself." ); console.log(samurai.yell(4));

尝试 { console.log(“成功:”,添加(1, 1)); } 捕捉(e) { console.log(“错误:” + e); } var add=function(a, b){ return a + b; }