Javascript prototype 属性

Posted by wxianfeng Thu, 20 Jan 2011 20:25:00 GMT

javascript 到底是一个什么样的语言,各人说法不一 ,javascript 之父 说 javascript 在模仿 Java , <<javascript高级语言设计>> 一书说 javascript 是面向过程,对象,函数 三种于一体的语言 , 大多数人说 javascript 是 基于原型的语言 ,甚至还有人 说javascript里一切面向对象,我还认为javascript 是动态语言了,因为javascript对象可以动态的添加属性 ,方法. 每个人的说法都有自己的道理,不管怎么说,,理解 javascript 对象prototype 属性至关重要.

javascript 实现类需要借助Function ,基本的 类 继承 多态 等等特性的都没有原生语法支持 , javascript 是基于 prototype-base 的语言,即基于原型的语言,实现继承 == 都需要借助 prototype 来实现.

为什么说了那么多 ,因为最近 遇到 一个问题 , 所以 研究了 下 javascript prototype

问题简化如下;

Array.prototype.add = function(item) {
    this.push(item);
}  
var months = ["1","2"]
var str = ""
for( var i in months){
  str += months[i];
}
console.log(str);

你认为 上面这段代码的输出结果是什么?

刚开始我认为是 str = 12 ,可是结果是错的 ,如果把扩展的 Array add方法去掉就是 12 了 , 那么问题到底出在什么地方?

Array.prototype.add = function(item) {
    this.push(item);
}  

是给数组对象添加了 add 属性, 只不过这个 add 属性对应一个函数(方法), 而for .. in .. 循环数组的话,会把属性也给循环出来 。。。。所以 最后结果是:

12function (item) { this.push(item); }

正确的写法是:

Array.prototype.add = function(item) {
    this.push(item);
}  
var months = ["1","2"]
var str = ""
for( var i =0,i<months.length,++i){
  str += months[i];
}
console.log(str);

length 返回的是数组元素的长度,不包括属性.

其实 主要 还是prototype 问题

prototype到底是什么?

JavaScript 中的每个对象都有一个 prototype 属性,指向另外一个对象。 使用对象字面量创建的对象的 prototype 指向的是Object.prototype,如var obj = {"name" : "Alex"};中创建的对象obj的 prototype 指向的就是Object.prototype。 而使用 new 操作符创建的对象的 prototype 指向的是其构造器的 prototype 。如var users = new Array();中创建的对象users的 prototype 指向的是Array.prototype。 一个对象 A 的 prototype 指向的是另外一个对象 B,而对象 B 自己的 prototype 又指向另外一个对象 C,这样就形成了一个链条,称为 prototype 链。这个链条会不断继续,一直到Object.prototype。Object.prototype对象的 prototype 值为 null,从而使得该原型链终止.

上面这句话 是从 IBM 那 copy 来的 , 解释的 很清楚...

constructor属性得到什么?

constructor 属性得到 该对象是通过 哪个构造函数 构造出来的,即new

DEMO:

从上面 可以看出 Student 的原型对象是 Person , 所以 s 具有了 sex属性 , 其实这个也是 javascript中继承的 实现方法 , Person的原型对象是 Object , Object的原型对象是 null 这里原型连终止

示意图:

当然 关于 prototype 的用法不仅仅这些 。。例如 javascript 框架 prototype.js 就是基于 javascript prototype 实现的,里面 提供了 很多 Array , String 对象的很好用的 工具方法.... 更多javascript prototype的学习, 请查阅其他资料.

SEE:

http://www.ibm.com/developerworks/cn/web/wa-lo-dojoajax1/ http://www.darkmi.com/blog/archives/981 http://www.blabla.cn/jsexamples/042jsforin.html