基于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 相关文章推荐
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
javascript类型转换示例
Apr 29 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
新入门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
PHP函数常用用法小结
2010/02/08 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
在Python中操作字典之update()方法的使用
2015/05/22 Python
Python决策树分类算法学习
2017/12/22 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
Python 3.8 新功能全解
2019/07/25 Python
python动态文本进度条的实例代码
2020/01/22 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python ssh 执行shell命令的示例
2020/09/29 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
银行自荐信范文
2013/10/07 职场文书
学校火灾防控方案
2014/06/09 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
离婚协议书怎么写
2015/01/26 职场文书
白银帝国观后感
2015/06/17 职场文书
羊脂球读书笔记
2015/06/30 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS