JavaScript对象创建及继承原理实例解剖


Posted in Javascript onFebruary 28, 2013

对象创建
当一个函数对象被创建时候,Function构造器产生的函数对象会运行类似这样的代码:

this.prototype={constructor:this};

假设函数F
F用new方式构造对象时,对象的constructor被设置成这个F.prototype.constructor
如果函数在创建对象前修改了函数的prototype,会影响创建出来对象的construtor属性
如:
function F(){}; 
F.prototype={constructor:'1111'}; 
var o=new F();//o.constructor===‘1111' true

继承原理
JavaScript中的继承是使用原型链的机制,每个函数的实例都共享构造函数prototype属性中定义的数据,要使一个类继承另一个,需要把父函数实例赋值到子函数的prototype属性。并且在每次new实例对象时,对象的私有属性__proto__会被自动连接到构造函数的prototype。
instanceof就是查找实例对象的私有prototype属性链来确定是否是指定对象的实例
具体实例
//instanceof实现 
function Myinstanceof(obj,type) 
{ 
var proto=obj.__proto__; 
while(proto) 
{ 
if(proto ===type.prototype)break; 
proto=proto.__proto__; 
} 
return proto!=null; 
} 
function View(){} 
function TreeView(){} 
TreeView.prototype=new View();//TreeView.prototype.__proto__=TreeView.prototype 自动完成 
TreeView.prototype.constructor=TreeView;//修正constructor 
var view=new TreeView();//view.__proto__=TreeView.prototype 自动完成 
alert(view instanceof View); //true 查找到view.__proto__.__proto__时找到 
alert(view instanceof TreeView); //true 查找到view.__proto__时找到 
alert(Myinstanceof(view,View)); //true 
alert(Myinstanceof(view,TreeView)); //true

上面自定义的Myinstanceof就是自己实现的一个instanceof功能的函数,由于IE内核实例存储prototype不是__proto__,所以Myinstanceof会无法通过,其他浏览器上应该都没有问题
Javascript 相关文章推荐
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
jquery显示和隐藏div特效实例
Feb 27 #Javascript
JS等比例缩小图片尺寸的实例
Feb 27 #Javascript
JQuery切换显示的效果实例代码
Feb 27 #Javascript
innerText和textContent对比及使用介绍
Feb 27 #Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 #Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 #Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 #Javascript
You might like
短波问题解答
2021/02/28 无线电
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
微信小程序之GET请求的实例详解
2017/09/29 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
python合并同类型excel表格的方法
2018/04/01 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
自我鉴定范文
2013/11/10 职场文书
学校招生宣传广告词
2014/03/19 职场文书
经典导游欢迎词
2015/01/26 职场文书
行政处罚告知书
2015/07/01 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
数据库之SQL技巧整理案例
2021/07/07 SQL Server
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
PO模式在selenium自动化测试框架的优势
2022/03/20 Python