review_js
js的面向对象写法
function Lecture(name,teacher){
this.name = name;
this.teacher = teacher;
}
Lecture.prototype.display = function(){
return (this.teacher + " is teaching " + this.name);
}
function Schedule(lectures){
this.lectures = lectures;
}
Schedule.prototype.display = function(){
var str = "";
for(var i =0; i < this.lectures.length; i++){
str += this.lectures[i].display();
}
return str;
}
var mySchedule = new Schedule([
new Lecture("zhangsan","zhanglaoshi"),
new Lecture("lisi","lilaoshi")
]);
alert(mySchedule.display());
var arr = new Array("one","two");
var arrRef = arr;
arr.push("three");
alert(arr.length == arrRef.length);
js 字符串赋值是值类型
var str = "str"; var strCopy = str; str+="again"; alert(str == strCopy);
函数重载在js中并没有直接支持，只能通过特定的方法来模拟
function sendMessage(o1, o2) {
if (arguments.length == 2) {
o2.handleMsg("param 2");
} else {
alert(o1);
}
}
sendMessage("o1");
sendMessage("o1", {
handleMsg: function(msg) {
alert(msg);
}
});
可以使用typeof 和 Constructor 分别来判断类型和构造函数
| 变量 | typeof | constructor |
| {an:"object"} | object | Object |
| ["and","array"] | object | Array |
| function(){} | function | Function |
| "a string" | string | String |
| 55 | number | Number |
| true | boolean | Boolean |
| new User() | object | User |
js的作用域和PHP一样，作用域由函数划分
var foo = "test";
if(true){
var foo = "new test";
}
alert(foo=="new test");
function test(){
var foo = "test again";
}
test();
alert(foo == "new test");
//隐式定义全局变量
function test(){
foo = "test again";
}
test();
alert(window.foo);
js的闭包：内层的函数可以引用存在于包围他的函数内的变量，即使外层函数的执行已经终止(个人理解).
还有人理解为：闭包就是定义在一个函数内部的函数，用这个子函数来获取父函数的内部变量。闭包就是一个把函数内部和函数外部连接起来的桥梁。
比较好的解释：当内部函数 在定义它的作用域 的外部 被引用时,就创建了该内部函数的闭包 ,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被 释放,因为闭包需要它们.
function delayAlert(msg,time){
setTimeout(function(){
alert(msg);
},time);
}
delayAlert("alert",2000);
//这个时候delayAlert函数已经执行结束了，但是2秒后在执行的那个匿名函数还是会记得那个msg，这就是闭包
//但是，函数的上下文不会被闭包
function delayAlert2(msg,time){ this.msg = msg; setTimeout(function(){ this.msg = "inner msg"; alert(this.msg); },time); }函数声明和函数表达式的区别：解析器会先读取函数声明，使其在执行任何代码之前可用；而函数表达式，必须等到解释器执行到所在的行时，才会被解释执行。foo();function foo(){alert("sssss");}//正常执行foo();var foo = function(){alert("ssss");};//会报错
call & apply :
js 任何函数都可以实例化为一个对象：
function user(name){ this.name = name; } //var me = new user('my name'); //作为构造函数 //alert(me.name); user('another name'); //作为普通函数，函数上下文变成window alert(window.name);
理解js的prototype需要理解设计模式的原型模式。
谨记函数内的变量/函数仅仅存在于函数内。
function test(){ function test2(){ alert('test2'); } alert('test1'); } test(); test2();//test2未定义
function test(){ function test2(){ alert('test2'); } alert('test1'); this.test3 = function (){alert('test3');} } //test(); var t = new test(); t.test2(); //私有方法，访问不到（这一行要注释，不然js执行遇到错误就会终止） t.test3(); //特权方法，可以访问 //test2();
5种基本数据类型：
- undefined ：未定义，未声明，派生自null （null == undefined）true
- null ：空对象
- boolean
- number
- string
1种复杂数据类型：object
对XHTML兼容：
<script type="text/javascript">
//<![CDATA[
function add(n1,n2){
return n1+n2;
}
//]]>
</script>应付不支持js或者js被禁用：
<noscript> <p>sssssssssssssssssssss</p> </noscript>
把script都放到head里有好处：好管理，方便缓存。
DOM操作四大金刚：
getElementById：获取一个元素节点
getElementsByTagName：获取一个元素节点的数组
getAttribute
setAttribute
元素节点 = 文本节点+属性节点
childNodes
nodeType
innerHTML：外号 斧头，元素节点内所有东东
节点处理方法汇总：
createElement(tagName):创建一个元素节点
createTextNode(string):创建一个文本节点
createAttribute(name):创建name属性
createComment(string):创建文本注释
parent.appendChild(newChild):放到父节点的末尾
parent.insertBefore(newChild,targetChild):插入到指定节点的前面
cloneNode(bool) : 克隆自身，true复制子节点, false不复制子节点
removeChild(childName)
replaceChild(newChild,oldChild)
文本节点操作：
insertData(offset,string) : 从指定offset位置插入string
appendData(string) : 将string插入文本节点的末尾
deleteData(offset,count) : 从offset处开始删除count个文本
replaceData(offset,count,string) : 从offset处用string替换count个文本
splitText(offset) : 左边的更新为原始节点，右边的返回到新节点
substringData(offset,count) : 从offset开始count文本
parent.appendChild(child):父节点appendChild子节点
createTextNode:创建一个文本节点
parent.insertBefore(new,target)
ECMA Script Language Binding：
DOM CORE LEVEL 1:这里是基本的，公有的特性
DOM HTML LEVEL 1：html特有的属性，在继承自DOM CORE的基础上
比如: Object.previousSibling() 是DOM CORE定义的，因为HTML DOM 是继承自DOM CORE，所以html dom可以直接用
在XHTML上面DOM HTML LEVEL 1是不好用的，只能用DOM CORE LEVEL 1
javascript Array:
toString()
toLocaleString()
valueOf()
join() //可以用任意字符来拼接数组元素，而其他几个方法只能默认以逗号来拼接
push(); //从尾巴推入
pop(); // 取尾巴 ，堆栈型，后进先出
shift(); //取头，队列型，先进先出
unshift();// 从头推入
reverse();
sort(function(){}); //sort是根据数组元素的字符串进行比较的，
var arr = [0,1,5,10,15];
arr.sort(function(a,b){return b-a;});concat(array1,array2);// 相当于数组的加
slice(start,end=null);// 开始位置 到 结束位置 ，但是不包括结束位置。如果结束为空，就到最后。
splice(start,delete number,新值1=null，。。。）；//start,end,都是数组的index
Date:
Date.prototype.format = function(format) {
var o = {
"M+" : this.getMonth()+1,
"d+" : this.getDate(),
"h+" : this.getHours(),
"m+" : this.getMinutes(),
"s+" : this.getSeconds(),
"q+" : Math.floor((this.getMonth()+3)/3),
"S" : this.getMilliseconds()
}
if(/(y+)/.test(format)) format = format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(format)) format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] :("00"+ o[k]).substr((""+ o[k]).length));
return format;
}(new Date()).format('yyyy-MM-dd hh:mm:ss S')
正则表达式的元字符有：
() [] {} \ ^ $ | ? * + .
var expression = /pattern/flags ;
flag:
g : 全局匹配
i: 不区分大小写
m: 表示多行模式
String类型：
charAt(offset): 返回单字符
charCodeAt(offset): 返回字符的编码值
slice(offset,end+1)
substring(offset,end+1)
substr(offset,count)
indexOf(string，offset) //从头开始,offset not null=从offset开始，返回的是整个string的offset
lastIndexOf(string,offset) //从尾开始,offset not null=从offset开始，返回的是整个string的offset
toUpperCase()
toLowerCase()
string.match(pattern)
string.search(pattern)
string.replace(pattern/string,string); //如果是pattern，替换所有，如果是string，只替换第一个
encodeURI() //对不属于URI本身的字符不做操作
encodeURIComponent()//对整个URI进行转义
decodeURI()
decodeURIComponent()
HTML 事件处理：
<input type="button" onclick="test()"></input>
DOM 0 级事件处理程序：
document.getElementById("btn").onclick=function(){alert("test")};
DOM 2 级事件处理程序：
IE:只支持冒泡， attachEvent / detachEvent
除了IE，其他： addEventListener(type,handler, capture/bubble) / removeEventListener
<div style="width:500px;height:500px;">
<p style="width:200px;height:200px;border:1px solid red;"><a href="#" id="a">sssssssssssss</a></p>
<p style="width:200px;height:200px;border:1px solid red;"><a href="#" id="b">sssssssssss</a></p>
</div>
<script type="text/javascript">
<!--
var ps = document.getElementsByTagName("p");
for(var i = 0; i< ps.length; i++){
if(ps[i].attachEvent){
ps[i].attachEvent("onclick",function(){
alert("this is p");
});
}else{
ps[i].addEventListener("click",function(event){
alert("this is p");
});
}
}
var a = document.getElementsByTagName("a");
if(a != undefined){
if(a[0].attachEvent){
a[0].attachEvent('onclick',function(event){
alert("this is a");
alert(event.type);
event.cancelBubble = true;
});
}else{
a[0].addEventListener("click",function(event){
alert("this is p");
event.stopPropagation();
});
}
}
//-->
</script>attachEventaddEventListener 是DOM 2 原生方法，所以才会有jquery出现。
$.xx 的扩展应用于非DOM对象。(function(){ $.say = function(what){ alert("say "+ what)}; })(Jquery)
$.fn.xx 是用来扩展DOM元素操作的方法
(function(){ $.fn.someNewMethod = function(data){ return this.each(function(){ alert($(this).attr("id")); }) } })(Jquery)