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));

巴特西

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

对象中包含的##

创建自己的对象##

关于this##

最新文章

热门文章