如何在JavaScript中自动调用对象内的所有函数？

问题描述 #

现有代码如下：

var imgs = { a: function(){ //... }, b: function(){ //... }, c: function(){ //... } }; 
var preloadImgs = function(){ imgs.a(); imgs.b(); imgs.c(); }; 
preloadImgs();

请问能否实现preloadImgs的自动化，一次性调用imgs内的所有方法，无需逐个手动编写调用语句？

解决方案 #

当然可以实现！你完全不用手动逐个调用每个方法，通过遍历对象的属性就能自动完成所有方法的调用，下面给你两种常用的实现方式：

1. 使用for...in循环（兼容ES5及更早版本）

这种方法适合需要兼容旧环境的场景，遍历对象的所有可枚举属性，同时过滤出自身的方法进行调用：

var imgs = { 
  a: function(){ /* 图片a的预加载逻辑 */ }, 
  b: function(){ /* 图片b的预加载逻辑 */ }, 
  c: function(){ /* 图片c的预加载逻辑 */ } 
}; 

var preloadImgs = function() {
  // 遍历imgs的所有可枚举属性
  for (var key in imgs) {
    // 确保当前属性是imgs自身的方法，而非原型链上的属性
    if (imgs.hasOwnProperty(key) && typeof imgs[key] === 'function') {
      imgs[key](); // 调用方法
    }
  }
};

preloadImgs();

2. 使用ES6+的Object.values结合forEach（现代环境推荐）

如果你的项目支持ES6及以上语法，这种写法更简洁直观：

const imgs = { 
  a: () => { /* 图片a的预加载逻辑 */ }, 
  b: () => { /* 图片b的预加载逻辑 */ }, 
  c: () => { /* 图片c的预加载逻辑 */ } 
}; 

const preloadImgs = () => {
  // 获取imgs对象的所有属性值，遍历并调用其中的函数
  Object.values(imgs).forEach(item => {
    if (typeof item === 'function') {
      item();
    }
  });
};

preloadImgs();

说明 #

这两种方式都能实现自动化调用：不管后续你给imgs对象新增多少个预加载方法，preloadImgs函数都不需要做任何修改，会自动遍历并调用所有符合条件的方法，彻底摆脱手动编写调用语句的麻烦。

内容的提问来源于stack exchange，提问作者Magdi Gamal