原型是个很微妙的东西,很多人不是很理解,理解了原型对于研究其他js类的框架(比方Extjs)很有帮助.
下面我们开始讨论下原型,对于理解js中的原型概念十分重要。简单来说,一个原型类似其他语言中的一个类,它定义的属性且可以被此类产生的所有对象所共享。然而它又不像一个类,原型可以在运行时获得和改变。可以增加属性到原型上或者删除原型上已经存在的属性。所有的变化将立即影响由原型派生的对象。它是如何工作的呢? js是一种动态的语言,它不是在编译期间去搜索属性值,而是在执行请求期间去搜索属性值。例如,考虑一个基本的继承案例,A的原型继承自B的原型,a对象是由A的原型派生出的对象.如果对象a上的一个属性被请求,则js表现出如下搜索过程:
-
js首先检查a对象上是否存在此属性,如果没有搜索到,则进行第2部分搜索过程。
-
js访问A的原型检查是否有此属性,如果仍然没搜到,则进行第3部分搜索过程。
-
js最后访问B的原型检查是否有此属性.如果没有搜到将访问每个父类对象上的原型直到达到根原型上。这样的一个搜索过程称原型链。
如下图所示:
下面我来出一个js原型的题目:
function F() { }
F.prototype.someProperty = 'prototype property';
var a = new F();
alert(a.someProperty);
a.someProperty = 'object property';
alert(a.someProperty);
a.someProperty = undefined;
alert(a.someProperty);
delete a.someProperty
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中的继承写法。
- 大小: 9.5 KB
- 大小: 15.6 KB
分享到:
相关推荐
React原始分析 写在前面 React开发一年多,最近仔细研究了React源码,在这里总结一下原理。 v15)。包括: React的几个组件以及首次渲染实现 React更新机制的实现以及React diff算法 React的代码还是非常复杂的,...
在本课程中,您将学习如何研究不同类型用户的情况和需求,以及设计和原型化既有用又有用的交互式产品。 特别是,您将熟悉: 用户体验(UX)设计原理和模式 定性和定量用户研究 竞争对手分析 用户角色,用户故事和...
读我这是的源代码它最初是作为TechCamp Tutzing,2019的示例项目创建的。 英文 德语 (正在进行中) 它是根据Internet Software Consortium许可发行的免费软件。怎么跑运行npm run dev以在开发模式下启动。...
(3)根据对需求的分类、整理,结合当前可利用的技术手段,设计系统原型; (4)实现系统。使用Java、stripes,实现编号、布点等核心算法与服务器端MVC结构、后台与前台的数据交互接口;通过HTML、CSS、JavaScript、Ajax...
反科里化的话题来自javascript之父Brendan Eich去年的一段twitter. 近几天研究了一下,觉得这个东东非常有意思,分享一下。先忘记它的名字,看下它能做什么. 不要小看这个功能,试想下,我们在写一个库的时候,时常...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...
显然,如果您需要功能全面,可自定义的分析仪表板,则需要研究等。 该原型有多种用途,其中之一就是查看构建可定制分析板所需的条件,该板可轻松定制不同的仪表板,以及将原始分析信息转化为人类可读(可理解)的...
Bright-U(WebVR原型)目的声明BrightU ... 经过大量研究和行业分析,我们一致认为,实施虚拟现实学习环境将是最大化理解看似复杂信息的最佳解决方案。用法该应用程序首先将用户放置在暂存区中,使他们在将其HMD用于其
latrobe-datacapture-dir使用 Android 和惯性传感器进行屈曲角度分析Android 上的屈曲角度数据捕获系统,由分析 Web 应用程序支持。 该项目是与拉筹伯大学合作编写的,作为健康科学和计算机科学研究项目的一部分。 ...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...
科研与教育:作为计算机视觉教学和研究的基础工具,OpenCV简化了算法原型开发与验证过程。 工业自动化:在视觉检测、机器人导航、产品质量控制等工业场景中,OpenCV用于实时图像分析与决策。 安防监控:用于...