- 浏览: 526432 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (740)
- css (4)
- jquery (8)
- javascript (23)
- html (0)
- uml (0)
- 设计模式 (1)
- 开发工具 (14)
- json (4)
- struts 1.x (3)
- spring (3)
- hibernate (6)
- struts 2.x (17)
- JFreechart (0)
- j2se (48)
- jsp (9)
- flex (22)
- 找工作 (1)
- 技术杂谈 (18)
- 网络编程 (5)
- io流 (1)
- ORACLE (15)
- 报表 (3)
- extjs (11)
- jpbm (2)
- swing (5)
- jspereports (3)
- sql (1)
- linux (15)
- ps (1)
- storm (4)
- hbase (8)
- li (0)
- python (1)
- hive (3)
- 机器学习 (1)
- hdfs (1)
- elasticsearch (1)
- hadoop 2.2 (5)
- hadoop (1)
最新评论
-
Tristan_S:
这个有点意思
ASM -
starryskydog:
程序修改detail band部分的样式 如内容字体大小 ...
使用jasperReport实现动态表头 -
samwong:
Good, so usefule
使用YUI Compressor压缩CSS/JS -
gc715409742:
能够告诉我怎么在web项目中使用YUI Compressor? ...
使用YUI Compressor压缩CSS/JS -
JsonTeye:
您好! 我看你的代码,我现在也在做动态报表,实现功能由用户自己 ...
使用jasperreport动态生成pdf,excel,html
原型是个很微妙的东西,很多人不是很理解,理解了原型对于研究其他js类的框架(比方Extjs)很有帮助.
下面我们开始讨论下原型,对于理解js中的原型概念十分重要。简单来说,一个原型类似其他语言中的一个类,它定义的属性且可以被此类产生的所有对象所共享。然后它又不像一个类,原型可以在运行时获得和改变。可以增加属性到原型上或者删除原型上已经存在的属性。所有的变化将立即影响由原型派生的对象。它是如何工作的呢? js是一种动态的语言,它不是在编译期间去搜索属性值,而是在执行请求期间去搜索属性值。例如,考虑一个基本的继承案例,A的原型继承自B的原型,a对象是由A的原型派生出的对象.如果对象a上的一个属性被请求,则js表现出如下搜索过程:
1.
js首先检查a对象上是否存在此属性,如果没有搜索到,则进行第2部分搜索过程。
2.
js访问A的原型检查是否有此属性,如果仍然没搜到,则进行第3部分搜索过程。
3. js最后访问B的原型检查是否有此属性.如果没有搜到将访问每个对象上的原型直到达到根原型上。这样的一个搜索过程称原型链。
如下图所示:
下面我来出一个js原型的题目:
Java代码 复制代码 收藏代码
1.function F() { }
2.F.prototype.someProperty = 'prototype property';
3.var a = new F();
4.alert(a.someProperty);
5.a.someProperty = 'object property';
6.alert(a.someProperty);
7.a.someProperty = undefined;
8.alert(a.someProperty);
9.delete a.someProperty
10.alert(a.someProperty);
1=》'prototype property'
2=》'object property'
3=》undefined
4=>'prototype property'
解析:第1个先搜索a对象上是否存在someProperty属性,发现没有,则搜索它的原型发现有someProperty属性 值返回。
第2个依然先搜索a对象上是否存在someProperty属性,发现有,返回。
分析第3个前说下 a.someProperty = undefined; 虽然赋值undefined但a对象上依然有someProperty属性。
所以 第3个依然先搜索a对象上是否存在someProperty属性,发现有,返回
所以 第4个依然先搜索a对象上是否存在someProperty属性,由于delete a.someProperty此操作已经删除了a对象上的someProperty属性, 所以搜索它的原型发现有,返回。
到此大家应该对原型有一个比较清楚的认识。
js中创建对象方式一般如下:
function f(){
}
js每次声明新函数的过程中,都会为其创建一个 prototype 的属性。在未加其他附带条件情况下,所有函数的 prototype 属性有一个 constructor 属性,constructor 包含一个指向 prototype 属性所属函数的指针(就是说 constructor 回指构造函数本身),这表明alert(f.prototype.constructor ==f)结果为true。
分析图如下:
下面讲讲2个写法的区别:
方式1:function f(){
this.name="xxx"
}
方式2:function f(){
}
f.prototype.name="xxx";
对于以上2种方式定义,如果var f1 = new f() 虽然alert(f1.name)效果一样,但是对于方式1,有f产生的对象每个上面都有name属性,即每个对象都有一份内存使用,如果函数f内定义的属性更多那么占用的内存可想而知非常大;对于方式2,有f产生的对象每个上面都没有name属性,搜索属性时会按照上文搜索过程最终找到"xxx";所以方式2更加优化。
对于上文如果大家都能理解,我们趁热打铁,说下js的继承。
下面是一种实现js继承的方式
function father(){
}
function sun(){
}
sun.prototype=new father();//这样子类产生的对象都会有父类中的属性,按照之前的原型查找机制很容易理解
sun.prototype.constructor=sun();//由于上一句造成子类的构造函数变成父类的所以子类的构造函数还需还原回来
这样就完成了继承。当然通过前文的分析,此写法还有点缺陷,在内存上不是很优化。
其实可以使用一个空函数作为中介实现更优化的继承。此写法可以参考Extjs2,3版本中继承中的写法。如果本文写的到此为止您都懂,想必你完全能看懂ext中继承的写法。今天先写到这里,下次我们分析下ext中的继承写法。
发表评论
-
js 格式化时间日期函数
2012-02-16 18:15 1017[代码] [JavaScript]代码 ... -
javascript设计模式
2011-12-19 08:26 7312011-08-31 23:55 by 聂微东, 11285 ... -
offsetLeft,Left,clientLeft的区别
2011-12-14 11:53 752假设 obj 为某个 HTML ... -
js去除两个数组中对象的某个属性相同的元素然后合并
2011-12-11 21:42 3951var dataArray1 = new Array();va ... -
javascript 命名空间
2011-11-30 19:18 1731在我们创建一个JavaScript库时,命名空间就显 ... -
读取js压缩为gzjs格式文件
2011-11-30 09:38 867最近做的Ext项目Ext的插件都比较大,对于网页的浏览 ... -
DOM事件传播
2011-11-25 15:53 725贴代码 test1.html <div i ... -
20 种提升网页速度的技巧 .
2011-11-07 14:14 819引言 不是所有人都能够使用高速 Inte ... -
动态加载js,css
2011-11-03 15:10 929/*Javascript 动态加载*/var JsLoad ... -
动态加载js的四种方法
2011-11-03 15:08 8411、直接document.write<s ... -
ext 中的各个style
2011-10-31 14:47 1094baseCls : 所写的css将会应用到自己的组件上 ... -
javascript prototype
2011-10-25 13:19 855---------------------- android培 ... -
JavaScript Prototype 详解
2011-10-24 17:08 852---------------------- andr ... -
JS通用表单验证函数,基于javascript正则表达式
2011-10-17 13:02 848表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一 ... -
Javascript正则表达式详解
2011-10-17 13:00 786js正则表达式是很多js开发人员比较头疼的事情,也很多人不 ... -
精通 JS正则表达式
2011-10-17 12:59 640正则表达式可以: •测试字符串的某个模式。例如,可以对一个输入 ... -
swfupload浅析
2010-12-24 18:12 1158一、简介和示例 SWFUpload is a small J ... -
带复选框(checkbox)的树
2010-12-14 10:13 1229带复选框(checkbox)的树 <!-- start ... -
dwr处理关联对象
2010-11-19 10:31 1038<!--l version="1.0" ... -
NodeJS探索
2010-11-07 17:05 1309一、什么是NodeJS?第一眼看到这个词,估计你和我一样,以为 ...
相关推荐
深入理解javascript原型和闭包(01)——一切都是对象 深入理解javascript原型和闭包(02)——函数和对象的关系
该代码为JavaScript中关于原型对象的描述
JavaSciptDOM基本操作,JavaScipt函数基础,JavaScipt流程语句,JavaScript变量,JavaScript数据类型,JavaScript数组,JavaScript正则表达式,JavaScript字符串函数,Window对象等图解。JS高手进阶的工具图谱
一套完整的JavaScript原型验证框架,采用高度云集技术,适用范围广,希望能得到此资源者好好收藏,如果不懂得使用的,请认真学学javascript+CSS+DIV,这个真的很强大,价值量很高。
基于JavaScript原型链的小游戏,小游戏主要是对原型链理解的一个应用,主要有游戏的开始和暂停,最后还有一个分值的统计
javascript的原型与原型链的详细的解析,一篇从认识到熟悉深入的好文章!
原型链是一种机制,指的是JavaScript每个对象包括原型对象都有一个内置的[[proto]]属性指向创建它的函数对象的原型对象,即prototype属性。 作用:原型链的存在,主要是为了实现对象的继承。 一、 记住以下5句话...
适合两节课的量,边做边练,带领学生熟悉原型链。原生JS编写,不涉及JQ。
javascript原型继承,prototype的使用,可以像java一样继承
浅析Javascript原型继承,浅析Javascript原型继承
理解Javascript原型继承原理
javascript原型和闭包
浅析javascript原型继承机制,浅析javascript原型继承机制
NULL 博文链接:https://ywxowen999.iteye.com/blog/1135884
探究JavaScript原型数据共享与方法共享实现 数据共享 需要共享的数据就可以写原型中 原型的作用之一:数据共享 属性需要共享,方法也需要共享: 不需要共享的数据写在构造函数中 需要共享的数据写在原型中 ...
【技术分享】从浅入深 Javascript 原型链与原型链污染 APT web安全 网络安全 安全 自动化
Toast.js:一个JavaScript原型吐司消息Toast messages
而Object的原型对象用Object.__proto__ = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。原型对象的用途是为每个实例对象存储共享...
js原型手绘图.jpg