基于js中的原型、继承的一些想法


Posted in Javascript onAugust 10, 2016

最近看到一个别人写的js类库,突然对js中的原型及继承产生了一些想法,之前也看过其中的一些内容,但是总不是很清晰,这几天利用空闲时间,对这块理解了一下,感觉还是有不通之处,思路上没那么条理,仅作为分享,

一、instanceof

在JavaScript有instanceof运算符,是二元运算符,使用方法 instanceA instanceof A,返回值是布尔值(boolean),含义是判断instanceA是否是A的一个实例,其实质是判断A.prototype===instanceA.__proto__,如

function f2(){
  var f=function(){}
  var test=new f();
  console.log(test instanceof f);//true
  console.log((f.prototype===test.__proto__));//true
}

上边的两个打印都是true。说明test是f的一个实例;test的__proto__属性指向了f的prototype对象,即f的prototype属性是一个对象,且此对象是f的一个实例。

二、js中对象

在js中一切皆是对象,对象分为函数对象和普通对象,常用的函数其实是函数对象,如

//函数对象
  var f=function(){}
  var f2=new Function('str','console.log(str)')
  function f3(){}
  //普通对象
  var o=new Object();
  var o2={}
  var o3=new f()

上面看到f、f2、f3是函数对象,o、o2、o3是普通对象。

函数对象和普通对象的区别:

所有使用new Function()的方式创建的对象都是函数对象,f和f3两种方式,最终是也是使用new Function()方式创建的;

在定义一个对象时,对象中包含一些预定义的属性,如,prototype、__proto__,其中prototype属性只有函数对象才有,__proto__则是对所有的对象都有,所以可以通过对象的__proto__属性判断一个对象是函数对象还是普通对象,如

//函数对象
  var f=function(){}
  //普通对象
  var o=new Object();
  console.log(f.prototype);//Object {}
  console.log(o.prototype);//undefined

从上边可以得出函数对象存在prototype属性,而普通对象的prototype对象则是未定义。

三、原型链

从上边知道所有的对象都有一个__proto__属性,这个属性指向创建它的函数对象的原型对象prototype,我们把这种使用__proto__属性串起来的链叫做原型链,如下面是一个原型链,

基于js中的原型、继承的一些想法

上图,以person为例,说明原型链,

var person=function(){}
var person1=new person();

1、person是一个函数对象,person1是person的一个实例

2、person1的__proto__属性是person的原型对象person.prototype

3、由于person的原型对象person.prototype是一个对象,它也有一个__proto__属性,这个属性指向的Object的原型对象Object.prototype

4、Object的原型对象Object.prototype是一个对象,它也有一个__proto__属性,这个属性的原型对象为null。

四、一些继承

在js中我们会定义一个函数对象,如

var person=function(){}

上面我们定义了一个函数对象,它没有任何的属性,是一个空对象,由于它是一个对象,所以可以为它增加属性,

var person=function(){}
person.name1='js'
console.log(person.name1)//js

上面的代码为person新增了一个name属性,且赋值为js,且可以打印出name属性的值
但是当我们创建一个person的实例person1的时候,如下

var person= function(){};
  person.name1= 122;
  console.log(person.name1);
  var person1=new person();
  console.log(person1.name1);//undefined

可以看到person1没有name1这个属性,那么如何才能保证person的实例也有name1属性呢,

var person= function(){};
  person.name1= 122;
  //使用prototype对象为对象添加属性,这样所以的实例都会有此属性
  person.prototype.name1='12';
  console.log(person.name1);
  var person1=new person();
  console.log(person1.name1);//12

上面,使用了person.protoype.name1='12',这样所有的实例都有了name1属性,使用这种方式添加的属性,在生成实例的时候会把属性当作实例的共有属性。

以上这篇基于js中的原型、继承的一些想法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 #Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 #Javascript
jquery实现拖动效果
Aug 10 #Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 #Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 #Javascript
JS获取一个未知DIV高度的方法
Aug 09 #Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 #Javascript
You might like
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
jquery选择器简述
2015/08/31 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
原生js实现分页效果
2020/09/23 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python队列的定义与使用方法示例
2017/06/24 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
Python猜数字算法题详解
2020/03/01 Python
python3.5的包存放的具体路径
2020/08/16 Python
七年级政治教学反思
2014/02/03 职场文书
英语国培研修感言
2014/02/13 职场文书
高中学生期末评语
2014/04/25 职场文书
消防安全宣传口号
2014/06/10 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
自主招生专家推荐信
2015/03/26 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
德劲DE1108畅想
2021/04/22 无线电
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android