- 浏览: 496865 次
- 性别:
- 来自: 大连->北京
文章分类
最新评论
-
春天好:
写的很不错 推荐一个免费好用的云端爬虫开发平台不需要安装环境, ...
web爬虫 -
cpu88:
网络爬虫爬来爬去,网上信息可以瞬间扩散,但是也意味着,没有人愿 ...
web爬虫 -
biaoming:
牛。。学习了。。
MongoDB 关于索引的建议 -
biaoming:
楼主用mongo好早啊。
MongoDB 优化 -
biaoming:
好教程,学习了。。。
MongoDB 优化
穷举属性(Enumerating Properties)
要列出对象所有的属性可以用for.in循环来做
var o = {p1: 1, p2: 2}; for (var i in o) { console.log(i + '=' + o[i]); }
结果为:p1=1,p2=2
但是有以下几点需要注意
- 并不能把对象的所有属性列出来。像constructor属性就没有。可以列出的属性我们叫它可以枚举的(enumerable),可以用propertyIsEnumerable()方法来判断属性是否可以列出来。
- 可以把prototype的属性列出来,如果要判断对象的自身属性可以用hasOwnProperty() 方法
- 虽然可以列出所有prototype的属性,但是如果使用propertyIsEnumerable()方法来校验prototype的属性,它的返回结果都是false.
让我们看个综合例子就明白了
function Gadget(name, color) { this.name = name; this.color = color; this.someMethod = function(){return 1;} } Gadget.prototype.price = 100; Gadget.prototype.rating = 3;
创建一个新的对象
var newtoy = new Gadget('webcam','black');
for (var prop in newtoy) { console.log(prop + ' = ' + newtoy[prop]); }
结果为
name = webcam
color = black
someMethod = function () { return 1; }
price = 100
rating = 3
如果要区分自身属性和prototype属性,那就用hasOwnProperty()方法
for (var prop in newtoy) { if (newtoy.hasOwnProperty(prop)) { console.log(prop + '=' + newtoy[prop]); } }
结果为
name=webcam
color=black
someMethod=function () { return 1; }
再来看一下propertyIsEnumerable的方法
newtoy.propertyIsEnumerable('name');//true
大部分内置的属性和方法都是不可以列举的
newtoy.propertyIsEnumerable('constructor');//false
任何的属性来自prototype的都不能被列举
newtoy.propertyIsEnumerable('price');//false
如果进入prototype内部去调用属性就可以被列举了
newtoy.constructor.prototype.propertyIsEnumerable('price');//true
扩展内置对象
内置对象就是由构造函数Array,String,Object。函数可以扩展它们的prototype,也就意味着你可以通过prototype添加Array的功能。
Array.prototype.inArray = function(needle) { for (var i = 0, len = this.length; i < len; i++) { if (this[i] === needle) { return true; } } return false; }
现在所有的Array都有了新的方法。
var a = ['red', 'green', 'blue']; a.inArray('red');//true a.inArray('yellow');//false
通过prototype扩展Array的功能真是很简单的事情。
关于扩展内置对象的讨论
Prototype库是个比较有名的javascript库,它通过这种方法,把javascript变成了类似ruby的语言。但是YUI却反对这种做法。如果你会使用Javascript,一般希望用javascript正常的写法,改变了核心方法,会对开发人员造成许多困惑。
现在的javascript和浏览器功能都逐渐的增多,本身开发人员对Javascript核心的扩展,很可能明天就会没什么用处了。最佳实践是先判断核心的功能是否存在,然后再去扩展。如:
if (!String.prototype.reverse) { String.prototype.reverse = function() { return Array.prototype.reverse.apply(this.split('')).join(''); } }
关于prototype令人迷惑的地方
function Dog(){ this.tail=true; } var benji = new Dog(); var rusty = new Dog(); Dog.prototype.say = function(){ return 'Woof'; } benji.say();//Woof rusty.say();//Woof benji.constructor;//Dog() rusty.constructor;//Dog() benji.constructor.prototype.constructor;//Dog() typeof benji.constructor.prototype.tail;//undefined Dog.prototype={paws:4,hair:true}; //Dog.prototype.constructor = Dog; typeof benji.paws;//undefined alert(benji.say());//Woof var lucy = new Dog();//new object alert(lucy.paws); alert(lucy.tail) lucy.constructor;//Object(); benji.constructor;//Dog(): typeof lucy.constructor.prototype.paws;//undefined typeof benji.constructor.prototype.paws;//number
新建一个构造函数并创建两个对象
function Dog(){ this.tail=true; } var benji = new Dog(); var rusty = new Dog();
建完对象之后,我们仍然可以添加属性到prototype中,对象可以访问这个新添加的属性
Dog.prototype.say = function(){ return 'Woof'; } benji.say();//Woof rusty.say();//Woof
让我们来看看创建对象的构造函数,一起看来很正常
benji.constructor;//Dog() rusty.constructor;//Dog()
看如下代码很有意思的事情发生了。。。。。
benji.constructor.prototype.constructor;//Dog()
当我们想知道prototype的构造函数是啥的时候,问题出现了。。。结果是Dog()。但是这不完全正确。prototype对象仅仅是个Object对象,他并没有任何关于Dog的属性。。。测试看看
typeof benji.constructor.prototype.tail;//undefined
让我们继续深入下去。当完全重写prototype对象时看看会怎么样。
Dog.prototype={paws:4,hair:true};
发现了以前创造的对象竟然访问不了新的prototype的属性。。。
typeof benji.paws;//undefined benji.say();//Woof
说明了旧的对象还是指向以前的Prototype了。
让我们新建一个对象看看会怎样
var lucy = new Dog();//new object lucy.say();//TypeError:lucy.say is not a function lucy.paws;//4
说明新建的对象已经指向新的prototype了。
但是lucy这个对象的构造函数变成了object
lucy.constructor;//Object(); benji.constructor;//Dog():
最令人感到困扰的是prototype的属性
typeof lucy.constructor.prototype.paws;//undefined typeof benji.constructor.prototype.paws;//number
所以如果想完全重写prototype属性,建议用以下的方式。
Dog.prototype={paws:4,hair:true}; Dog.prototype.constructor=Dog;
这样就不会造成以上的困扰了。。。。
评论
发表评论
-
Javascript 基本数据类型,数组,循环以及条件 - 基本数据类型
2009-10-13 09:43 0你所使用的任意值都包含一个类型。在javascript中有如下 ... -
Javascript 基本数据类型,数组,循环以及条件 - 运算符
2009-10-12 21:41 1339运算符 运算符对一个或两个值(也可能是变量),进行一个 ... -
Javascript 基本数据类型,数组,循环以及条件-变量
2009-10-12 21:39 1832在深入javascript面向对象特性之前,让我们温习下基础知 ... -
Javascript 在浏览器环境中 (七) XMLHttpRequest
2009-02-17 17:19 2472XMLHttpRequest XMLHttpRequest是一 ... -
Javascript 在浏览器环境中 (六) 事件
2009-02-17 14:17 2593事件 事件的例子很多了。如用户输入,点击按钮等等。可以把一个j ... -
Javascript 在浏览器环境中 (五) HTML DOM
2009-02-12 13:56 1708已经知道了 DOM 适用于 XML和HTML文档。前几部分已经 ... -
Javascript 在浏览器环境中 (四) DOM节点的创建,修改与删除
2009-02-12 13:55 5931修改节点 上面一篇我们学习了DOM节点的访问,下面来看看DO ... -
Javascript 在浏览器环境中 (三) DOM节点的访问
2009-02-09 14:47 2417DOM DOM就是Document object Model的 ... -
Javascript 在浏览器环境中 (二) BOM
2009-02-05 17:25 1510BOM BOM是Browser Object Model的缩写 ... -
Javascript 在浏览器环境中 (一) 目录
2009-02-05 15:35 1298前言 大家都知道Javascript程序本身不能自己运行。需要 ... -
Javascript 继承 (七)
2009-02-05 15:21 1100混合使用原型继承和复制属性 当使用继承时,更多的是想在现有的功 ... -
Javascript 继承 (六)
2009-01-19 16:36 1075深度拷贝 上一节所说到的extendCopy再深一层的对象 ... -
Javascript 继承 (五)
2009-01-13 17:59 1122要注意复制引用。 很烦的是,在复制引用的时候,有的时候并不是期 ... -
Javascript 继承 (四)
2009-01-12 23:04 1157封装继承 通过上面的学习,我们把继承封装,这样就可复用了。代码 ... -
Javascript 继承 (三)
2009-01-06 00:33 1407从子对象中访问父对象。 经典的面向对象语言都有语法可以在子类中 ... -
Javascript 继承 (二)
2009-01-05 23:04 1403仅仅继承Prototype 添加可以重用的方法和属性到prot ... -
Javascript 继承 (一)
2008-12-31 15:32 1389关于继承前言 到这里如 ... -
Javascript Prototype (一)
2008-12-30 14:22 2148关于prototype 属性 函数(functions)在ja ... -
Javascript 对象 (四)
2008-12-29 16:20 1014函数返回对象 可以用构造函数来创建个对象,也可以通过普通函数返 ... -
Javascript 对象 (三)
2008-12-29 15:33 1097This var hero = { name : 'Ra ...
相关推荐
javascript prototype文档
javascript Prototype 对象扩展.docx
javascript prototype原型操作笔记.docx
JavaScript_Prototype(源代码+中文手册)
NULL 博文链接:https://miyulano.iteye.com/blog/1678239
轻松建立有高度互动的web2.0特性的富客户端页面
JavaScriptprototype的深度探索不是原型继承那么简单.pdf
javascript的prototype继承
NULL 博文链接:https://butterflymacro.iteye.com/blog/1271789
Prototype javascript框架 js and ajax 的方便
javascript的prototype原型简单介绍: prototype原型是javascript中特别重要的概念,属于必须要掌握,如果没有良好的掌握的话,进一步用好或者学好js基本是不可能的实现的事情,并且此概念稍有难度,可能对于初次接触...
之前写的一篇JavaScript 命名空间博客提到过JavaScript的函数作用域,在函数内定义的变量和函数如果不对外提供接口,那么外部将无法访问到,也就是变为私有变量和私有函数。 function Obj(){ var a=0; //私有变量
JavaScript中prototype的使用
jQuery、Mootools、Prototype三大JavaScript框架中文手册
JavaScript使用prototype定义对象类型
prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。 prototype.js不仅是一个有很大实用价值的js库,而且有很高...
JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools
主要介绍了JavaScript使用prototype属性实现继承操作,结合实例形式详细分析了JavaScript使用prototype属性实现继承的相关原理、实现方法与操作注意事项,需要的朋友可以参考下