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 相关文章推荐
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
详解jQuery-each()方法
Mar 13 jQuery
vue cli3适配所有端方案的实现
Apr 13 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
跟老齐学Python之Import 模块
2014/10/13 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Flask-Mail用法实例分析
2018/07/21 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
python相对企业语言优势在哪
2020/06/12 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
个人找工作的自我评价
2013/10/17 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
2015年试用期工作总结
2014/12/12 职场文书
员工工作表扬信
2015/05/05 职场文书
课文《燕子》教学反思
2016/02/17 职场文书