javascript必知必会之prototype

核心提示：起由最近在做一个项目,里面大量地使用 javascript 作为页面的动态生成脚本, 使用 json 与服务器进行通信. 在读之前遗留的代码时, 经常会弄不清楚, 作用域, this关键字在当前context下的指向等,于是便开始专门学习了 相关的知识,记录下来与大家分享.下面的内容中会有一些代码,建议大家也去尝试修改

起由

最近在做一个项目,里面大量地使用 javascript 作为页面的动态生成脚本, 使用 json 与服务器进行通信. 在读之前遗留的代码时, 经常会弄不清楚, 作用域, this关键字在当前context下的指向等,于是便开始专门学习了 相关的知识,记录下来与大家分享.

下面的内容中会有一些代码,建议大家也去尝试修改和理解,这样更容易掌握. 点击 这儿 下载所涉及到的源码.

prototype

javascript 是一种 prototype based programming 的语言, 而与我们通常的 class based programming 有很大 的区别,我列举重要的几点如下:

1. 函数是first class object, 也就是说函数与对象具有相同的语言地位

2. 没有类,只有对象

3. 函数也是一种对象,所谓的函数对象

4. 对象是按 引用 来传递的

那么这种 prototype based programming 的语言如何实现继承呢(OO的一大基本要素), 这也便是 prototype 的由来.

看下面的代码片断:

function　foo(a,　b,　c)
{
return　a*b*c;
}
alert(foo.length);
alert(typeof　foo.constructor);
alert(typeof　foo.call);
alert(typeof　foo.apply);
alert(typeof　foo.prototype);

对于上面的代码,用浏览器运行后你会发现:

1. length: 提供的是函数的参数个数

2. prototype: 是一个object

3. 其它三个都是function

而对于任何一个函数的声明,它都将会具有上面所述的5个property(方法或者属性).

下面我们主要看下prototype.

//　prototype
function　Person(name,　gender)
{
this.name　=　name;
this.gender　=　gender;
this.whoAreYou　=　function(){//这个也是所谓的closure,　内部函数可以访问外部函数的变量
var　res　=　"I'm　"　+　this.name　+　"　and　I'm　a　"　+　this.gender　+".";
return　res;
};
}
//　那么在由Person创建的对象便具有了下面的几个属性
Person.prototype.age　=　24;
Person.prototype.getAge　=　function(){
return　this.age;
};
flag　=　true;
if　(flag)
{
var　fun　=　new　Person("Tower",　"male");
alert(fun.name);
alert(fun.gender);
alert(fun.whoAreYou());
alert(fun.getAge());
}
Person.prototype.salary　=　10000;
Person.prototype.getSalary　=　function(){
return　this.name　+　"　can　earn　about　"　+　this.salary　+　"RMB　each　month."　;
};
//　下面就是最神奇的地方,　我们改变了Person的prototype,而这个改变是在创建fun之后
//　而这个改变使得fun也具有了相同的属性和方法
//　继承的意味即此
if　(flag)
{
alert(fun.getSalary());
alert(fun.constructor.prototype.age);//而这个相当于你直接调用　Person.prototype.age
alert(Person.prototype.age);
}

编缉推荐阅读以下文章

• javascript必知必会之closure