JavaScript DOM高级程序设计2.1创建可重用的对象--我要坚持到底!

1.对象中包含什么

在javascript中,从函数到字符串实际上都是对象

  • 继承
//创建一个person对象的实例
var penson={};
person.getName=function(){...};
person.getAge=function(){...};

//创建一个emloyee对象的实例
var employee={};
employee.getTitle=function(){...};
employ.getSalary=function(){...};

//从person对象中继承方法
employee.getName=person.getName;
employee.getAge=person.getAge;
  • 理解对象成员
ADS.addEvent(window,'load', function() { 
    alert('document.body is a: ' + document.body);
});//document.body is a:object HTMLBodyElement

ADS.addEvent(window,'load',function() {
    alert('document.getElementById is a: ' + document.getElementById);
});
//document.getElementById is a:
//function getElementById(){[native code]}
  • window对象中的一切(覆盖作用域链中的对象)
<h1>Override the alert() method</h1>
<p>Interesting isn't it?</p>
function override() {
    // 覆盖alert函数
    var alert = function(message) {
        window.alert('overridden:' + message);
    };
    alert('alert');
    
    // 在override()函数的作用域中调用原始的alert()函数
    window.alert('window.alert');
}
override();

// 在window的作用域中调用原始的alert();
alert('alert from outside');
//弹出顺序:
//overridden:alert
//window.alert
//alert from outside
  • 理解作用域和闭包是根本

2.创建你自己的对象

var myObject=new Object();//Object是一个对象
var myObject={};
//这两种都已经被实例化。实例化的对象一定是一个构造函数
//创建一个数组
var myArray=new Array();
var anotherObject=new myObject();//错误的
  • 一变多:创建构造函数
function myConstructor(a){
//somecode
}
var myConstructor=function(a){
//comecode
}
var myConstructor=new function('a','/*somecode*/')//性能有问题
//使用
var myObject=new myConstructor();
//再比如:
function myConstructor(message)
{
    alert(message);
    this.myMessage=message;
}
var myObject=new myConstructor('Instantiating myObject');
var message=myObject.myMessage;
  • 添加静态方法
//了解实例与构造函数之间的区别有助于消除许多已有的问题
//-------仅对Object能正常运行
//创建一个Object对象实例
var myObject=new Object();
//添加一个属性
myObject.name='Jeff';
//添加一个方法
myObject.alertName=function()
{
    alert(this.name);
}
//执行添加的方法
myObject.alertName();

//创建一个Function对象的实例
var myConctructor=function()
{
    //somecode
}
//添加一个静态属性
myConstructor.name='Jeff';
myConstructor.alertName=function()
{
    alert(this.name);
}
myConstructor.alertName();
//但是,name,alertName不会在新实例中
var anotherExample=new myConstructor();
anotherExample.alertName();//not a function 错误
  • 像原型中添加静态方法
//创建构造函数
functionmyConstrctor(message)
{
    alert(message);
    this.myMessage=message;
}
//添加一个公共方法(在底层添加)
myConstructor.prototype.clearMessage=function(string)
{
    this.myMessage+=''+string;
}
//可以在新的实例上调用该方法
var myObject=new myConstructor('Hello World!');
myObject.clearMessage();

通过私有和特权成员控制访问(只需在该构造函数中使用普通的var和fuction关键字即可)

//创建构造函数
function myConstrctor(message)
{
    this.myMessage=message;
    //私有属性
    var separator='-';
    var myOwner=this;
    //私有方法
    function alertMessage()
    {
        alert(myOwner.message);
    }
    //在实例化时显示信息;
    alertMessage();
}

//如果通过如下方法,则出错
myConstructor.prototype.appendToMessage=function(string)
{
    this.myMessage+=seqarator+string;//出错 未定义
}
//特权方法只得是在构造函数中的作用域中使用this关键字定义的方法
//创建构造函数
function myConstrctor(message)
{
    this.myMessage=message;
    //私有属性
    var separator='-';
    var myOwner=this;
    //私有方法
    function alertMessage()
    {
        alert(myOwner.message);
    }
    //在实例化时显示信息;
    alertMessage();

    //特权方法
    this.appendToMessage=function(string)
    {
        this.mymessage+=separator+string;
        alertMessage();
    }
}
//这时候就可以
var myObject=new myConstructor('Hello World');
myObject.appendToMessage('Jeff');

//但是仍然不能用下面方法:
myObject.alertMessage();//not found
  • 共有、私有、特权、静态成员真的那么重要么?
//创建构造函数
function myConstrctor(message)
{
    this.myMessage=message;
    //私有属性
    var separator='-';
    var myOwner=this;
    //私有方法
    function alertMessage()
    {
        alert(myOwner.message);
    }
    //在实例化时显示信息;
    alertMessage();

    //特权方法
    this.appendToMessage=function(string)
    {
        this.mymessage+=separator+string;
        alertMessage();
    }
}
//共有方法
myConstructor.prototype.clearMessage=function(string)
{
    this.myMessage='';
}
//静态属性
myConctructor.name='Jeff';

//静态方法
myConstructor.alertName=function()
{
    alert(this.name);
}

记住一下几天规则可以保证你对所有成员的身份做出适当的界定:

  • 由于私有和特权成员在函数内部。新词他们会被带到函数的每个实例中。
  • 共有的原型成员是对象蓝图的一部分,适用于通过new关键字实例化的该对象的每个实例
  • 静态成员只使用于对象的一个特殊实例。
  • 对象字面量