Cordova中receivedEvent:function(id)函数定义解析与差异问询

嘿，这个问题问得挺细致的！我来帮你把这两种写法的差异和作用掰扯清楚~

首先，你在Cordova Hello World里看到的 receivedEvent: function(id) { // blah } 是对象字面量中的方法定义（ES5语法），而 function receivedEvent(id){ //blah } 是标准的函数声明，两者的核心区别主要在这几个方面：

1. 作用域与调用方式 #

• 函数声明 function receivedEvent(id) {...} 会被挂载到当前作用域（如果在全局就是window对象，在函数里就是函数作用域），你可以直接在作用域内的任何地方调用它，比如 receivedEvent('test')。
• 对象里的函数是作为对象的属性方法存在的，必须通过所属的对象来调用。比如Cordova里通常会把这些函数封装在一个全局app对象里，调用时得写 app.receivedEvent('deviceready')，直接单独调用receivedEvent()会报错说这个函数未定义。

2. 变量提升机制 #

• 函数声明有提升特性：JavaScript会在代码执行前把函数声明提升到当前作用域的顶部，所以哪怕你在声明之前调用它也不会报错，比如：

  receivedEvent('test'); // 不会报错
  function receivedEvent(id) {
      console.log(id);
  }
  

• 对象里的函数属于对象的属性，只有当对象被创建之后才能访问，提前调用会直接抛出“未定义”的错误：

  app.receivedEvent('test'); // 报错：app未定义或者receivedEvent不存在
  var app = {
      receivedEvent: function(id) {
          console.log(id);
      }
  };
  

3. 使用场景的差异 #

Cordova用这种对象封装的写法，核心目的是模块化和避免全局污染：把所有和应用相关的初始化、事件处理函数都放在一个app对象里，不会让全局作用域里塞满各种零散的函数，代码结构更清晰，也减少了和其他脚本冲突的概率。

另外补充个小知识点：ES6之后这种写法有了更简洁的语法，比如可以写成：

var app = {
    receivedEvent(id) {
        // 逻辑代码
    }
};

和原来的写法功能完全一致，只是语法更清爽。Cordova保留ES5写法应该是为了兼容一些较老的移动设备WebView环境。

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