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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
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对象类型判断
2008/08/27 PHP
php的hash算法介绍
2014/02/13 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php实现encode64编码类实例
2015/03/24 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
文本加密解密
2006/06/23 Javascript
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
Bootstrap Table使用方法详解
2016/08/01 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
Python中format()格式输出全解
2019/04/12 Python
python调用摄像头拍摄数据集
2019/06/01 Python
使用python实现kNN分类算法
2019/10/16 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
酒店优秀员工事迹材料
2014/06/02 职场文书
导航工程专业自荐信
2014/09/02 职场文书
2014公司年终工作总结
2014/12/19 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
家属联谊会致辞
2015/07/31 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
Promise静态四兄弟实现示例详解
2022/07/07 Javascript