开发学院网页设计 JavaScript javascript 基础总结（面向对象）阅读

javascript 基础总结（面向对象）

　2009-02-13 20:06:22　来源：WEB开发网　　　

核心提示：javascript 学习 Javascript 大体上可分为3个不同部分组成：核心（ECMAscript）,文本对象(DOM),浏览器对象(BOM) 核心（ECMAscript）：关键字，语句，javascript 基础总结（面向对象），运算符，对象文本对象(DOM)：DOM将把整个页面规划成由节点层级构成

javascript 学习

　 Javascript 大体上可分为3个不同部分组成：核心（ECMAscript）,文本对象(DOM),浏览器对象(BOM)

核心（ECMAscript）：关键字，语句，运算符，对象

文本对象(DOM)：DOM将把整个页面规划成由节点层级构成的文档.
解析遵循 W3C html dom 标准：
W3C dom 参考特别关注 DOM Node 说明　

BOM 浏览器对象. cookie,弹出新浏览器，浏览器设置大小

核心（ECMAscript）Global 内置对象；
　　方法： parseInt(),isNan(),encodeURI()...等都为此对象方法
　　特别注意 eval();动态语言的象征比如：eval("alert('hi')"); 但这个方法很邪恶（安全方面）
文本对象(DOM)说明：

　　
　　　　　　 <bookstore>　　　　　　　　 <book category="cooking">　　　　　　　　 <title lang="en">Everyday Italian</title>　　　　　　　　 <author>Giada De Laurentiis</author>　　　　　　　　 <year>2005</year>　　　　　　　　 <PRice>30.00</price>　　　　　　　　 </book>　　　　　　　 </bookstore>

1. ECMAscript基础

　 $ 变量弱类型 ;　　匈牙利类型标示 : var iOuouValue=100;

　　　 $ 结束行分号有无都可以;　　但再

　 $ 关键字 ; 提别注意

　　　　　　　 "typeof"　 var test=1; alert(typeof testX); //output "undefined"

　　　　　 "NaN" - not a number -> isNan("blue"); //output "true"　 ->isNan("123"); //output "false"

　 $ 对象; var o = new Object(); var a = {}

　　　　　　　这里特别说明下我们普通写的一个 function 就是一个 object

　　　　这　 var a = {name:"刘凯毅"} 等同与 var a = function(){this.name="刘凯毅"};

　　　　　　　来个 {name:"test",pass:"123456",addr:"bj"} //这是什么？！ json

　　　　　　　　　当 var str = '{name:"test",pass:"123456",addr:"bj"}'

　　　　　　　 var objectBean = eval(str); //这里就是对象 objectBea.name 使用了

域概念：

<SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
sColor = 'red';
sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello World!
alert(sColor); //red
</SCRIPT> <SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
var sColor = 'red';
sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello World!
alert(sColor); // 什么都没有
</SCRIPT>

<SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
var sColor = 'red';
var sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello
alert(sColor); // 什么都没有
</SCRIPT>

为面向对象做基础：object prototype 类型的对象应用。参考

// 最简单的继承
Object.prototype.inObj = 1;

function A()
{
　 this.inA = 2;
}

A.prototype.inAProto = 3;

B.prototype = new A;　　　　　 // Hook up A into B's prototype chain
B.prototype.constructor = B;
function B()
{
　 this.inB = 4;
}

B.prototype.inBProto = 5;

x = new B;
document.write(x.inObj + ', ' + x.inA + ', ' + x.inAProto + ', ' + x.inB + ', ' + x.inBProto);

//1, 2, 3, 4, 5
//增加点信心 http://www.json.org/json.js

Object.prototype.toJSONString = function (filter) {　　　　　　 return JSON.stringify(this, filter);　　　　　 };　　　　　后我们就可以使用 bean.toJSONString()不是吗？　　　　　

　 $ arguments ;

　　 function getFun(){alert(arguments.length);}　 ;

　　　　　 getFun("xx") //output 1

　　　　　 getFun("xx",23) //output 2

　 $ 语句 ;特殊说明下 for

　　　 for(var i=0i<iCount;i++)　或 for( attr in object ) ;

　　　　　如果无聊你可以 for( sProp in window ){alert(sProp+"你丫点啊！");} //看看 javascript 的反射

面向对象：

var bean = new Bean();

1.工厂方法

　　　 function getAttr(){

　　　　　　 alert(this.attr)

　　　　　 }

　　　 function Bean(tattr){

　　　　　 var bean = new Object;

　　　　　 bean.attr = tattr;

　　　　　 bean.getAttr = getAttr;

　　　　　 return bean ;

　　　　　 }

　根本就是山寨版面向对象

2.构造

　　 function Bean(tattr){

　　　　 this.attr = tattr ;

　　　　 bean.getAttr = function(){

　　　　　 alert(this.attr);

　　　　 }　

　其上 2 总再Bean 对象创建时，方法会 “重复生成函数”！

3.原型模式

　 function Bean(){}

　 Bean.prototype.attr = "";

　 Bean.prototype.getAttr=function(){alert(this.attr);}

　解决 “重复生成函数” 问题，但新的问题 Bean.prototype.getArray = new Array();

　其 new 对象 bean1 和 bean2 都会共享 new Array 空间(是我们不想看到的)

4.混合模型 :) 哈哈

function Bean(){

　 this.attr= "";

　　　 this.getArray=new Array;

　 }

　 Bean.prototype.getAttr=function(){alert(this.attr);}

5.动态原型（注意下面开始，就是真正的面向对象！！！）

　 function Bean(){

　 this.attr= "";
　　　 this.getArray=new Array;

　 //classload 加载时

　　　 if(typeof Bean._initialized == "undefined" ){

　　　 Bean.prototype.getAttr=function(){alert(this.attr);};

　　　　　 Bean._initialized= true ;

　 }

/****************************************************************/

对象继承

1.对象冒充！！(可支持多继承，山寨很强大)

　　 function classA(sstr){

　 this.color = sstr ;

　 this.sayColor = function(){

　　　 alert(this.color);

　　　 };

　　 }

function classC(){}

　　　 function classB(){

　　　 this.newMethod =ClassA ;

　　　 this.newMethod();

　　　 delete this.newMethod ;

　　　　　 this.newMethod =ClassC ;

　　　 this.newMethod();

　　　 delete this.newMethod ;

　　　 this.arrt = "google";

　　　 }

2.call() apply() 也山寨,

function classA(sstr){

　 this.color = sstr ;

　 this.sayColor = function(str){

　　　 alert(str+this.color);

　　　 };

　　 }

　　　 function classB(){

　　　 // this.newMethod =ClassA ;

　　　 // this.newMethod();

　　　 // delete this.newMethod ;

　　　 classA.call(this,"red");

　　　 //classA.apply(this,new Array("red"))

　　　　　 this.arrt = "baidu";

　　　 }

3.正统的继承原型链 (但不支持多继承)
　 function classA(){this.oo="test";}
　 classA.prototype.color = "red";
　 function classB(){}
　 classB.prototype = new classA ;
　 classB.prototype.sayName = function(){
　　　 alert( this.color );
　 }
　 var bb = new classB ;
　 bb.sayName(); // output red
　 alert(bb.oo); // output test

　 alert( bb instanceof classA); //output true
　 alert( bb instanceof classB); //output true
4.如果你要多继承！！并且还支持 instanceof
　　　混合方式：
　　　 function classA(){}
　　　 function classB(){}
　　　 function classC(){
　　　　　 classA.call(this);
　　　　　 classC.call(this);
　　　 }
　　　 classC.prototype = new classA ;//注意这 instanceof 只能对 A有用