当前位置: 首页 > 编程日记 > 正文

细心看完这篇文章,刷新对Javascript Prototype的理解

var person={name:'ninja'};
person.prototype.sayName=function(){return this.name;
}

分析上面这段代码,看看有没有问题?

没错,这段代码是有问题的,我们可以通过Chrome看一下执行结果:

错误提示说找不到sayName 属性,不是记得说Javascript可以随时新增属性的吗?没错,Javascript确实可以添加属性,但是不是针对对象实例本身的,而是针对其对实例对象所属的类型的对象的。是不是听起来有些别扭,没错,在Javascript的世界里,一切皆是对象,在其所属类型的对象里含有一个prototype的属性(这个prototype属性其实也是一个对象),而在类型的对象的实例的对象里,也存在一个__proto__的属性,这个属性其实可以理解为是prototype的一个引用。

这样说起来是不是有些难于理解,好的,那让我们重新整理一下上面的例子:

var Person=function(name){this.name=name;
};Person.prototype.sayName=function(){return this.name;
};var a_person=new Person('ninja');
var name=a_person.sayName();

在这个例子里Person就是类型的对象,a_person就是该类型对象的一个实例对象

现在我们在看一下这两个对象里属性的具体情况。

  1. 类型对象Person:在其中有一个属性prototype:Object,它是一个对象,其下面有一个Constructor的属性,对应的其实也就是当时定义该类型时候所写的function签名,也就是说这个Constructor其实是一个function类型,可以尝试用 typeof(Person.Constructor)测试一下,它的结果返回的是“function”.
  2. Person的实例对象a_person,下面有一个_proto_的属性,其实它也就是类型对象实例里prototype的一个引用,可以使用这样的代码去验证“Person.prototype===a_person.__proto__”,发现其结果返回的是true, 也许你会注意到在__proto__下面的属性里还有一个__proto__,这个其实就是link到了Object.Prototype了,这也就是常说的原型链的概念。

PS:

也许很多人会分不清在Javascript里面大写的Function和小写的function的区别

其实仔细分析一下代码,也不难发现,Function其实就是所有function的所属类型的一个对象。

是不是还是很拗口,其实原理也和上面一样,只不过这个Function的类型是Javascript自己定义的而已,来看一下代码吧:

从上面的截图中可以看出在prototype中已经定义了我们常常见到的一些方法appy,bind,call.

下面我们定义一个匿名方法,其实也就是Function的一个实例对象

我们看一下具体的构造:

发现了吧,它的__proto__其实就是Function里的引用:

细心的朋友应该会发现,当我们定义一个function类型对象后,展开它的属性我们会会看到两个prototype的相关的属性,一个是__proto__,另外一个是prototype;

正如前面所说__proto__是Function的prototype的引用;prototype是该类型对象本身的一个引用。

不知道读这篇文章的你是否搞明白了,我想我是已经明白了:)

转载于:https://www.cnblogs.com/shineqiujuan/p/3176786.html

相关文章:

那些值得回味的MySQL的基础知识

那些值得回味的MySQL的基础知识 MySQL零碎知识点整理 题记: 在如今甚是流行的MySQL中有些基础的知识却是我们日常工作中处理问题容易忘却的一部分,所以不能忘了本,那么我们现在就去回忆那些曾经熟悉的基本吧,废话不多说了 基础常识&#xff…

awk2.0 — awk分隔符

再次重申awk的语法 awk [options] ‘Pattern {Actions}’ file1,file2… awk默认分隔符是空格,分隔符有分为“输入分隔符”和“输出分隔符”。 输入分隔符:awk在处理每一行文本的时候,以默认的空格将文本分隔成一个个单词作为变量。 输出分…

【C++自我精讲】基础系列二 const

【C自我精讲】基础系列二 const 0 前言 分三部分:const用法、const和#define比较、const作用。 1 const用法 const常量:const可以用来定义常量,不可改变,const常量在定义时必须初始化(extern修饰时是特例)。…

mysql system命令_mysql命令

关闭防火墙和selinux:systemctl stop firewalld.servicesetenforce 0永久关闭防火墙和selinux:systemctl disable firewalld.servicesed -i ‘/^SELINUX/s#enforcing#disabled#g’ /etc/selinux/config安装wget:yum install -y wget国内yum源:wget -O /etc/yum.repos.d/CentOS-…

django教程目录

什么是web框架? Do a web framework ourselves MVC和MTV模式 django的流程和命令行工具 Django的配置文件(settings) Django URL (路由系统) Django Views(视图函数) Template基础 Models admin的配置 Middleware cache Cookie & Session…

VRRP在企业网中的应用(H3C设备)

一:实验原理①VRRP概述:随着Internet的发展,人们对网络的可靠性的要求越来越高。对于局域网用户来说,能够时刻与外部网络保持联系是非常重要的。通常情况下,内部网络中的所有主机都设置一条相同的缺省路由,…

vue-cli脚手架(框架)

一、创建vue项目 npm install vue-cli -g #-g全局 (sudo)npm install vue-cli -g #mac笔记本vue-init webpack myvue #项目的名字 cd muvue npm install npm run dev 二、目录结构的说明 出现下面这样的图就说明成功了 三、import和require的区别 import一定要放在文件顶部…

poj 1679 次小生成树

次小生成树的求法: 1.Prime法 定义一个二维数组F[i][j]表示点i到点j在最小生成树中的路径上的最大权值。有个知识就是将一条不在最小生成树中的边Edge加入最小生成树时,树中要去掉的边就是Edge连接的两个端点i,j的F[i][j]。这样就能保存找到的生成树时次小生成树。 …

mysql金库模式_Python vault-anyconfig包_程序模块 - PyPI - Python中文网

vaultanyconfig" rel"nofollow">使用加载和转储功能扩展hvac hashicorp vault客户端任何配置。这允许自动混合来自保险库的机密,允许您存储配置填充了所有详细信息的文件保存为机密,然后访问hashicorp保险库将机密加载到内存字典中。支…

awk3.0 — awk变量

awk有一些内置变量和外置变量,内置变量就是awk自带的变量,用户可以拿来直接使用,如FS,OFS等 awk常用内置变量如下几种: FS:输入单词分隔符,默认是空格 OFS:输出单词分隔…

关于yum库的相关问题

局域网共享yum库的两种方式: 一种是基于HTTP的,需要配置httpd。 一种是基于FTP的。需要FTP的支持。 具体设置参数可参照网上的相关教程。 yum库的建立主要涉及到两点: 1、 Yum服务器安装createrepo并创建仓库 2、 安装完成之后,在…

[ JSOI 2015 ] Salesman

\(\\\) \(Description\) 给出一棵以\(1\)为根的\(N\)个节点的树,开始的时候你在\(1\)号节点。 除了\(1\)号节点以外,每个点都有访问次数限制\(t_i\),即到达该点的次数上限。 除了\(1\)号点每个点还有一个权值\(w_i\),这个权值可以…

linux安装python2和3版本_Windows下安装Python2和Python3双版本

现在大家常用的桌面操作系统有:Windows、Mac OS、Ubuntu,其中Mac OS 和 ubuntu上都会自带Python。这里我们只介绍下Windows(我用的Win10)环境下的python2.x 和 python3.x 的安装,以及python2.x 与 python3.x 共存时的配置问题。本节内容pytho…

JS+CSS点击弹出登陆框代码

<head><meta http-equiv"Content-Type" content"text/html; charsetgb2312"><title>弹出登录框的实现代码</title></head><body><style type"text/css">body {margin: 0px;padding:0}#div1 {display:…

awk4.0 — awk格式化

awk格式化使用printf函数&#xff0c;类似于C语言中的printf函数 比如 awk {printf "%s\n", $1} test1 上面的方式是awk每次处理一行&#xff0c;然后进行替换的&#xff0c;如果我们想要传入多个参数&#xff0c;此时就需要多个格式化

在LinearLayout中嵌套RelativeLayout来设置Button的位置(xml文件)

想将Button和ListView分别放在屏幕的一左一右。 单纯使用android:gravity和android:layout_gravity不成功。 于是涉及到RelativeLayout 关键为&#xff1a;android:layout_alignParentRight"true" android:layout_alignParentLeft"true" <?xml versio…

Scrapy爬虫-必备插件

必备插件&#xff1a; lxml, an efficient XML and HTML parser parsel, an HTML/XML data extraction library written on top of lxml w3lib, a multi-purpose helper for dealing with URLs and web page encodings twisted, an asynchronous networking framework https://…

python类和对象课件_简单解释Python的类和对象

前言&#xff1a;对象是模拟真实世界&#xff0c;把数据和程序进行封装 。对象 属性 方法我们需要用类来创造一个对象&#xff0c;就像我们要用图纸来造房子一样。在Python中函数名是以小写字母开头 &#xff0c;类名是以大写字母开头。0x00:面向对象(Object Oriented)我们一般…

awk5.0 — awk模式之一

再次重申awk的语法 awk [options] ‘Pattern {Actions}’ file1,file2… awk模式&#xff0c;在之前的文章中简单使用了BEGIN和END。这里的模式&#xff0c;其实我们可以理解成是条件&#xff0c;awk是一行行处理数据的&#xff0c;如果满足某个条件awk就处理某一行数据&#x…

CF331A1,331A2

链接&#xff1a;http://codeforces.com/problemset/problem/331/A1 题意&#xff1a;不翻译了。 思路&#xff1a;A1题数据范围小&#xff0c;暴力是可行的&#xff0c;我果断暴力了。不过&#xff0c;话说&#xff0c;除了暴力我还会什么。。。闲话少说。A2的话&#xff0c;采…

SCCM 2012系列9 补丁分发上

HI&#xff0c;今天我会给大家介绍SCCM 2012的补丁分发&#xff0c;分为上中下&#xff0c;当然希望大家多多指教哦 1 服务器配置 1.1 环境要求 如果SCCM和WSUS在同一台服务器上那没什么&#xff0c;但如果WSUS和SCCM分别在不同的服务器上&#xff0c;那么WSUS服务器需要把S…

python基础-垃圾回收机制

垃圾回收 Python中的垃圾回收是以引用计数为主&#xff0c;分代收集为辅。引用计数的缺陷是循环引用的问题。 引用计数 原理&#xff1a;当一个对象的引用被创建或者复制时&#xff0c;对象的引用计数加1&#xff1b;当一个对象的引用被销毁时&#xff0c;对象的引用计数减1&am…

awk 6.0 — awk模式之二

awk的语法 awk [options] ‘Pattern {Actions}’ file1,file2… 之前介绍了三种模式&#xff1a;空模式&#xff0c;关系运算模式&#xff0c;BEGIN/END模式 正则模式 模式可以理解成条件&#xff0c;正则模式就是满足正则表达式条件的&#xff0c;就执行相应的动作&#xf…

根据搜索来路 弹出相应广告

根据搜索来路 弹出相应广告 以下是一段php判断搜索引擎的代码 <?PHP $referer $_SERVER[HTTP_REFERER]; if(!$referer ){ if(ereg(http,$referer)){ $referer eXPlode(.,$referer); if(is_array($referer)){ $referer $referer[1]; if($referer google OR $referer b…

redis mysql查询数据类型_linux 常见的标识与Redis数据库详解

xxxxxx:~$ :第一个 xxx 只的是 用户名第二个 xxx 代表的是 HOST主机~ : 当前用户的根&#xff0c; 根的位置在 /home/用户名$ : 代表当前用户是一个普通用户# : 代表当前用户是超级用户查看当前命令所在的位置pwd文件夹/文件的常见命令mkdirlsrmdirrm创建文件夹mkdirmkdir test…

/etc/hosts/中HOSTNAME错误导致lsnrctl启动错误

系统环境&#xff1a;REDHAT LINUX5.4 ORACLE10.2.0.4&#xff0c;是通过虚拟机复制另外一台数据库系统环境后安装ORACLE获得。故障现象&#xff1a;ORACLE安装正常&#xff0c;本地服务正常&#xff0c;本地数据通过IMP可以正常导入&#xff0c;但是LSNRCTL能够启动&#xff…

16_python_面向对象

一、面向对象和面向过程的区别1、面向对象&#xff1a;一切以对象为中心。有相同属性和动作的结合体叫做对优点&#xff1a;易维护、易复用、易扩展&#xff0c;由于面向对象有封装、继承、多态性的特性&#xff0c;可以设计出低耦合的系统&#xff0c;使系统 更加灵活、更加易…

怎么用canvas画秒针_用canvas画一个钟表

body{background: #000000;}#c1{background: #FFFFFF;}span{color: #FFFFFF;}var oCdocument.getElementById("c1");var oGcoC.getContext(2d);setInterval(function(){ //循环计时器每一秒调用一次&#xff0c;相当于每隔一秒画一次表盘oGc.clearRect(0,0,oC.offset…

每日英语:China's Labor Market Tightens

Job cuts in China appear to be on the rise, dimming prospects for a labor market that has been a resilient bright spot amid a slowdown in the worlds second-largest economy. dimming&#xff1a;调光&#xff1b;变暗    resilient&#xff1a; 弹回的&#xf…

大数据-spark-hbase-hive等学习视频资料

不错的大数据spark学习资料&#xff0c;连接过期在评论区评论&#xff0c;再给你分享 https://pan.baidu.com/s/1ts6RNuFpsnc39tL3jetTkg 转载于:https://www.cnblogs.com/xjh713/p/9704251.html