javascript高级程序设计 -- 读书笔记（二）

javascript高级编程 -- 读书笔记（1） :

http://blog.csdn.net/thc1987/archive/2011/05/13/6417361.aspx



继承

继承机制的实现:
JavaScript实现继承机制从基类入手.
本地类和宿主类不能作为基类.

JavaScript实现继承不止一种方式。因为JavaScript中的继承机制并不是明确规定的，而是模仿实现的。

对象冒充：
function ClassA(sColor){
this.color = sColor;
this.sayColor = function(){
alert(this.color);
}
}

function ClassB(sColor,sName){
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;

this.name = sName;
this.sayName = function(){
alert(this.name);
}
}
var objA = new ClassA("red");
var objB = new ClassB("blue","Jim");
objA.sayColor(); // red
objB.sayColor(); // blue
objB.sayName(); // Jim
在ClassB中，
“this.newMethod = ClassA” 将newMethod指向ClassA
“this.newMethod(sColor);” 运行newMethod()方法，相当于在ClassB中填充了ClassA中的内容
“delete this.newMethod;” 最后把引用删除，这样ClassB中的内容就独立了。

对象冒充支持多重继承，即一个类可以继承多个类。
function ClassZ(){
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;

this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}
如果ClassX和ClassY具有相同的属性和方法，则ClassY具有高优先级。

-----------------
call()方法：
例如：
function sayColor(sPrefix,sSuffix){
alert(sPrefix + this.color + sSuffix);
}

var o = new Object;
o.color = "red";
sayColor.call(o,"The color is ", " not blue");
这里call()方法中的第一个参数o赋值给sayColor中的this，第二个，第三个参数是字符串，最后打印信息。

利用call()方法修改之前的继承方法，修改后如下：
function ClassA(sColor){
this.color = sColor;
this.sayColor = function(){
alert(this.color);
}
}

function ClassB(sColor,sName){
//this.newMethod = ClassA;
//this.newMethod(sColor);
//delete this.newMethod;
// 这里的this等于ClassB对象
// 所以下面这句话就等于ClassB赋值了ClassA里面的内容
ClassA.call(this,sColor);

this.name = sName;
this.sayName = function(){
alert(this.name);
}
}
var objA = new ClassA("red");
var objB = new ClassB("blue","Jim");
objA.sayColor(); // red
objB.sayColor(); // blue
objB.sayName(); // Jim

----------------
apply()方法：
该方法有两个参数，用作this的对象和要传递给函数的参数的数组。
例如：
function sayColor(sPrefix,sSuffix){
alert(sPrefix + this.color + sSuffix);
}

var o = new Object;
o.color = "red";
sayColor.apply(o,new Array("The color is "," not blue"));

实现继承
function ClassA(sColor){
this.color = sColor;
this.sayColor = function(){
alert(this.color);
}
}

function ClassB(sColor,sName){
// 这里的this等于ClassB对象
// 所以下面这句话就等于ClassB赋值了ClassA里面的内容
ClassA.apply(this,new Array(sColor));

this.name = sName;
this.sayName = function(){
alert(this.name);
}
}
var objA = new ClassA("red");
var objB = new ClassB("blue","Jim");
objA.sayColor(); // red
objB.sayColor(); // blue
objB.sayName(); // Jim

---------------------
原型链：
function ClassA(){}

ClassA.prototype.color = "red";
ClassA.prototype.sayColor = function(){
alert(this.color);
}

function ClassB(){}

ClassB.prototype = new ClassA();

ClassB.prototype.name = "";
ClassB.prototype.sayName = function(){
alert(this.name);
}

var objA = new ClassA;
var objB = new ClassB;
objA.color = "red";
objB.color = "blue";
objB.name = "Jim";
objA.sayColor(); // red
objB.sayColor(); // blue
objB.sayName(); // Jim

alert(objB instanceof ClassA); // true
alert(objB instanceof ClassB); // true
注意：子类的所有属性和方法都必须出现自prototype属性被赋值后，因为在它之前赋值的所有方法都会被删除。
因为prototype属性被替换成了新对象，添加了新方法的原始对象将被销毁。所以，为ClassB类添加name属性和sayName()方法。

--------------------
混合方式：
即混合使用对象冒充和原型链。因为原型链无法使用构造参数。

function ClassA(sColor){
this.color = sColor;
}

ClassA.prototype.sayColor = function(){
alert(this.color);
}

function ClassB(sColor, sName){
ClassA.call(this, sColor); // 1
this.name = sName;
}

ClassB.prototype = new ClassA(); // 2

ClassB.prototype.sayName = function(){
alert(this.name);
}

var objA = new ClassA("red");
var objB = new ClassB("blue","Jim");
objA.sayColor(); // red
objB.sayColor(); // blue
objB.sayName(); // Jim
此例子中，代码1处，在ClassB的构造函数中，用对象冒充继承ClassA的sColor属性。
在代码2中用原型链继承ClassA类的方法。这种混合方式使用了原型链，所以instanceof运算符仍能运行。

===================
更实际的例子：
有个多边形类，它是父类，然后有个三角形类，是它的子类。设计如下：
// 多边形父类，iSides是边数
function Polygon(iSides){
this.sides = iSides;
}

// 多边形的面积
Polygon.prototype.getArea = function(){
// 返回0以便被子类覆盖
return 0;
}

// 三角形类
function Triangle(iBase,iHeight){
Polygon.call(this,3);
this.base = iBase;
this.height = iHeight;
}

Triangle.prototype = new Polygon();
Triangle.prototype.getArea = function(){
return 0.5*this.base * this.height;
}

var triangle = new Triangle(10,20);
alert(triangle.getArea());// 100

==================

浏览器中的JavaScript：

<script/>标签：
内部文件格式：略

外部文件格式：略

标签位置：
放在<head>中：
加载完页面主体后再被调用。

放在<body>中：
只要脚本所属的那部分页面被载入浏览器，脚本就会被执行。

XHTML中的演变：
type属性代替了language属性

CDATA：用于声明不应该被解析为标签的文本。如：> 会变成>，<会变成<，CDATA就避免了这种情况。
用法：
<script type="text/javascript">
<![CDATA[
// javascript code.
]]></script>

============
SVG中的JavaScript：
略，可以参考相关SVG资料。

============

BOM

windows对象:

窗口操作:
moveBy(dx,dy)
把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素.
dx为负值向左移动,dy为负值向上移动
moveTo(x,y)
移动浏览器窗口,使它的左上角位于用户屏幕的(x,y)处.
resizeBy(dx,dy)
相对于原来浏览器窗口,将宽度调整dx像素,高度调整dy像素
resizeTo(x,y)
把窗口的宽度调整到x,高度调整到y,不能用负数

window.open("http://www.baidu.com","_blank","height=150,width=300,top=10,left=10,resizable=yes,scrollable=yes,toolbar=no,status=yes,location=no")

系统对话框:
alert();
confirm()
prompt()

时间间隔和暂停:
setTimeout(fn,1000); 一秒后运行fn函数
setInterval(fn,1000); 每隔一秒执行一次fn函数
clearInterval(intervalId); 阻止某个intervalId

例子:
var i = 0;
var max = 100;
var intervalId = null;

function incNum(){
i++;
if(i==100){
clearInterval(intervalId);
}
}

intervalId = setInterval(incNum,1000);

-------------
历史:
window.history.go(-1); history.back();
后退
window.history.go(1); history.forward();
前进
<a href="javascript:history.go(-1)">back</a>

-------------
document对象:

alinkColor 激活链接的颜色
bgColor 页面背景色
fgColor 页面文本颜色
lastModified 最后修改页面的日期,是字符串
linkColor 链接的颜色
referrer 浏览器历史中后退一个位置的URL
title title标签中的文本
URL 当前页面的URL
vlinkColor 访问过的链接的颜色

document集合:

anchors 页面中所有锚的集合
applets 页面中所有applet集合
embeds 页面中所有嵌入式对象的集合
forms 页面中所有表单集合
images 页面中所有图像的集合
links 页面中所有链接的集合

-------------
location对象:

hash 返回URL中"#"后面的内容
host 服务器名字,如www.baidu.com
hostname 通常会等于host,有时候会省略www
href 当前载入页面完整的URL
pathname URL主机名后部分
port 端口
protocol 协议,//前面的部分,http:,ftp:
search 执行get请求的URL中的问号(?)后面的部分

--------------
navigator对象:

appCodeName 浏览器代码名的字符串(如:Mozilla)
appName 官方浏览器名的字符串
appMinorVersion 额外版本信息的字符串
appVersion 浏览器版本信息的字符串
browserLanguage 浏览器或操作系统语言的字符串
cookieEnabled 是否启用cookie
cpuClass cpu类别
javaEnabled() 是否启用Java
onLine 浏览器是否链接到Internet
platform 运行浏览器的计算机平台的字符串
plugins 安装在浏览器的插件数组
preference() 用于设置浏览器首选项的函数
systemLanguage 操作系统语言的字符串表示
taintEnabled() 说明是否启用了数据感染
userAgent 用户代理
userLanguage 操作系统语言

--------------
screen对象:

availheight 窗口可以使用的高度(像素)
aiailWidth 窗口可以使用的宽度(像素)
colorDepth 用户表示颜色的位数
height 屏幕的高度
width 屏幕的宽度

--------------

访问指定节点:

getElementsByTagName("img")
getElementsByName()
getElementsById()

--------------
创建和操作节点:
createAttribute(name)
用给定的name创建特性节点
createComment(text)
创建包含文本text的注释节点
createDocumentFragment()
创建文档碎片节点
createElement(tagname)
创建标签名为tagname的元素
createTextNode(text)
创建包含文本text的文本节点

例如,要添加<p>hello world</p>

var p = document.createElement("p");
var text = document.createTextNode("hello world");
p.appendChild(text);
document.body.appendChild(p);

removeChild()
删除一个节点,将这个节点作为函数的返回值返回
var p = document.getElementsByTagName("p")[0];
document.body.removeChild(p);

replaceChild(newTag,oldTag);
newTag代替 oldTag

--------------
table方法:
<table>元素添加的内容:
caption 指向<caption>元素
tBodies <tbody>元素集合
tFoot 指向<tFoot>元素
tHead 指向<tHead>元素
rows 表格中所有的行
createTHead() 创建<thead>,并放入表格中
createTFoot() 创建<tfoot>,并放入表格中
createCaption() 创建<caption>,并放入表格中
deleteTHead() 删除<thead>
deleteTFoot() 删除<tfoot>
deleteCaption() 删除<caption>
deleteRow(position) 删除指定的行
insertRow(position) 指定位置插入新的行

<tbody>元素添加的内容:
rows <tbody>中所有的行
deleteRow(position) 删除指定的行
insertRow(position) 指定位置插入新的行

<tr>元素添加的内容:
cells <tr>元素中所有的单元格
deleteCell(position) 删除指定的单元格
insertCell(position) 在指定位置上添加单元格

例子:
var table = document.createElement("table");
var tbody = document.createElement("tbody");

table.appendChild(tbody);
// 第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell,1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell,2,1"));
// 第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell,1,1"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell,2,1"));

document.body.appendChild(table);

================
正则表达式:
var s = "abdhsja";
var regex = new RegExp("a");
alert(regex.test(s));

var regex = /asd/g
alert(regex.test("asdf")) // true
alert(regex.exec("adsf")) // asd
alert("vvvasdfasdf".search(regex)) // 3

var s = "1234 5678";
var regex = /(/d{4}) (/d{4})/;
var s2 = s.replace(regex,"$2 $1");
alert(s2) // 5678 1234

----------------
RegExp对象:

实例属性:
global boolean值,表示是否设置全局
ignoreCase Boolean值,表示是否忽略大小写
lastIndex 整数,代表下次匹配将会从哪个字符位置开始(只有当使用exec()或test()函数才会填入,否则为0)
mutiline boolean值,表示多行模式是否匹配

静态属性:
input $_ 最后用于匹配的字符串
lastMatch $& 最后匹配的字符
lastParen $+ 最后匹配分组
leftContext $` 在上次匹配的前面的字串
multiline $* 用于指定是否所有的表达式都是用多行模式的布尔值
rightContext $' 在上次匹配之后的字串

例子:
var s = "this has been a short, short summer";
var regex = /(s)hort/g;
regex.test(s);
alert(RegExp.input) // this has been a short, short summer
alert(RegExp.lastMatch) // short
alert(RegExp.lastParen) // s
alert(RegExp.leftContext) // this has been a
alert(RegExp.rightContext) // , short summer