DOM--2 创建可重用的对象

对象中包含的##

• 分类(内置对象: 注意这些都是function；除了Function对象，实例都是object)

  • Function对象
    • Function实例function
    • 构造函数的function
  • Object对象
    • Object实例
  • 其他
    • 其他实例

• 理解对象成员

  • 函数是为避免冗余代码而构建的一种简单的可重用的容器
  • 当对象被传递到期望一个字符串参数值的alert（）函数中，Object对象的toString()方法就会被调用;
  • DOM与别的对象一样，其各种对象和方法都是由Object对象和Function对象构成的;

创建自己的对象##

Array对象和Object对象是一样的，只不过Array扩展自Object，并且添加来额外的属性和方法；其他对象也是一样（除了Function）

• 使用构造函数

function myConstructor(message) {
  //公有属性
  this.myMessage = message;
  //公有方法
  this.method = function() {
    alert(this.myMessage);
  };
  //私有属性
  var separator = '-';
  var myOwner = this;
  //私有方法
  function alertMessage() {
    alert(myOwner.myMessage);
  };
  alertMessage();  //私有方法只能在实例化的时候调用
  //特权方法(也是公有方法)
  this.appendToMessage = function(string) {
    this.myMessage += separator + string;
    alertMessage();
  };
}
//也是公有方法
myConstructor.prototype.clearMessage = function() {
  this.myMessage = '';
}
//静态属性
myConstructor.user = 'jefff';
//静态方法
myConstructor.alertName = function() {
  alert(this.user);
}

浏览器中的解释程序在执行js代码之前，首先要对代码进行变量初始化，即初始化window对象之下的所有顶级变量；使用赋值语句实现的函数在初始化过程中不会立即声明，只有在解释器开始执行代码并执行到相应的赋值语句时，该函数才会被声明；函数定义实现的函数则在初始化的时候就被声明

关于this##

特别注意在监听事件的执行方法中，this指代监听的元素

• 重定义执行环境

function bindFunction(obj, func) {
    return function() {
      func.apply(obj, arguments);
    }
  }

例子

function doubleCheck() {
    this.message = 'Are you sure you want to leave?';
  }
  doubleCheck.prototype.sayGoodbye = function() {
    //实际上执行的时候这里查找的this指代元素
    return confirm(this.message);
  }
  function initPage() {
    var clickedLink = new doubleCheck();
    var links = A.getByTag('a');
    for(var i = 0, len = links.length; i < len; i++) {
      A.addEvent(links[i], 'click', clickedLink.sayGoodbye);
    }
  }
  A.addEvent(window, 'load', initPage);

常用解决方法

function bindFunction(obj, func) {
    return function() {
      func.apply(obj, arguments);
    }
  }

上面代码关键在于，bindFunction返回的匿名函数使用来内部作用域中的arguments参数，作为外部作用域中的obj和func调用apply()时传递的额外参数

使用

 A.addEvent(links[i], 'click', bindFunction(clickedLink, clickedLink.sayGoodbye));

更加简单的方法

A.addEvent(links[i], 'click', clickedLink.sayGoodbye.bind(clickedLink));