电脑技术学习

javascript 基础总结(面向对象)

dn001

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


$ 结束行分号有无都可以;;;但再 onsubmit="javascript:function();return false;"

$ 关键字 ; 提别注意;


"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有用