在javascript中调用函数的最佳方法

Question

我正在编写一个小例子来调用函数getAge()来通过对象显示年龄.

我有3种方法可以做到这一点:

"use strict";
var personClass = class {
  static getAge() {
    return 18
  }
};

var personJSON = {
  getAge: function () {
    return 18
  }
};

function personFunc() {
  var getAge = function () {
    return 18
  };
  
  // set a flag to point to getAge function
  this.getAge = getAge()
}

$('#btn1').click(function () {
  alert(personClass.getAge())
});

$('#btn2').click(function () {
  alert(personJSON.getAge())
});

$('#btn3').click(function () {
  var p = new personFunc();
  alert(p.getAge)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">Get age via class</button>
<button id="btn2">Get age via json</button>
<button id="btn3">Get age via function</button>

我的问题:最好的方法是什么？为什么？

Answer 1

这取决于您必须解决的实际问题以及您正在使用的编程风格.如果你倾向于使用面向对象的方法,并希望从它的继承等功能中获益,你可能想要将一个人建模为

function Person(){
    var age = 18;
    this.getAge = function() {
        return age; 
    }
}

var person = new Person();
alert(p.getAge());

或者作为一个班级

class Person {
  constructor() {
    this.age = 18;
  }

  getAge() {
    return this.age()
  }
}

如果您更喜欢更实用的样式,那么您将编写纯粹的独立函数,对某些数据执行某些操作:

// does not make much sense in this age of a person context
function age(obj, dateFn) {
    return dateFn() - obj.born;
}

var person = { born : new Date(/* */) }
var animal = { born : new Date(/* */) }
alert(age(person, Date.now));
alert(age(animal, Date.UTC));

举个例子getAge,任何一种静态函数都没有任何意义(你的第一个例子),因为它age是某个对象的属性.因此,您需要一个可用于调用方法或传递给函数的对象实例.

Answer 2

我会推荐最简单的形式：

var personJSON = {
  getAge: function () {
    return 18;
  }
};

它已经创建了一个具有所需属性的明确定义的对象，它可以很好地扩展，并且不受繁文缛节的样板代码的阻碍。

好的代码多年来一直这样做，并且这是一种经过充分验证的风格。它可读且紧凑。

您不会从中获得 ES6 类定义的新高级功能，而在更高级的情况下可能需要这些功能。

警告！这只是我个人的、有偏见的观点：

就我而言，我根本不会使用类定义，相反，我将利用这种风格和 lambda，就像我在 10 多年以来一直所做的那样。我也反对在 Javascript 中引入语法糖只是为了让它看起来像其他语言。我更喜欢原型范式。