JavaScript中创建对象和继承示例解读


Posted in Javascript onFebruary 12, 2014

对象创建:

当一个函数对象被创建时候,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
Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
vue2.0的虚拟DOM渲染思路分析
Aug 09 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
node后端服务保活的实现
Nov 10 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
javascript实现文本域写入字符时限定字数
Feb 12 #Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 #Javascript
动态加载jquery库的方法
Feb 12 #Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 #Javascript
javascript获取web应用根目录的方法
Feb 12 #Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 #Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 #Javascript
You might like
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php的4种常见运行方式
2015/03/20 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python概率计算器实例分析
2015/03/25 Python
Python argv用法详解
2016/01/08 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
Python多层装饰器用法实例分析
2018/02/09 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
python中的常量和变量代码详解
2018/07/25 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
开工典礼策划方案
2014/05/23 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
模范教师事迹材料
2014/12/16 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js