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关键字实例化的该对象的每个实例
- 静态成员只使用于对象的一个特殊实例。
- 对象字面量
- 上一篇 »JavaScript面向对象编程实战
- 下一篇 »JavaScript深入之参数按值传递