分享
 
 
 

javascript 基础总结(面向对象)

王朝学院·作者佚名  2009-02-17
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有