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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
JavaScript 无符号右移运算符
Apr 17 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
js上传图片预览的实现方法
May 09 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
Vant picker 多级联动操作
Nov 02 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
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
php时间戳转换代码详解
2019/08/04 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
jquery插件之easing使用
2010/08/19 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
一个例子轻松学会Vue.js
2017/01/02 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
详解微信小程序审核不通过的解决方法
2018/01/17 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
python树的同构学习笔记
2019/09/14 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
params有什么用
2016/03/01 面试题
教导处工作制度
2014/01/18 职场文书
专业技术职务聘任书
2014/03/29 职场文书
停电放假通知
2015/04/14 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
海弦WR-800F
2022/04/05 无线电