定义函数的最佳方法是什么？

2018-06-05 09:02:16

我总是学会如何在JavaScript中定义一个函数：

function myFunction(arg1, arg2) { ... }

然而，我刚刚阅读了Google的Javascript指南，它提到我应该定义这样的方法：

Foo.prototype.bar = function() { ... };

问题：在对象的例子中是“Foo”还是命名空间？为什么不是谷歌示例下面的代码（这是行不通的）：

prototype.bar = function() { ... };

更新：万一它有助于知道，我的所有JavaScript将被用户浏览器调用我的Web应用程序。

你的两个例子在功能上并不相同。第一个例子简单地定义了一个函数（可能是全局函数，除非您在另一个函数中定义它）。第二个例子扩展了构造函数的原型。把它看作是给Foo类增加一个方法。

除非你正在构建一个JavaScript库，否则我的建议是既不使用也不使用某种名称空间系统。创建一个充当命名空间的全局对象，通过它可以访问所有的函数。

var MyObject = {
    utils: {
        someUtil: function() {},
        anotherUtil: function() {}
    },
    animation: {
        // A function that animates something?
        animate: function(element) {}
    }
};

然后：

// Assuming jQuery, but insert whatever library here
$('.someClass').click(function() {
    MyObject.animation.animate(this);
});

如果你想在JavaScript中模拟类，你可以将“class”定义为一个函数（函数本身就是构造函数），然后通过prototype属性添加方法。

function Foo() {
    // This is the constructor--initialize any properties
    this.a = 5;
}
// Add methods to the newly defined "class"
Foo.prototype = {
    doSomething: function() { /*...*/ },
    doSomethingElse: function() { /*...*/ }
};

然后：

var bar = new Foo();
console.log(bar.a); // 5
bar.doSomething();
// etc...

我总是学会如下定义一个JavaScript函数： function myFunction(arg1, arg2) { ... }

有两种方法来定义一个函数。可以作为函数声明

function foo(...) {
    ...
}

或者作为函数表达式

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

在这里阅读更多。

不过，我刚刚阅读了Google的Javascript指南，它提到我应该定义这样的方法： Foo.prototype.bar = function() { ... };

这特别与对象的方法创建有关，而不仅仅是正常的独立功能。假设你有基础对象声明：

var Foo = function() {
    ...
};

就像任何其他赋值一样，要为对象的属性分配函数，您必须使用赋值表达式。你可以通过两种方式来完成。简洁和通用的方式（正如Google的参考文献所建议的那样）

Foo.prototype.bar = function() {};

或者，如果您想继续使用定义函数的声明式形式

function bar() {
    ...
};
Foo.prototype.bar = bar;

这通常比需要的更冗长，但在您想要将相同方法分配给多个对象原型的情况下可能会有用。

问题：在对象的例子中是“Foo”还是命名空间？ 为什么不是谷歌示例下面的代码（这是行不通的）： prototype.bar = function() { ... };

Foo是一个对象。虽然这个概念可以通过使用静态对象来表达，正如我在回答您的其他问题时所展示的那样，但JavaScript中没有这样的名称空间。此外，特别是在给出的示例代码中， Foo很可能是一个实例化的对象，它不能像名称空间那样工作。

当然，它不起作用： prototype还没有被定义为一个对象（当然，除非你将其定义为这样）。 prototype属性存在于每个对象上（一个函数也是一个对象），这就是为什么你可以做Foo.prototype.bar = ...; 。在这里阅读更多。

=====> 2017更新<=====

这个问题和答案是7岁，是非常过时的。这个答案包括ES5 ， ES6版本的新语法，并且与ES7兼容。

定义函数的最佳方法是什么？

没有一种“最佳”的方式来定义一个函数。您如何定义该功能取决于功能的预期用途和使用寿命。

全球功能

定义为带有函数标记的语句，后跟带有小写字母的函数名称

function functionName (arguments) {
    // function body
}

比函数表达式更可取

var functionName = function (arguments) {
     // function body
}

...直到定义线被执行时才会发生赋值给函数的变量。与在执行任何代码之前解析后立即可用的首选方法不同。

const functionName = function(arguments){/*function body*/}
var functionName = function functionName(arguments){/*function body*/}
var functionName = function functionAltName(arguments){/*function body*/}

函数对象

作为带有大写camelcase函数名称的函数语句

function MyObjectFunction (arguments) {
    /*function body*/
    // if this function is called with the new token
    // then it exits with the equivalent return this;
}

const obj = new MyObjectFunction(foo);

匿名函数表达式。

通常的做法是通过立即调用的函数创建对象，该函数没有名称（因此是匿名的）

;(function (arguments) { /*function body*/ } ("argument val"))

要么

;(function(arguments){ /*function body*/ })("argument val")

注意包含的; 为此功能。这是非常重要的，因为打开的“（”将防止在函数上方的任何代码上自动插入分号。

立即调用函数表达式。

const functionResult = (function (arguments) {
      /*function body*/
      return functionResult;
}());

const functionResult = (function (arguments) {
      /*function body*/
      return functionResult;
})();

作为var或block作用域的const ， let

匿名回调。

使用ES6，您应该使用箭头函数语法而不是匿名函数表达式。

 myArray.forEach((item,i) => {/*function body*/});
 myArray.filter(item => !item);
 setTimeout(() => {/*function body*/}, 1000);

作为属性的功能。

使用对象声明函数简写语法。

var myObj = {
    functionName (arguments) {/*function body*/},
}

// called 
myObj.functionName("arg");

优于

var myObj = {
    functionName : function (arguments) {/*function body*/},
}

或者通过函数对象声明

function MyObjectFunction(arguments){
     this.propertyFunction = function(arguments) { /*function body*/ }
     // or arrow notation is fine
     this.propertyFunction = (argument) => { /*function body*/ };
}

作为原型的功能

function MyObj (arguments) {
      MyObj.prototype.functionName = function(arguments) { /*function body*/ }
}

要么

function MyObj (arguments) {}
MyObj.prototype.functionName = function(arguments) { /*function body*/ }

要么

MyObj.prototype = {
    functionName(arguments) { /*function body*/ }
}

链接地址: http://www.djcxy.com/p/17067.html

上一篇: Best way to define a function?

下一篇: Why do I encapsulate a jQuery function within jQuery(function ($) { });