javascript - 在javascript中调用函数的最佳方式

标签 javascript ecmascript-6

<分区>

我正在编写一个小示例来调用函数 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>

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

最佳答案

这取决于您要解决的实际问题和您使用的编程风格。如果您倾向于使用面向对象的方法并希望从它的继承等特性中获益,您可能希望将一个人建模为

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 是某个对象的属性。因此,您需要一个对象实例,您可以使用它来调用方法或传递给函数。

关于javascript - 在javascript中调用函数的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34870895/

相关文章:

javascript - 单击 Accordion 图像后保持 DIV 事件

javascript - 查找页面的最大滚动位置

javascript - 在 jQuery 中保持 GET 连接打开

javascript - 无法解构函数生成器中的对象

javascript - 如何在 JavaScript ES6 中使用数组解构并分配给对象属性

javascript - 如何在 php 中按元素按字母顺序排列 json 文件?

javascript - AngularJS:未捕获的ReferenceError:未定义 Angular app.js:1(匿名函数):

javascript - 将一个表的数据复制到另一个表时切换按钮

javascript - ES6 解构对象数组

javascript - Bloom Filter 哈希返回太多的冲突