基于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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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
PHP 采集程序 常用函数
2008/12/18 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
python中os模块详解
2016/10/14 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
python实现批量注册网站用户的示例
2019/02/22 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python实现银行实战系统
2020/02/26 Python
appium+python adb常用命令分享
2020/03/06 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
大学生职业生涯规划书范文
2014/01/04 职场文书
给物业的表扬信
2014/01/21 职场文书
合作意向书模板
2014/03/31 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
公司法人授权委托书范本
2014/09/12 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
永远是春天观后感
2015/06/12 职场文书