Javascript重温OOP之原型与原型链

prototype原型对象

每个函数都有一个默认的prototype属性,其实际上还是一个对象,如果被用在继承中,姑且叫做原型对象。

在构造函数中的prototype中定义的属性和方法,会被创建的对象所继承下来。举个栗子:

function F(){}
F.prototype.work = function(){console.log('F is working..');
};
var f = new F();
f.work(); // F is working..

当你创建函数时,JS会为这个函数自动添加 prototype 属性,值是空对象。而一旦你把这个函数当作构造函数( constructor )调用(即通过 new 关键字调用),那么JS就会帮你创建该构造函数的实例,实例继承构造函数 prototype 的所有属性和方法(实例通过设置自己的 __proto__ 指向承构造函数的 prototype 来实现这种继承)。

神秘的__proto__

JS的对象中都包含了一个__proto__属性,其指向的是创建该对象时的构造函数的原型对象prototype。

clipboard.png

从上面的输出结果看出,f.__proto__指向了其构造函数F的prototype,而F.prototype本身也是一个对象,其内部也有__proto__属性,其指向的是Object.prototype,直到最后Object.prototype指向null,这条原型链才结束。

因此,__proto__这个神秘的属性才是原型链形成的真正原因。

原型链

由于原型对象本身也是对象,根据上边的定义,它也有自己的原型,而它自己的原型对象又可以有自己的原型,这样就组成了一条链,这个就是原型链,JavaScritp引擎在访问对象的属性时,如果在对象本身中没有找到,则会去原型链中查找,如果找到,直接返回值,如果整个链都遍历且没有找到属性,则返回undefined。原型链一般实现为一个链表,这样就可以按照一定的顺序来查找。

下面是一张经典的图:

clipboard.png

从上图看出:

  1. Object.prototype是顶级对象,所有对象都继承自它。

  2. Function 继承 Function 本身, Function.prototype 继承 Object.prototype 。

  3. Function.prototype 和 Function.__proto__ 都指向 Function.prototype

  4. Object.prototype.__proto__ === null ,说明原型链到 Object.prototype 终止。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247540.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

webpack超详细配置

在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目; 流程 webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载.Step2: 在Git或者cmd中输入下面这段代码, 通过全局…

小白十分钟-推荐导航栏

大腿绕道&#xff0c;给小白学习用&#xff0c;上代码 <div class"list"><div class"infor"><ul class"left"><li><a href"">限时特价</a></li><li><a href"">热门推…

掌握ES6/ES2015核心内容

ECMAScript 6&#xff08;以下简称ES6&#xff09;是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的&#xff0c;所以又称ECMAScript 2015。 也就是说&#xff0c;ES6就是ES2015。 虽然目前并不是所有浏览器都能兼容ES6全部特性&#xff0c;但越来越多的程序员…

转:canvas--放大镜效果

<!DOCTYPE html><html><head><meta charset"UTF-8"><title>鼠标事件</title></head><body><canvas id"canvas"></canvas><canvas id"offCanvas" style" display: none;&qu…

MON

早上5点,咪咪牛就醒了,开始跳到我边上,用白毛毛把我弄醒,在我身上走来走去,把她按住抚摸也不能让她停止.....只能拎起来扔到边上了 ;)看起来还的确是很调皮的猫咪呢昨天晚上就开始不太怕我了,走到我的椅子边上喵喵叫,直到把她放在身上,才慢慢睡觉,满可爱的早上出门叫车,一车正停…

CSS做个Switch开关

Switch开关&#xff1a;根据需求可知&#xff0c;Switch开关只有两种选择&#xff0c;true或false。所以我们想到HTML的checkbox控件&#xff0c;用它来做。  <input id"switch" type"checkbox" class"switch" />但是在浏览器中&#xf…

解决虚拟机能ping通宿主机,而宿主机不能ping通虚拟机

解决虚拟机能ping通宿主机&#xff0c;而宿主机不能ping通虚拟机 首先&#xff0c;查看宿主机的网卡状态 如果没有&#xff0c;打开虚拟机&#xff0c;选择编辑 打开虚拟网络编辑器&#xff0c;并选择更改设置 勾选将设备适配器连接此网络 完成&#xff0c;这样宿主机便可以pin…

推荐base.css

学习《编写高质量代码--Web前端开发修炼之道》 /* CSS Document */ /*css reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{ border-collapse:collapse;border-spacing:0;} fieldest,i…

如何通过RFID开发来迎接第四次工业革命(转)

我们都经历了革命性的冲击&#xff0c;自上世纪90年代初的互联网冲击了文化和商业&#xff0c;但很少人知道如何完成RFID开发来迎接第四次工业革命&#xff0c;在接下来的二十年里&#xff0c;智能工厂的出现将成为一个重要组成部分。制造业作为我国工业的主体&#xff0c;面临…

JS 数据处理技巧及小算法汇总(转载)

1、根据属性来更新一个数组中的对象 const arr [ {id: 1, score: 1}, {id: 2, score: 2}, {id: 3, score: 4}]; //更新的值 const newValue {id: 3, score: 3} 更新数组中id为3的score值。 Es6 装逼写法如下&#xff1a; const result initial.map(x > x.id newValue.i…

Vue中watch的简单应用

Vue.js 有一个方法 watch&#xff0c;它可以用来监测Vue实例上的数据变动。 如果对应一个对象&#xff0c;键是观察表达式&#xff0c;值是对应回调&#xff0c;值也可以是方法名&#xff0c;或者是对象&#xff0c;包含选项。 下面写两个demo&#xff0c;参考demo来了解一下 …

placeholder的兼容处理方法

placeholder是html5新增的一个属性&#xff0c;极大的减轻了表单提示功能的实现&#xff0c;但是对于IE6-IE9真的是只能靠自己写啦&#xff01; 但是在自己写时会掉进了一个坑里&#xff0c;还好用了一会时间还是爬出来啦。 最终的解决方法方法如下&#xff1a; 1 <form nam…

运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework

运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework 解决方案&#xff1a; 1、打开项目的 Product-->Scheme --> Edit Scheme--> Run-->Arguments-->Environment Variables添加Name为OS_ACTIVITY_MO…

详解 vue-cli 的打包配置文件代码(转)

一、前言 对于webpack基础不好&#xff0c;node指令不通的童鞋。估计对自己搭建Vue、react脚手架是相当头疼的&#xff0c;有种无从下手的感觉。然而&#xff0c;从头看这2块&#xff0c;耗时太长&#xff0c;而且说实话得练才行&#xff0c;不练练手看不明白。那大多数人就采取…

iOS之页面布局-踩坑的原由

iOS之页面布局 原文请点击 在《iOS 7 UI Transition Guide》中有在《iOS 7 UI Transition Guide》的Bar and Bar Buttons一节中有这么一段话 In iOS 7, the status bar is transparent, and other bars—that is, navigation bars, tab bars, toolbars, search bars, and sco…

工作中的javascript代码收集及整理

有个pub库放在blog的文件夹里面了,注意查查1.用javascript去除字符串左右空格,包括全角和半角//用javascript去除字符串左右空格,包括全角和半角String.prototype.trim function() { //其中表示为&#xff1a;对象.属性.方法函数方法var strTrim this.replace(/(^\s*)|(\s*$)/…

iOS11 更改状态栏、导航栏颜色的方法

ios上状态栏 就是指的最上面的20像素高的部分 状态栏分前后两部分&#xff0c;要分清这两个概念&#xff0c;后面会用到&#xff1a; 前景部分&#xff1a;就是指的显示电池、时间等部分&#xff1b; 背景部分&#xff1a;就是显示黑色或者图片的背景部分&#xff1b; (一)设…

i春秋DMZ大型靶场实验(四)Hash基础

下载工具包 打开目标机 通过目录爆破发现 phpmyadmin 在登录位置尝试注入 返现 可以注入 直接上sqlmap 上 bp 代理抓包 sqlmap.py -r bp.txt --dbs 利用sqlmap 跑出root 密码 root666888 登录 phpmyadmin t通过路径报错得到绝对路径 c:\\www\\1.php root 权限…

ASP.NET中进行消息处理(MSMQ) 二

在我上一篇文章《ASP.NET中进行消息处理(MSMQ)一》里对MSMQ做了个通俗的介绍&#xff0c;最后以发送普通文本消息和复杂的对象消息为例介绍了消息队列的使用。 本文在此基础上继续介绍MSMQ的相关知识点&#xff0c;最后还是通过一个示例程序来分析MSMQ在实际项目开发中的应用。…

GoJs Pictures 官方介绍文档

图片 使用Picture类显示图像。 最常见的用法是使用URL字符串设置Picture.source属性&#xff0c;以及通过GraphObject.desiredSize&#xff08;图对象的所需尺寸&#xff09;获取或通过设置GraphObject.width&#xff08;图对象的宽&#xff09;和GraphObject.height&#xff0…