博客园_jenry（云飞扬）

用UglifyJS解析/压缩/格式化你的Javascript

2012-04-29T07:10:00Z

UglifyJS是基于 NodeJS 的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台（实现自己的CommonJS平台也非难事）。 UglifyJS通过解析重新生成JS代码的语法树，你可以通过AST以了解更多代码情况，或者自己来做一个不同的实现。UglifyJS解析器是在 parse-js.js 中实现的，它是非常优秀的 parse。

非安全转换

UglifyJS是基于 NodeJS 的Javascript语法解析/压缩/格式化工具，它支持任何CommonJS模块系统的Javascript平台（实现自己的CommonJS平台也非难事）。

UglifyJS通过解析重新生成JS代码的语法树，你可以通过AST以了解更多代码情况，或者自己来做一个不同的实现。UglifyJS解析器是在 parse-js.js 中实现的，它是非常优秀的 parse-js Common Lisp Library 的一部分。

（如果你正在查找UglifyJS的Common Lisp版本，点击这里）

UglifyJS的另一个重要部分是在 process.js 实现的，它用于检查并实现解析生成的AST：

通过AST进行Javascript代码的重新生成：如果你想格式化已经被压缩过的代码，可以选择缩进参数。你也可以打印出无空白（whitespace）的AST，以达到压缩的目的。
缩短变量名：UglifyJS通过分析代码并生成新的变量名称，依赖于作用域，这些名称通常被简化为单一字符，并能足够智能的处理全局变量，或者eval()调用及with{}块。换句话说，如果在某个作用域内使用了eval()或with{}，那么该作用域的所有变量及其父作用域的变量都不会被重新命名，并且所有指向这类变量的引用也不会被改变。
以下是一些优化规则会让代码更简洁更高效：

非安全转换

UglifyJS在保留语义的同时会尽量提高压缩比率，如果经过UglifyJS处理后你的代码逻辑失效了，或对UglifyJS的优化实现有更好的想法，都可有直接联系作者。

涉及到全局数组构造函数的调用

这时会进行如下转换：

newArray(1,2,3,4)=>[1,2,3,4]Array(a, b, c)=>[a,b,c]newArray(5)=>Array(5)newArray(a)=>Array(a)

在Array没有被重新定义之前，这些转换是安全的。UglifyJS也会对经过用户本地或全局重定义的Array进行处理，但CSSer建议还是不要这么做：

// case 1. 全局声明varArray;newArray(1,2, www.csser.com);Array(a, b);// 或者后声明newArray(1,2,3);varArray;// 或者定义为函数newArray(1,2,3);functionArray(){...}// case 2. 在函数内部声明(function(){
a =newArray(1,2,3);
b =Array(5,6);varArray;})();// 或者(function(Array){returnArray(5,6,7);})();// 或者(function(){returnnewArray(1,2,3,4);functionArray(){...}})();

// 等等.

安装

通过NPM安装

UglifyJS已经可以通过NPM进行安装：

npm install uglify-js

通过GitHub安装最新版本

## 克隆仓库
mkdir -p /where/you/wanna/put/it
cd /where/you/wanna/put/it
git clone git://github.com/mishoo/UglifyJS.git## 让uglify模块对NodeJS有效
mkdir -p ~/.node_libraries/
cd ~/.node_libraries/
ln -s /where/you/wanna/put/it/UglifyJS/uglify-js.js

## 支持命令行的方式调用
mkdir -p ~/bin
cd ~/bin
ln -s /where/you/wanna/put/it/UglifyJS/bin/uglifyjs
# (然后将 ~/bin 增加到 $PATH)

如何使用

UglifyJS提供了命令行工具，支持shell脚本的操作需要：

uglifyjs [选项...][文件名]

最后一个参数是要处理的JS文件名，如果不指定，则从标准输入（STDIN）读取。

支持的选项：

-b 或 --beautify - 输出格式化代码，当传入该参数，下面的附加选项用于更美观的控制格式化：
--ascii -默认 UglifyJS 不处理字符编码而直接输出 Unicode 字符，通过传入该参数将非ASCII编码的字符转化为\cXXXX的序列（输出总按照UTF8编码，但传入该选项能得到ASCII编码的输出）。
-nm 或 --no-mangle - 不改变变量名称
-ns 或 --no-squeeze - 不调用 ast_squeeze() 函数（该函数会做多种优化使得结果更小，可读性略有降低）
-mt 或 --mangle-toplevel - 在顶级作用域打乱变量名称（默认不开启）
--no-seqs - 当调用 ast_squeeze() 将会合并多个语句块为一个语句块，如 "a=10; b=20; foo()" 将被转换为 "a=10,b=20,foo()"
--no-dead-code - 默认 UglifyJS 将会删除不被用到的代码，传入该参数禁用此功能。
-nc 或 --no-copyright - 默认 uglifyjs 会在输出后的代码中添加版权信息等注释代码，传入该参数禁用此功能。
-o 文件名或 --output 文件名 - 指定输出文件名，如果不指定，则打印到标准输出（STDOUT）
--overwrite - 如果传入的JS代码来自文件而不是标准输入，传入该参数，输出会覆盖该文件。
--ast - 传入该参数会得到抽象的语法树而不是Javascript，对调试或了解内部代码很有用。
-v 或 --verbose - 在标准错误输出一些信息（目前的版本仅输出操作用时）
--extra - 开启附加优化，这些优化并未得到全面的测试。
--unsafe - 开启其他附加优化，这些优化已知在特定情况下并不安全，目前仅支持：
--max-line-len （默认32K字节） - 在32K字节出增加换行符，传入0禁用此功能。
--reserved-names - 一些类库会依赖一些变量，该参数指定的名称不会被混淆掉，多个用逗号隔开。

API

要想在Javascript中使用UglifyJS类库，参考下面的示例（以NodeJS为例）：

var jsp =require("uglify-js").parser;var pro =require("uglify-js").uglify;var orig_code ="Javascript代码";var ast = jsp.parse(orig_code);// 解析代码返回初始的AST
ast = pro.ast_mangle(ast);// 获取变量名称打乱的AST
ast = pro.ast_squeeze(ast);// 获取经过压缩优化的ASTvar final_code = pro.gen_code(ast);// 压缩后的代码

上面的代码会立刻进行代码的全面压缩，正如你所看到的，这里经历了一系列的步骤，你可有省略某些步骤以满足自己的需求。

这里的函数有一些参数，我们做些介绍：

jsp.parse(code, strict_semicolons) - 解析JS代码并返回AST。strict_semicolons是可选的，默认为false，当传入true，解析器会在预期为分号而实际没找到的情况下抛出错误。对于大多数JS代码我们不需要那么做，但严格约束代码很有益处。
pro.ast_mangle(ast, options) - 返回经过变量和函数名称混淆的AST，它支持以下选项：
pro.ast_squeeze(ast, options) - 开启深度优化以降低代码尺寸，返回新的AST，选项可以是一个hash，支持的参数有：
pro.gen_code(ast, options) - 通过AST生成JS代码。默认输出压缩代码，但可以通过调整选项参数获得格式化的输出。选项是可选的，如果传入必须为对象，支持以下选项：

结语

UglifyJS在语法上与Google压缩相似，在性能上是一流的，所以建议多多实践！

本文链接

javascript获取url参数和script标签中获取url参数

2012-03-28T11:16:00Z

url paramter：

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->//lastest:
var queryStrings=function() {//get url querystring
var params=document.location.search,reg=/(?:^\?|&)(.*?)=(.*?)(?=&|$)/g,temp,args={};
while((temp=reg.exec(params))!=null) args[temp[1]]=decodeURIComponent(temp[2]);
return args;
};
//只取一个：
var queryString=function(key){
return (document.location.search.match(new RegExp("(?:^\\?|&)"+key+"=(.*?)(?=&|$)"))||['',null])[1];
}
var args=getArgs();
alert(args.name+" | "+args.sex+" | "+args.age);
//测试链接：<a href="?name=abc&sex=男&age=12">test getQueryString</a>

script paramter:

ps:不要在方法中调用此方法，否则可能始终获取的是最后一个js的文件的参数，要在方法中使用，请先放到js加载时就会执行的变量中保存

本文链接

梁友栋-Barsky裁剪算法

2012-02-12T07:02:00Z

梁友栋-Barsky裁剪算法

Cyrus和Beck用参数化方法提出了比Cohen-Sutherland更有效的算法。后来梁友栋和Barsky独立地提出了更快的参数化线段裁剪算法，也称为Liany-Barsky（LB）算法。

一、梁友栋-Barsky裁剪算法思想：

我们知道，一条两端点为P₁（x₁，y₁）、P₂（x₂，y₂）的线段可以用参数方程形式表示：

x= x₁+ u·（x₂-x₁）= x₁+ u·Δx

y= y₁+ u·（y₂-y₁）= y₁+ u·Δy　

0≤u≤1

（1）

式中，Δx=x₂-x₁，Δy=y₂-y₁，参数u在0～1之间取值，P（x，y）代表了该线段上的一个点，其值由参数u确定，由公式可知，当u=0时，该点为P₁（x₁，y₁），当u=1时，该点为P₂（x₂，y₂）。如果点P（x，y）位于由坐标（x_min，y_min）和（x_max，y_max）所确定的窗口内，那么下式成立：

x_min≤x₁+ u·Δx≤x_max

y_min≤y₁+ u·Δy≤y_max

（2）

这四个不等式可以表示为：

u·p_k ≤q_k ， k=1，2，3，4

（3）

其中，p、q定义为：

p₁=-Δx， q₁=x₁-x_min p₂= Δx， q₂=x_max-x₁ p₃=-Δy， q₃=y₁-y_min p₄= Δy， q₄=y_max-y₁

（4）

从（4）式可以知道：任何平行于窗口某边界的直线，其p_k=0，k值对应于相应的边界（k=1，2，3，4对应于左、右、下、上边界）。如果还满足q_k<0，则线段完全在边界外，应舍弃该线段。如果p_k=0并且q_k≥0，则线段平行于窗口某边界并在窗口内，见图中所示。公式（4）式还告诉我们：

1、当p_k<0时，线段从裁剪边界延长线的外部延伸到内部；

2、当p_k>0时，线段从裁剪边界延长线的内部延伸到外部；

例如，当Δx≥0时，对于左边界p₁<0（p₁=-Δx），线段从左边界的外部到内部；

对于右边界p₂>0（p₂=Δx），线段从右边界的内部到外部。

当Δy<0时，对于下边界p₃>0（p₃=-Δy），线段从下边界的内部到外部；

对于上边界p₄<0（p₄=Δy），线段从上边界的外部到内部。

　当p_K≠0时，可以计算出参数u的值，它对应于无限延伸的直线与延伸的窗口边界k的交点，即：

u = q_k/p_k

（5）

对于每条直线，可以计算出参数u₁和u₂，该值定义了位于窗口内的线段部分：

1、u₁的值由线段从外到内遇到的矩形边界所决定（p_k<0），对这些边界计算r_k=q_k/p_k，u₁取0和各个r值之中的最大值。

2、u₂的值由线段从内到外遇到的矩形边界所决定（p_k>0），对这些边界计算r_k=q_k/p_k，u₂取0和各个r值之中的最小值。

3、如果u₁>u₂，则线段完全落在裁剪窗口之外，应当被舍弃；否则，被裁剪线段的端点可以由u₁和u₂计算出来。

二、梁友栋-Barsky裁剪算法实现：

1、初始化线段交点的参数：u₁=0，u₂=1；

2、计算出各个裁剪边界的p、q值；

3、根据p、q来判断：是舍弃线段还是改变交点的参数。

（1）当p<0时，参数r用于更新u₁；　（u₁=max{u₁，…，r_k}）

　（2）当p>0时，参数r用于更新u₂。　（u₂=min{u₂，…，r_k}）

　（3）如果更新了u₁或u₂后，使u₁>u₂，则舍弃该线段。

（4）当p=0且q<0时，因为线段平行于边界并且位于边界之外，则舍弃该线段。见下图所示。

4、p、q的四个值经判断后，如果该线段未被舍弃，则裁剪线段的端点坐标由参数u₁和u₂的值决定。

三、算法代码

1.C++

bool _rtPruneLB(RtVector& vector, RtRect rect)
{
RtVector dest;
bool flag = false;
float u1 = 0, u2 =1;
int p[4], q[4];
float r;
p[0] = vector.sp.x - vector.ep.x;
p[1] = vector.ep.x - vector.sp.x;
p[2] = vector.sp.y - vector.ep.y;
p[3] = -vector.sp.y + vector.ep.y;

q[0] = vector.sp.x - rect.x;
q[1] = rect.x + rect.w - vector.sp.x;
q[2] = vector.sp.y - rect.y;
q[3] = rect.y + rect.h - vector.sp.y;

for(int i = 0; i < 4; i++)
{
r = (float)q[i] / (float)p[i];
if(p[i] < 0)
{
u1 = max(u1,r);
if(u1 > u2)
{
flag = true;
}
}
if(p[i] > 0)
{
u2 = min(u2, r);
if(u1 > u2)
{
flag = true;
}
}
if(p[i] == 0 && p[i] < 0)
{
flag = true;
}
}

if ( flag )
{
return;
}
dest.sp.x = vector.sp.x - u1 *(vector.sp.x - vector.ep.x);
dest.sp.y = vector.sp.y - u1 *(vector.sp.y - vector.ep.y);
dest.ep.x = vector.sp.x - u2 *(vector.sp.x - vector.ep.x);
dest.ep.y = vector.sp.y - u2 *(vector.sp.y - vector.ep.y);
vector =dest;
}

2.javascript

/*****************************************
* Liang - Barsky裁剪算法
*****************************************/
/**
验证是否需要裁剪，计算斜率
@return boolean 是否裁减
*/
function ClipTest(p, q) {
var flag = true;
var r;
if (p < 0.0) {
r = q / p;
if (r > u2) {
flag = false;
}
else if (r > u1) {
u1 = r;
flag = true;
}
}
else if (p > 0) {
r = q / p;
if (r < u1) {
flag = false;
}
else if (r < u2) {
u2 = r;
flag = true;
}
}
else if (q < 0) {
flag = false;
}
return flag;
}

var u1, u2;
/**
根据矩形裁剪直线段
@param int wxl 左上角X坐标
@param int wxr 右下角X坐标
@param int wyt 右上角Y坐标
@param int wyb 右下角Y坐标
@param {X,Y} start 起点
@param {X,Y} stop 终点
@return Sring 坐标字符串，如'2323,4343,5454,6563'
*/
function ClipLine(wxl, wxr, wyt, wyb, start, stop) {
var dx, dy;
u1 = 0;
u2 = 1;
dx = stop.X - start.X;
if (ClipTest(-dx, start.X - wxl))
{
if (ClipTest(dx, wxr - start.X))
{
dy = stop.Y - start.Y;
if (ClipTest(-dy, start.Y - wyt))
{
if (ClipTest(dy, wyb - start.Y))
{
var arrCoords = [];
arrCoords[0] = parseInt(start.X) + parseInt(u1 * dx);
arrCoords[1] = parseInt(start.Y) + parseInt(u1 * dy);
arrCoords[2] = parseInt(start.X) + parseInt(u2 * dx);
arrCoords[3] = parseInt(start.Y) + parseInt(u2 * dy);
return arrCoords;
}
}
}
}
return [];
}

/**
根据矩形裁剪折线
@param int wxl 左上角X坐标
@param int wxr 右下角X坐标
@param int wyt 右上角Y坐标
@param int wyb 右下角Y坐标
@param String coords 折线的坐标串(用,隔开)
@return Array 矩形内的折线段，如['2323,343,545,656,766,878','122,898,232,4545','778,4545,2321,1434']
*/
function ClipPolyLineByRect(wxl, wxr, wyt, wyb, coords) {
var arrCoords = coords.split(',');
var clipLines = [];
for (var i = 0; i < (arrCoords.length - 2); i = i + 2) {
var temp = ClipLine(wxl, wxr, wyt, wyb, { X: arrCoords[i], Y: arrCoords[i + 1] }, { X: arrCoords[i + 2], Y: arrCoords[i + 3] });
if (temp.length > 0) {
if (clipLines.length > 0) {
//这里先拿上次最后一个点和现在第一个比较，如果相同，则他们属于同一条线，将坐标追加到后面，否则存入新的线
var lastCoords = clipLines[clipLines.length - 1];
var re = new RegExp(temp[0]+','+temp[1]+'$', 'i');
if (re.test(lastCoords)) {
clipLines[clipLines.length - 1] = lastCoords + ',' + temp[2] + ',' + temp[3];
}
else {
clipLines[clipLines.length] = temp.join(',');
}
} else {
clipLines[clipLines.length] = temp.join(',');
}
}
}
return clipLines;
}

/**
根据当前屏幕裁剪折线
@param String coords 折线的坐标串(用,隔开)
@return Array 裁减后的多条线段
*/
function ClipPolyLineByCurrentRegion(coords) {
var p1, p2;
p1 = { X: GetEGISPosXFromWin(0), Y: GetEGISPosYFromWin(0) };
p2 = { X: GetEGISPosXFromWin(MapWidth), Y: GetEGISPosYFromWin(MapHeight) };
return ClipPolyLineByRect(p1.X, p2.X, p1.Y, p2.Y, coords);
}

本文链接

Canvas里的globalCompositeOperation

2012-02-11T12:07:00Z

Canvas里的globalCompositeOperation是个很少用到的函数,不太熟悉程序绘图的同学们估计压根都不知道这玩意是干什么的.

简单来说,Composite(组合),就是对你在绘图中,后绘制的图形与先绘制的图形之间的组合显示效果,比如在国画中,你先画一笔红色,再来一笔绿色,相交的部分是一种混色,而在油画中,绿色就会覆盖掉相交部分的红色,这在程序绘图中的处理就是Composite,Canvas API中对应的函数就是globalCompositeOperation,跟globalAlpha一样,这个属性是全局的,所以在使用的时候要注意save和restore.

我在练习这个函数的时候,用的是chrome浏览器,但是测试结果却跟实际应该出现的结果不太一致,开始我以为是写错了,检查数遍却没有问题,疑惑之下换了各种浏览器来测试,真是囧啊,每个浏览器居然都不一样,连同核心的chrome和safari都不一样...下面是测试结果.

chrome

firefox

opera

safari

firefox官方网站给的实际效果图

下面是每一个选项的说明(我表达的可能不太明白,看图吧):

source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过

source-in 只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明,webkit两兄弟没有通过

source-out 只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透明,webkit两兄弟没有通过

source-atop 后绘制图形不相交的部分透明,相交部分由后绘制图形的填充覆盖,全部浏览器通过

destination-over 相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过

destination-in 只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明,webkit两兄弟没有通过

destination-out 只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明,全部浏览器通过

destination-atop 先绘制图形不相交的部分透明,相交部分由先绘制图形的填充覆盖,webkit两兄弟没有通过

lighter 相交部分由根据先后图形填充来增加亮度,全部浏览器通过

darker 相交部分由根据先后图形填充来降低亮度,chrome通过,firefox官方说Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0以后版本移除这个效果-0-,why?safari看似可以,但是无论你什么颜色,它都给填充成黑色,opera无效果

copy 只绘制后绘制图形,只有opera通过

xor 相交部分透明,全部浏览器通过

结果太令人无语了,特别是firefox那个新版本移除,我靠,为嘛啊?chrome和safari难兄难弟,成绩一塌糊涂,难道是webkit核心的问题?safari那个填充黑色很有IE6-中png透明问题的风范...opera表现很抢眼,只有一个效果未实现,继续努力!

评分及浏览器版本:
Chrome dev 7.0.503.0 : 7/12
Firefox 3.6.6 : 10/12
Opera 10.53 : 11/12
Safari 4.0.3(531.9.1) : 6/12

本文链接

JavaScript秘密花园 - Object, Prototype

2012-01-19T13:52:00Z

http://bonsaiden.github.com/JavaScript-Garden/zh/#object.forinloop

简介（Intro）
JavaScript秘密花园是一个不断更新的文档，主要关心JavaScript一些古怪用法。对于如何避免常见的错误，难以发现的问题，以及性能问题和不好的实践给出建议，初学者可以籍此深入了解JavaScript的语言特性。
JavaScript秘密花园不是用来教你JavaScript。为了更好的理解这篇文章的内容，你需要事先学习JavaScript的基础知识。在Mozilla开发者网络中有一系列非常棒的JavaScript学习向导。
关于作者（The authors）
这篇文章的作者是两位Stack Overflow的用户, Ivo Wetzel(写作) 和 Zhang Yi Jiang (设计)。
贡献者（Contributors）
Caio Rom?o (拼写检查)
Andreas Blixt (语言修正)
许可（License）
JavaScript花园在MIT license许可协议下发布，并存放在开源社区GitHub。如果你发现错误或者打字错误，请file an issue或者pull request。你也可以在Stack Overflow的聊天室JavaScript room找到我们。
中文翻译（Chinese Translation）
JavaScript Garden - 原文
JavaScript Garden - 中文翻译
译作者：三生石上
本中文翻译由三上石上原创，博客园首发，转载请注明出处。

对象（Objects） #top
JavaScript中所有变量都是对象，除了两个例外`null` 和 `undefined`。
?
1
`<code>false.toString()` `// 'false' [1, 2, 3].toString(); // '1,2,3' function Foo(){} Foo.bar = 1; Foo.bar; // 1 </code>`
一个常见的误解是数字的字面值（literal）不是对象。这是因为JavaScript解析器的一个错误，它试图将点操作符解析为浮点数字面值的一部分。
?
1
`<code>2.toString();` `// 出错：SyntaxError </code>`
有很多变通方法可以让数字的字面值看起来像对象。
?
1
`<code>2..toString();` `// 第二个点号可以正常解析 2 .toString(); // 注意点号前面的空格 (2).toString(); // 2先被计算 </code>`
对象作为数据类型（Objects as a data type）
JavaScript的对象可以作为哈希表使用，主要用来保存命名的键与值的对应关系。
使用对象的字面语法 - `{}` - 可以创建一个简单对象。这个新创建的对象从`Object.prototype`继承下面，没有任何自定义属性。
?
1
`<code>var` `foo = {};` `// 一个空对象 // 一个新对象，拥有一个值为12的自定义属性'test' var bar = {test: 12}; </code>`
访问属性（Accessing properties）
有两种方式来访问对象的属性，点操作符或者中括号操作符。
?
1
`<code>var` `foo = {name:` `'Kitten'} foo.name;` `// kitten foo['name']; // kitten var get = 'name'; foo[get]; // kitten foo.1234; // SyntaxError foo['1234']; // works </code>`
两种语法是等价的，但是中括号操作符在下面两种情况下依然有效 - 动态设置属性 - 属性名不是一个有效的变量名（译者注：比如属性名中包含空格，或者属性名是JS的关键词）（译者注：在JSLint语法检测工具中，点操作符是推荐做法）
删除属性（Deleting properties）
删除属性的唯一方法是使用`delete`操作符；设置属性为`undefined`或者`null`并不能真正的删除属性，而仅仅是移除了属性和值的关联。
?
1
`<code>var` `obj = { bar: 1, foo: 2, baz: 3 }; obj.bar = undefined; obj.foo =` `null; delete` `obj.baz; for(var` `i` `in` `obj) { ` `if` `(obj.hasOwnProperty(i)) { console.log(i,` `''` `+ obj[i]); } } </code>`
上面的输出结果有`bar undefined`和`foo null` - 只有`baz`被真正的删除了，所以从输出结果中消失。
属性名的语法（Notation of keys）
?
1
`<code>var` `test = { ` `'case':` `'I am a keyword so I must be notated as a string', ` `delete:` `'I am a keyword too so me'` `// 出错：SyntaxError }; </code>`
对象的属性名可以使用字符串或者普通字符声明。但是由于JavaScript解析器的另一个错误设计，上面的第二种声明方式在ECMAScript 5之前会抛出`SyntaxError`的错误。
这个错误的原因是`delete`是JavaScript语言的一个关键词；因此为了在更低版本的JavaScript引擎下也能正常运行，必须使用字符串字面值声明方式。

原型（The prototype） #top
JavaScript不包含传统的类继承模型，而是使用prototypical原型模型。
虽然这经常被当作是JavaScript的缺点被提及，其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单，但是实现JavaScript中的原型继承则要困难的多。（It is for example fairly trivial to build a classic model on top of it, while the other way around is a far more difficult task.）
由于JavaScript是唯一一个被广泛使用的基于原型继承的语言，所以理解两种继承模式的差异是需要一定时间的。
第一个不同之处在于JavaScript使用原型链的继承方式。
注意: 简单的使用`Bar.prototype = Foo.prototype`将会导致两个对象共享相同的原型。因此，改变任意一个对象的原型都会影响到另一个对象的原型，在大多数情况下这不是希望的结果。
?
1
`<code>function` `Foo() { ` `this.value = 42; } Foo.prototype = { method:` `function() {} }; function` `Bar() {} `// 设置Bar的prototype属性为Foo的实例对象 Bar.prototype = new Foo(); Bar.prototype.foo = 'Hello World'; // 修正Bar.prototype.constructor为Bar本身 Bar.prototype.constructor = Bar; var test = new Bar() // 创建Bar的一个新实例 // 原型链 test [Bar的实例] Bar.prototype [Foo的实例] { foo: 'Hello World' } Foo.prototype {method: ...}; Object.prototype {toString: ... /* etc. /}; </code>
上面的例子中，`test`对象从`Bar.prototype`和`Foo.prototype`继承下来；因此，它能否访问`Foo`的原型方法`method`。但是它不能访问`Foo`的实例属性`value`，因为这个属性在`Foo`的构造函数中定义。（But it will not have access to the property `value` of a `Foo` instance, since that property gets defined in the constructorof `Foo`. But this constructor has to be called explicitly.）
（译者注：我认为这个描述是错误的，test.value是可以访问的。因为在设置Bar.prototype = new Foo();时，`value`也就成为Bar.prototype上的一个属性。如果你有不同观点，可以到我的博客评论。）
注意: 不要使用`Bar.prototype = Foo`，因为这不会执行`Foo`的原型，而是指向函数`Foo`。因此原型链将会回溯到`Function.prototype`而不是`Foo.prototype`，因此`method`将不会在Bar的原型链上。
属性查找（Property lookup）
当查找一个对象的属性时，JavaScript会向上遍历原型链，直到找到给定名称的属性为止。
到查找到达原型链的顶部 - 也就是`Object.prototype` - 但是仍然没有找到指定的属性，就会返回undefined。
原型属性（The prototype property）
当原型属性用来创建原型链时，可以把任何类型的值赋给它（prototype）。然而将原子类型赋给prototype的操作将会被忽略。
?
1
`<code>function` `Foo() {} Foo.prototype = 1;` `// no effect </code>`
而将对象赋值给prototype，正如上面的例子所示，将会动态的创建原型链。
性能（Performance）
如果一个属性在原型链的上端，则对于查找时间将带来不利影响。特别的，试图获取一个不存在的属性将会遍历整个原型链。
并且，当使用for-in循环遍历对象的属性时，原型链上的所有属性都将被访问。
扩展内置类型的原型（Extension of native prototypes）
一个错误特性被经常使用，那就是扩展`Object.prototype`或者其他内置类型的原型对象。
这种技术被称之为monkey patching并且会破坏封装。虽然它被广泛的应用到一些JS类库中比如Prototype,但是我仍然不认为为内置类型添加一些非标准*的函数是个好主意。
扩展内置类型的唯一理由是为了和新的JavaScript保持一致，比如`Array.forEach`。（译者注：这是编程领域常用的一种方式，称之为Backport，也就是将新的补丁添加到老版本中。）The only good reason for extending a built-in prototype is to backport the features of newer JavaScript engines; for example, `Array.forEach`.
总结（In conclusion）
在写复杂的JavaScript应用之前，充分理解原型链继承的工作方式是每个JavaScript程序员必修的功课。要提防原型链过长带来的性能问题，并知道如何通过缩短原型链来提高性能。更进一步，绝对不要扩展内置类型的原型，除非是为了和新的JavaScript引擎兼容。
本文链接

JavaScript继承详解（六）

2012-01-19T13:38:00Z

在本章中，我们将分析Prototypejs中关于JavaScript继承的实现。 Prototypejs是最早的JavaScript类库，可以说是JavaScript类库的鼻祖。我在几年前接触的第一个JavaScript类库就是这位，因此Prototypejs有着广泛的群众基础。
不过当年Prototypejs中的关于继承的实现相当的简单，源代码就寥寥几行，我们来看下。

早期Prototypejs中继承的实现

源码：

调用方式：

很原始的感觉对吧，在子类函数中没有提供调用父类函数的途径。

Prototypejs 1.6以后的继承实现

首先来看下调用方式：

// 通过Class.create创建一个新类
var Person = Class.create({
// initialize是构造函数
initialize: function(name) {
this.name = name;
},
getName: function(prefix) {
return prefix + this.name;
}
});

// Class.create的第一个参数是要继承的父类
var Employee = Class.create(Person, {
// 通过将子类函数的第一个参数设为$super来引用父类的同名函数
// 比较有创意，不过内部实现应该比较复杂，至少要用一个闭包来设置$super的上下文this指向当前对象
initialize: function($super, name, employeeID) {
$super(name);
this.employeeID = employeeID;
},
getName: function($super) {
return $super("Employee name: ");
}
});

var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.getName()); // "Employee name: ZhangSan"

这里我们将Prototypejs 1.6.0.3中继承实现单独取出来，那些不想引用整个prototype库而只想使用prototype式继承的朋友，可以直接把下面代码拷贝出来保存为JS文件就行了。

首先，我们需要先解释下Prototypejs中一些方法的定义。

argumentNames: 获取函数的参数数组 function init($super, name, employeeID) {
}
console.log(init.argumentNames().join(",")); // "$super,name,employeeID"
bind: 绑定函数的上下文this到一个新的对象（一般是函数的第一个参数） var name = "window";
var p = {
name: "Lisi",
getName: function() {
return this.name;
}
};

console.log(p.getName()); // "Lisi"
console.log(p.getName.bind(window)()); // "window"
wrap: 把当前调用函数作为包裹器wrapper函数的第一个参数 var name = "window";
var p = {
name: "Lisi",
getName: function() {
return this.name;
}
};

function wrapper(originalFn) {
return "Hello: " + originalFn();
}

console.log(p.getName()); // "Lisi"
console.log(p.getName.bind(window)()); // "window"
console.log(p.getName.wrap(wrapper)()); // "Hello: window"
console.log(p.getName.wrap(wrapper).bind(p)()); // "Hello: Lisi"
有一点绕口，对吧。这里要注意的是wrap和bind调用返回的都是函数，把握住这个原则，就很容易看清本质了。

对这些函数有了一定的认识之后，我们再来解析Prototypejs继承的核心内容。这里有两个重要的定义，一个是Class.extend，另一个是Class.Methods.addMethods。

再来看addMethods做了哪些事情：

Class.Methods = {
addMethods: function(source) {
// 如果父类存在，ancestor指向父类的原型对象
var ancestor = this.superclass && this.superclass.prototype;
var properties = Object.keys(source);
// Firefox和Chrome返回1，IE8返回0，所以这个地方特殊处理
if (!Object.keys({ toString: true }).length)
properties.push("toString", "valueOf");

// 循环子类原型定义的所有属性，对于那些和父类重名的函数要重新定义
for (var i = 0, length = properties.length; i < length; i++) {
// property为属性名，value为属性体（可能是函数，也可能是对象）
var property = properties[i], value = source[property];
// 如果父类存在，并且当前当前属性是函数，并且此函数的第一个参数为 $super
if (ancestor && Object.isFunction(value) && value.argumentNames().first() == "$super") {
var method = value;
// 下面三行代码是精华之所在，大概的意思：
// - 首先创建一个自执行的匿名函数返回另一个函数，此函数用于执行父类的同名函数
// - （因为这是在循环中，我们曾多次指出循环中的函数引用局部变量的问题）
// - 其次把这个自执行的匿名函数的作为method的第一个参数（也就是对应于形参$super）
// 不过，窃以为这个地方作者有点走火入魔，完全没必要这么复杂，后面我会详细分析这段代码。
value = (function(m) {
return function() { return ancestor[m].apply(this, arguments) };
})(property).wrap(method);

value.valueOf = method.valueOf.bind(method);
// 因为我们改变了函数体，所以重新定义函数的toString方法
// 这样用户调用函数的toString方法时，返回的是原始的函数定义体
value.toString = method.toString.bind(method);
}
this.prototype[property] = value;
}

return this;
}
};

上面的代码中我曾有“走火入魔”的说法，并不是对作者的亵渎，只是觉得作者对JavaScript中的一个重要准则（通过自执行的匿名函数创建作用域）运用的有点过头。

value = (function(m) {
return function() { return ancestor[m].apply(this, arguments) };
})(property).wrap(method);

其实这段代码和下面的效果一样：

value = ancestor[property].wrap(method);

我们把wrap函数展开就能看的更清楚了：

value = (function(fn, wrapper) {
var __method = fn;
return function() {
return wrapper.apply(this, [__method.bind(this)].concat($A(arguments)));
}
})(ancestor[property], method);

可以看到，我们其实为父类的函数ancestor[property]通过自执行的匿名函数创建了作用域。而原作者是为property创建的作用域。两则的最终效果是一致的。

我们对Prototypejs继承的重实现

分析了这么多，其实也不是很难，就那么多概念，大不了换种表现形式。下面我们就用前几章我们自己实现的jClass来实现Prototypejs形式的继承。

// 注意：这是我们自己实现的类似Prototypejs继承方式的代码，可以直接拷贝下来使用

// 这个方法是借用Prototypejs中的定义
function argumentNames(fn) {
var names = fn.toString().match(/^[\s$]*function[^(]*\(([^$]*)\)/)[1].replace(/\s+/g, '').split(',');
return names.length == 1 && !names[0] ? [] : names;
}

function jClass(baseClass, prop) {
// 只接受一个参数的情况 - jClass(prop)
if (typeof (baseClass) === "object") {
prop = baseClass;
baseClass = null;
}

// 本次调用所创建的类（构造函数）
function F() {
// 如果父类存在，则实例对象的baseprototype指向父类的原型
// 这就提供了在实例对象中调用父类方法的途径
if (baseClass) {
this.baseprototype = baseClass.prototype;
}
this.initialize.apply(this, arguments);
}

// 如果此类需要从其它类扩展
if (baseClass) {
var middleClass = function() {};
middleClass.prototype = baseClass.prototype;
F.prototype = new middleClass();
F.prototype.constructor = F;
}

// 覆盖父类的同名函数
for (var name in prop) {
if (prop.hasOwnProperty(name)) {
// 如果此类继承自父类baseClass并且父类原型中存在同名函数name
if (baseClass &&
typeof (prop[name]) === "function" &&
argumentNames(prop[name])[0] === "$super") {
// 重定义子类的原型方法prop[name]
// - 这里面有很多JavaScript方面的技巧，如果阅读有困难的话，可以参阅我前面关于JavaScript Tips and Tricks的系列文章
// - 比如$super封装了父类方法的调用，但是调用时的上下文指针要指向当前子类的实例对象
// - 将$super作为方法调用的第一个参数
F.prototype[name] = (function(name, fn) {
return function() {
var that = this;
$super = function() {
return baseClass.prototype[name].apply(that, arguments);
};
return fn.apply(this, Array.prototype.concat.apply($super, arguments));
};
})(name, prop[name]);

} else {
F.prototype[name] = prop[name];
}
}
}

return F;
};

调用方式和Prototypejs的调用方式保持一致：

经过本章的学习，就更加坚定了我们的信心，像Prototypejs形式的继承我们也能够轻松搞定。以后的几个章节，我们会逐步分析mootools,Extjs等JavaScript类库中继承的实现，敬请期待。

本文链接

JavaScript继承详解（四）

2012-01-19T13:37:00Z

在本章中，我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript。 Crockford是JavaScript开发社区最知名的权威，是JSON、JSLint、JSMin和ADSafe之父，是《JavaScript: The Good Parts》的作者。现在是Yahoo的资深JavaScript架构师，参与YUI的设计开发。这里有一篇文章详细介绍了Crockford的生平和著作。当然Crockford也是我等小辈崇拜的对象。

调用方式

首先让我们看下使用Crockford式继承的调用方式：注意：代码中的method、inherits、uber都是自定义的对象，我们会在后面的代码分析中详解。

// 定义Person类
function Person(name) {
this.name = name;
}
// 定义Person的原型方法
Person.method("getName", function() {
return this.name;
});

// 定义Employee类
function Employee(name, employeeID) {
this.name = name;
this.employeeID = employeeID;
}
// 指定Employee类从Person类继承
Employee.inherits(Person);
// 定义Employee的原型方法
Employee.method("getEmployeeID", function() {
return this.employeeID;
});
Employee.method("getName", function() {
// 注意，可以在子类中调用父类的原型方法
return "Employee name: " + this.uber("getName");
});
// 实例化子类
var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.getName()); // "Employee name: ZhangSan"

这里面有几处不得不提的硬伤：

子类从父类继承的代码必须在子类和父类都定义好之后进行，并且必须在子类原型方法定义之前进行。
虽然子类方法体中可以调用父类的方法，但是子类的构造函数无法调用父类的构造函数。
代码的书写不够优雅，比如原型方法的定义以及调用父类的方法（不直观）。

当然Crockford的实现还支持子类中的方法调用带参数的父类方法，如下例子：

代码分析

首先method函数的定义就很简单了：

Function.prototype.method = function(name, func) {
// this指向当前函数，也即是typeof(this) === "function"
this.prototype[name] = func;
return this;
};

要特别注意这里this的指向。当我们看到this时，不能仅仅关注于当前函数，而应该想到当前函数的调用方式。比如这个例子中的method我们不会通过new的方式调用，所以method中的this指向的是当前函数。

inherits函数的定义有点复杂：

Function.method('inherits', function (parent) {
// 关键是这一段：this.prototype = new parent()，这里实现了原型的引用
var d = {}, p = (this.prototype = new parent());

// 只为子类的原型增加uber方法，这里的Closure是为了在调用uber函数时知道当前类的父类的原型（也即是变量 - v）
this.method('uber', function uber(name) {
// 这里考虑到如果name是存在于Object.prototype中的函数名的情况
// 比如 "toString" in {} === true
if (!(name in d)) {
// 通过d[name]计数，不理解具体的含义
d[name] = 0;
}
var f, r, t = d[name], v = parent.prototype;
if (t) {
while (t) {
v = v.constructor.prototype;
t -= 1;
}
f = v[name];
} else {
// 个人觉得这段代码有点繁琐，既然uber的含义就是父类的函数，那么f直接指向v[name]就可以了
f = p[name];
if (f == this[name]) {
f = v[name];
}
}
d[name] += 1;
// 执行父类中的函数name，但是函数中this指向当前对象
// 同时注意使用Array.prototype.slice.apply的方式对arguments进行截断（因为arguments不是标准的数组，没有slice方法）
r = f.apply(this, Array.prototype.slice.apply(arguments, [1]));
d[name] -= 1;
return r;
});
return this;
});

注意，在inherits函数中还有一个小小的BUG，那就是没有重定义constructor的指向，所以会发生如下的错误：

var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.getName()); // "Employee name: ZhangSan"
console.log(zhang.constructor === Employee); // false
console.log(zhang.constructor === Person); // true

改进建议

根据前面的分析，个人觉得method函数必要性不大，反而容易混淆视线。而inherits方法可以做一些瘦身（因为Crockford可能考虑更多的情况，原文中介绍了好几种使用inherits的方式，而我们只关注其中的一种），并修正了constructor的指向错误。

Function.prototype.inherits = function(parent) {
this.prototype = new parent();
this.prototype.constructor = this;
this.prototype.uber = function(name) {
f = parent.prototype[name];
return f.apply(this, Array.prototype.slice.call(arguments, 1));
};
};

调用方式：

有点意思

在文章的结尾，Crockford居然放出了这样的话：

I have been writing JavaScript for 8 years now, and I have never once found need to use an uber function. The super idea is fairly important in the classical pattern, but it appears to be unnecessary in the prototypal and functional patterns. I now see my early attempts to support the classical model in JavaScript as a mistake.

可见Crockford对在JavaScript中实现面向对象的编程不赞成，并且声称JavaScript应该按照原型和函数的模式（the prototypal and functional patterns）进行编程。不过就我个人而言，在复杂的场景中如果有面向对象的机制会方便的多。但谁有能担保呢，即使像jQuery UI这样的项目也没用到继承，而另一方面，像Extjs、Qooxdoo则极力倡导一种面向对象的JavaScript。甚至Cappuccino项目还发明一种Objective-J语言来实践面向对象的JavaScript。

本文链接

JavaScript继承详解（五）

2012-01-19T13:37:00Z

在本章中，我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance。 John Resig作为jQuery的创始人而声名在外。是《Pro JavaScript Techniques》的作者，而且Resig将会在今年秋天推出一本书《JavaScript Secrets》，非常期待。

调用方式

调用方式非常优雅：注意：代码中的Class、extend、_super都是自定义的对象，我们会在后面的代码分析中详解。

说实话，对于完成本系列文章的目标-继承-而言，真找不到什么缺点。方法一如jQuery一样简洁明了。

代码分析

为了一个漂亮的调用方式，内部实现的确复杂了很多，不过这些也是值得的 - 一个人的思考带给了无数程序员快乐的微笑 - 嘿嘿，有点肉麻。不过其中的一段代码的确迷惑我一段时间：

fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

我曾在几天前的博客中写过一篇文章专门阐述这个问题，有兴趣可以向前翻一翻。

// 自执行的匿名函数创建一个上下文，避免引入全局变量
(function() {
// initializing变量用来标示当前是否处于类的创建阶段，
// - 在类的创建阶段是不能调用原型方法init的
// - 我们曾在本系列的第三篇文章中详细阐述了这个问题
// fnTest是一个正则表达式，可能的取值为（/\b_super\b/ 或 /.*/）
// - 对 /xyz/.test(function() { xyz; }) 的测试是为了检测浏览器是否支持test参数为函数的情况
// - 不过我对IE7.0,Chrome2.0,FF3.5进行了测试，此测试都返回true。
// - 所以我想这样对fnTest赋值大部分情况下也是对的：fnTest = /\b_super\b/;
var initializing = false, fnTest = /xyz/.test(function() { xyz; }) ? /\b_super\b/ : /.*/;
// 基类构造函数
// 这里的this是window，所以这整段代码就向外界开辟了一扇窗户 - window.Class
this.Class = function() { };
// 继承方法定义
Class.extend = function(prop) {
// 这个地方很是迷惑人，还记得我在本系列的第二篇文章中提到的么
// - this具体指向什么不是定义时能决定的，而是要看此函数是怎么被调用的
// - 我们已经知道extend肯定是作为方法调用的，而不是作为构造函数
// - 所以这里this指向的不是Object，而是Function（即是Class），那么this.prototype就是父类的原型对象
// - 注意：_super指向父类的原型对象，我们会在后面的代码中多次碰见这个变量
var _super = this.prototype;
// 通过将子类的原型指向父类的一个实例对象来完成继承
// - 注意：this是基类构造函数（即是Class）
initializing = true;
var prototype = new this();
initializing = false;
// 我觉得这段代码是经过作者优化过的，所以读起来非常生硬，我会在后面详解
for (var name in prop) {
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn) {
return function() {
var tmp = this._super;
this._super = _super[name];
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// 这个地方可以看出，Resig很会伪装哦
// - 使用一个同名的局部变量来覆盖全局变量，很是迷惑人
// - 如果你觉得拗口的话，完全可以使用另外一个名字，比如function F()来代替function Class()
// - 注意：这里的Class不是在最外层定义的那个基类构造函数
function Class() {
// 在类的实例化时，调用原型方法init
if (!initializing && this.init)
this.init.apply(this, arguments);
}
// 子类的prototype指向父类的实例（完成继承的关键）
Class.prototype = prototype;
// 修正constructor指向错误
Class.constructor = Class;
// 子类自动获取extend方法，arguments.callee指向当前正在执行的函数
Class.extend = arguments.callee;
return Class;
};
})();

下面我会对其中的for-in循环进行解读，把自执行的匿名方法用一个局部函数来替换，这样有利于我们看清真相：

写到这里，大家是否觉得Resig的实现和我们在第三章一步一步实现的jClass很类似。其实在写这一系列的文章之前，我已经对prototype、mootools、extjs、 jQuery-Simple-Inheritance、Crockford-Classical-Inheritance这些实现有一定的了解，并且大部分都在实际项目中使用过。在第三章中实现jClass也参考了Resig的实现，在此向Resig表示感谢。下来我们就把jClass改造成和这里的Class具有相同的行为。

我们的实现

将我们在第三章实现的jClass改造成目前John Resig所写的形式相当简单，只需要修改其中的两三行就行了：

JUST COOL!

本文链接

JavaScript继承详解（三）

2012-01-19T13:32:00Z

在第一章中，我们使用构造函数和原型的方式在JavaScript的世界中实现了类和继承，但是存在很多问题。这一章我们将会逐一分析这些问题，并给出解决方案。

注：本章中的jClass的实现参考了Simple JavaScript Inheritance的做法。

首先让我们来回顾一下第一章中介绍的例子：

修正constructor的指向错误

从上一篇文章中关于constructor的描述，我们知道Employee实例的constructor会有一个指向错误，如下所示：

var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.constructor === Employee); // false
console.log(zhang.constructor === Object); // true

我们需要简单的修正：

function Employee(name, employeeID) {
this.name = name;
this.employeeID = employeeID;
}
Employee.prototype = new Person();
Employee.prototype.constructor = Employee;
Employee.prototype.getEmployeeID = function() {
return this.employeeID;
};
var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.constructor === Employee); // true
console.log(zhang.constructor === Object); // false

创建Employee类时实例化Person是不合适的

但另一方面，我们又必须依赖于这种机制来实现继承。解决办法是不在构造函数中初始化数据，而是提供一个原型方法（比如init）来初始化数据。

// 空的构造函数
function Person() {
}
Person.prototype = {
init: function(name) {
this.name = name;
},
getName: function() {
return this.name;
}
}
// 空的构造函数
function Employee() {
}
// 创建类的阶段不会初始化父类的数据，因为Person是一个空的构造函数
Employee.prototype = new Person();
Employee.prototype.constructor = Employee;
Employee.prototype.init = function(name, employeeID) {
this.name = name;
this.employeeID = employeeID;
};
Employee.prototype.getEmployeeID = function() {
return this.employeeID;
};

这种方式下，必须在实例化一个对象后手工调用init函数，如下：

var zhang = new Employee();
zhang.init("ZhangSan", "1234");
console.log(zhang.getName()); // "ZhangSan"

如何自动调用init函数？

必须达到两个效果，构造类时不要调用init函数和实例化对象时自动调用init函数。看来我们需要在调用空的构造函数时有一个状态标示。

// 创建一个全局的状态标示 - 当前是否处于类的构造阶段
var initializing = false;
function Person() {
if (!initializing) {
this.init.apply(this, arguments);
}
}
Person.prototype = {
init: function(name) {
this.name = name;
},
getName: function() {
return this.name;
}
}
function Employee() {
if (!initializing) {
this.init.apply(this, arguments);
}
}
// 标示当前进入类的创建阶段，不会调用init函数
initializing = true;
Employee.prototype = new Person();
Employee.prototype.constructor = Employee;
initializing = false;
Employee.prototype.init = function(name, employeeID) {
this.name = name;
this.employeeID = employeeID;
};
Employee.prototype.getEmployeeID = function() {
return this.employeeID;
};

// 初始化类实例时，自动调用类的原型函数init，并向init中传递参数
var zhang = new Employee("ZhangSan", "1234");
console.log(zhang.getName()); // "ZhangSan"

但是这样就必须引入全局变量，这是一个不好的信号。

如何避免引入全局变量initializing？

我们需要引入一个全局的函数来简化类的创建过程，同时封装内部细节避免引入全局变量。

使用jClass函数来创建类和继承类的方法：

OK，现在创建类和实例化类的方式看起来优雅多了。但是这里面还存在明显的瑕疵，Employee的初始化函数init无法调用父类的同名方法。

如何调用父类的同名方法？

我们可以通过为实例化对象提供一个base的属性，来指向父类（构造函数）的原型，如下：

调用方式：

目前为止，我们已经修正了在第一章手工实现继承的种种弊端。通过我们自定义的jClass函数来创建类和子类，通过原型方法init初始化数据，通过实例属性base来调用父类的原型函数。

唯一的缺憾是调用父类的代码太长，并且不好理解，如果能够按照如下的方式调用岂不是更妙：

var Employee = jClass(Person, {
init: function(name, employeeID) {
// 如果能够这样调用，就再好不过了
this.base(name);
this.employeeID = employeeID;
}
});

优化jClass函数

// 当前是否处于创建类的阶段
var initializing = false;
function jClass(baseClass, prop) {
// 只接受一个参数的情况 - jClass(prop)
if (typeof (baseClass) === "object") {
prop = baseClass;
baseClass = null;
}
// 本次调用所创建的类（构造函数）
function F() {
// 如果当前处于实例化类的阶段，则调用init原型函数
if (!initializing) {
// 如果父类存在，则实例对象的baseprototype指向父类的原型
// 这就提供了在实例对象中调用父类方法的途径
if (baseClass) {
this.baseprototype = baseClass.prototype;
}
this.init.apply(this, arguments);
}
}
// 如果此类需要从其它类扩展
if (baseClass) {
initializing = true;
F.prototype = new baseClass();
F.prototype.constructor = F;
initializing = false;
}
// 覆盖父类的同名函数
for (var name in prop) {
if (prop.hasOwnProperty(name)) {
// 如果此类继承自父类baseClass并且父类原型中存在同名函数name
if (baseClass &&
typeof (prop[name]) === "function" &&
typeof (F.prototype[name]) === "function") {

// 重定义函数name -
// 首先在函数上下文设置this.base指向父类原型中的同名函数
// 然后调用函数prop[name]，返回函数结果

// 注意：这里的自执行函数创建了一个上下文，这个上下文返回另一个函数，
// 此函数中可以应用此上下文中的变量，这就是闭包（Closure）。
// 这是JavaScript框架开发中常用的技巧。
F.prototype[name] = (function(name, fn) {
return function() {
this.base = baseClass.prototype[name];
return fn.apply(this, arguments);
};
})(name, prop[name]);

} else {
F.prototype[name] = prop[name];
}
}
}
return F;
};

此时，创建类与子类以及调用方式都显得非常优雅，请看：

至此，我们已经创建了一个完善的函数jClass，帮助我们在JavaScript中以比较优雅的方式实现类和继承。

在以后的章节中，我们会陆续分析网上一些比较流行的JavaScript类和继承的实现。不过万变不离其宗，那些实现也无非把我们这章中提到的概念颠来簸去的“炒作”，为的就是一种更优雅的调用方式。

本文链接

JavaScript继承详解（二）

2012-01-19T13:24:00Z

这一章我们将会重点介绍JavaScript中几个重要的属性（this、constructor、prototype），这些属性对于我们理解如何实现JavaScript中的类和继承起着至关重要的作用。

this

this表示当前对象，如果在全局作用范围内使用this，则指代当前页面对象window；如果在函数中使用this，则this指代什么是根据运行时此函数在什么对象上被调用。我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。

先看一个在全局作用范围内使用this的例子：

函数中的this是在运行时决定的，而不是函数定义时，如下：

// 定义一个全局函数
function foo() {
console.log(this.fruit);
}
// 定义一个全局变量，等价于window.fruit = "apple";
var fruit = "apple";
// 此时函数foo中this指向window对象
// 这种调用方式和window.foo();是完全等价的
foo(); // "apple"

// 自定义一个对象，并将此对象的属性foo指向全局函数foo
var pack = {
fruit: "orange",
foo: foo
};
// 此时函数foo中this指向window.pack对象
pack.foo(); // "orange"

全局函数apply和call可以用来改变函数中this的指向，如下：

// 定义一个全局函数
function foo() {
console.log(this.fruit);
}

// 定义一个全局变量
var fruit = "apple";
// 自定义一个对象
var pack = {
fruit: "orange"
};

// 等价于window.foo();
foo.apply(window); // "apple"
// 此时foo中的this === pack
foo.apply(pack); // "orange"

注：apply和call两个函数的作用相同，唯一的区别是两个函数的参数定义不同。

因为在JavaScript中函数也是对象，所以我们可以看到如下有趣的例子：

// 定义一个全局函数
function foo() {
if (this === window) {
console.log("this is window.");
}
}

// 函数foo也是对象，所以可以定义foo的属性boo为一个函数
foo.boo = function() {
if (this === foo) {
console.log("this is foo.");
} else if (this === window) {
console.log("this is window.");
}
};
// 等价于window.foo();
foo(); // this is window.

// 可以看到函数中this的指向调用函数的对象
foo.boo(); // this is foo.

// 使用apply改变函数中this的指向
foo.boo.apply(window); // this is window.

prototype

我们已经在第一章中使用prototype模拟类和继承的实现。 prototype本质上还是一个JavaScript对象。并且每个函数都有一个默认的prototype属性。如果这个函数被用在创建自定义对象的场景中，我们称这个函数为构造函数。比如下面一个简单的场景：

// 构造函数
function Person(name) {
this.name = name;
}
// 定义Person的原型，原型中的属性可以被自定义对象引用
Person.prototype = {
getName: function() {
return this.name;
}
}
var zhang = new Person("ZhangSan");
console.log(zhang.getName()); // "ZhangSan"

作为类比，我们考虑下JavaScript中的数据类型 - 字符串（String）、数字（Number）、数组（Array）、对象（Object）、日期（Date）等。我们有理由相信，在JavaScript内部这些类型都是作为构造函数来实现的，比如：

// 定义数组的构造函数，作为JavaScript的一种预定义类型
function Array() {
// ...
}

// 初始化数组的实例
var arr1 = new Array(1, 56, 34, 12);
// 但是，我们更倾向于如下的语法定义：
var arr2 = [1, 56, 34, 12];

同时对数组操作的很多方法（比如concat、join、push）应该也是在prototype属性中定义的。实际上，JavaScript所有的固有数据类型都具有只读的prototype属性（这是可以理解的：因为如果修改了这些类型的prototype属性，则哪些预定义的方法就消失了），但是我们可以向其中添加自己的扩展方法。

// 向JavaScript固有类型Array扩展一个获取最小值的方法
Array.prototype.min = function() {
var min = this[0];
for (var i = 1; i < this.length; i++) {
if (this[i] < min) {
min = this[i];
}
}
return min;
};

// 在任意Array的实例上调用min方法
console.log([1, 56, 34, 12].min()); // 1

注意：这里有一个陷阱，向Array的原型中添加扩展方法后，当使用for-in循环数组时，这个扩展方法也会被循环出来。下面的代码说明这一点（假设已经向Array的原型中扩展了min方法）：

var arr = [1, 56, 34, 12];
var total = 0;
for (var i in arr) {
total += parseInt(arr[i], 10);
}
console.log(total); // NaN

解决方法也很简单：

var arr = [1, 56, 34, 12];
var total = 0;
for (var i in arr) {
if (arr.hasOwnProperty(i)) {
total += parseInt(arr[i], 10);
}
}
console.log(total); // 103

constructor

constructor始终指向创建当前对象的构造函数。比如下面例子：

// 等价于 var foo = new Array(1, 56, 34, 12);
var arr = [1, 56, 34, 12];
console.log(arr.constructor === Array); // true
// 等价于 var foo = new Function();
var Foo = function() { };
console.log(Foo.constructor === Function); // true
// 由构造函数实例化一个obj对象
var obj = new Foo();
console.log(obj.constructor === Foo); // true

// 将上面两段代码合起来，就得到下面的结论
console.log(obj.constructor.constructor === Function); // true

但是当constructor遇到prototype时，有趣的事情就发生了。我们知道每个函数都有一个默认的属性prototype，而这个prototype的constructor默认指向这个函数。如下例所示：

function Person(name) {
this.name = name;
};
Person.prototype.getName = function() {
return this.name;
};
var p = new Person("ZhangSan");

console.log(p.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true
// 将上两行代码合并就得到如下结果
console.log(p.constructor.prototype.constructor === Person); // true

当时当我们重新定义函数的prototype时（注意：和上例的区别，这里不是修改而是覆盖）， constructor的行为就有点奇怪了，如下示例：

为什么呢？原来是因为覆盖Person.prototype时，等价于进行如下代码操作：

Person.prototype = new Object({
getName: function() {
return this.name;
}
});

而constructor始终指向创建自身的构造函数，所以此时Person.prototype.constructor === Object，即是：

怎么修正这种问题呢？方法也很简单，重新覆盖Person.prototype.constructor即可：

下一章我们将会对第一章提到的Person-Employee类和继承的实现进行完善。

本文链接