在读《JavaScript设计模式》的时候对这段代码有个疑问？

Question

书中讲单体模式用了这段代码。我的问题是在对象内部访问对象的属性时为何没有用this.foo而依然用GiantCorp.RegPage.foo

GiantCorp.RegPage = {

  // Constants.
  FORM_ID: 'reg-form',
  OUTPUT_ID: 'reg-results',

  // Form handling methods.
  handleSubmit: function(e) {
    e.preventDefault(); // Stop the normal form submission.

    var data = {};
    var inputs = GiantCorp.RegPage.formEl.getElementsByTagName('input');

    // Collect the values of the input fields in the form.
    for(var i = 0, len = inputs.length; i < len; i++) {
      data[inputs[i].name] = inputs[i].value;
    }

    // Send the form values back to the server.
    GiantCorp.RegPage.sendRegistration(data);
  },
  sendRegistration: function(data) {
    // Make an XHR request and call displayResult() when the response is
    // received.
    ...
  },
  displayResult: function(response) {
    // Output the response directly into the output element. We are
    // assuming the server will send back formatted HTML.
    GiantCorp.RegPage.outputEl.innerHTML = response;
  },

  // Initialization method.
  init: function() {
    // Get the form and output elements.
    GiantCorp.RegPage.formEl = $(GiantCorp.RegPage.FORM_ID);
    GiantCorp.RegPage.outputEl = $(GiantCorp.RegPage.OUTPUT_ID);

    // Hijack the form submission.
    addEvent(GiantCorp.RegPage.formEl, 'submit', GiantCorp.RegPage.handleSubmit);
  }
};

// Invoke the initialization method after the page loads.
addLoadEvent(GiantCorp.RegPage.init);

Answer 1

可能是因为后面使用addLoadEvent调用导致的，在addLoadEvent函数内必然有这样的调用

javascriptfunction addLoadEvent(callback){
    callback();
}

这样的addLoadEvent里调用的GiantCorp.RegPage.foo，会让其this变成window，所以在函数里面this.foo不等于GiantCorp.RegPage.foo，必须要写全。

Answer 2

我同意ls的说法，this确实令人很头疼的问题。
下面我简单改造一下代码，做一番测试

var GiantCorp = window.GiantCorp || {};
GiantCorp.RegPage = {

  // Constants.
  FORM_ID: 'reg-form',
  OUTPUT_ID: 'reg-results',

  // another method, print
  print: function() {
       console.log(this.OUTPUT_ID);
  }
};

GiantCorp.RegPage.print(); // output 'reg-results'

var myObject = {
  OUTPUT_ID: 'my-results'
};
GiantCorp.RegPage.print.call(myObject); // output my-results

可见在这种情况下使用this也不是安全的。