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有用
分享到:
相关推荐
韩顺平老师的javascript笔记 包括基础语法 javascript面向对象编程 dom编程
面向对象的实现 设计模式实现 模块化开 javascript 常见的疑问 jQuery NodeJs html5 Javascript based 1.对象 JavaScript 引用 2.JavaScript this 3.JavaScript 闭包 4.JavaScript 事件 5.javascript 跨域 6....
谈JavaScript的面向对象设计有点牵强,毕竟JavaScript语言本身没有高级语言严谨。看这篇文章之前,希望大家了解c++、java、c#等高级语言,有面向对象编程的基础知识。 1.类的定义: function ClassName(){ } 大家...
本文为日常学习总结,其中包括各种案例的代码 属于JavaScript基础内容 但是如果要学习本文档,需要具备一定的语言基础,如面向对象、解释性语言等基础
虽然 ES6 类表面上看起来可以支持正式的面向对象编程,但实际上它背后使用的仍然是原型和构造函数的概念。 使用 ES5 定义一个类并调用 function Person(name, age, job) { this.name = "Totora"; this.age = 19;...
第二十六章:JavaScript基础 505 学习目标 505 基本结构 506 JavaScript代码的加入 506 基本数据类型 506 常量 507 表达式和运算符 509 实例 511 JavaScript程序构成 513 事件驱动及事件处理 516 内容总结 519 独立...
JavaScript的this和Java等面向对象语言中的this大不一样,bind()、call()和apply()函数更是将this的灵活度进一步延伸。 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 如果...
JavaScript面向对象编程 菜鸟的Ajax笔记 菜鸟的jQuery笔记 JavaScript实例 经典论坛JavaScript学习总结 菜鸟的Python笔记 《High Performance Web Sites》读书笔记 单片机笔记 C51笔记 51单片机实验 51...
包括了Java基础知识、面向对象、IO流、线程、网络编程、JEE、servlet、JSP、Javascript、框架理解、ORM对象关系型数据库映射、hibernate、spring、事务、EJB、UML等技术的基本理解和总结,文档共66页!
js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习js的途径。...就好像又是新的一样,让你对曾经学的面向对象产生了怀疑…… D:辛苦学习后又看似和实际应用脱节。通常学了很久的js基础之后,变量
内容以《JavaScript高级程序设计》为基础,包括基本语法、数据类型、变量和作用域、面向对象、函数表达式、DOM、BOM、事件等 03-JavaScript进阶 内容以《JavaScript高级程序设计》、《ES6入门教程》和各个前端框架...
1.熟练掌握至少一种面向对象编程语言,如C++、C#、Java或JavaScript。 2.理解数据结构与算法,如数组、链表、栈、队列、哈希表、排序和查找算法等。 3. 游戏引擎 4. 1.学习Unity、Unreal Engine等流行游戏引擎的使用...
Java基础、Java内存模型、Java面向对象、Java集合体系、接口、Lambda表达式、类加载机制、内部类、代理类、Java并发、JVM、Java后端编译、Spring 3. Go defer底层原理、goroutine、select实现机制 4. 算法学习 数组...
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
说明:asp.net作为一种开发框架现在已经广为应用,其开发的基础除了前端的html、css、JavaScript等后端最重要的语言支持还是C#,下面将主要用到的基础知识做一个总结,方面后面的学习。 一、C#是一种面向对象的编程...
课程为零基础学习开发的学员而准备,无需...JS包含核心语法、面向对象编程、复杂的项目案例、HTTP网络协议、AJAX前后端异步交互等;新型前端开发大部分回归原始开发,核心编程能力非常重要,本课程教会你如何玩转前端。