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 全局AJAX事件使用代码
Nov 05 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
小程序实现留言板
Nov 02 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
js中的this的指向问题详解
Aug 29 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
第二节 对象模型 [2]
2006/10/09 PHP
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP实现递归的三种方法
2020/07/04 PHP
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
JavaScript中this详解
2015/09/01 Javascript
浅析Ajax语法
2016/12/05 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Python 在局部变量域中执行代码
2020/08/07 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
SQL面试题
2013/04/30 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
环境整治工作方案
2014/05/18 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
大学生自荐信范文
2015/03/05 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书