理解js中的原型链,prototype与__proto__的关系

说到prototype,就不得不先说下new的过程。

我们先看看这样一段代码:

1<script type="text/javascript">
2 var Person = function () { };
3 var p = new Person();
4</script>

很简单的一段代码,我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步:

<1> var p={}; 也就是说,初始化一个对象p。

<2> p.__proto__=Person.prototype;

<3> Person.call(p);也就是说构造p,也可以称之为初始化p。

关键在于第二步,我们来证明一下:

1<script type="text/javascript">
2var Person = function () { };
3var p = new Person();
4alert(p.__proto__ === Person.prototype);
5</script>

这段代码会返回true。说明我们步骤2的正确。

那么__proto__是什么?我们在这里简单地说下。每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。

按照标准,__proto__是不对外公开的,也就是说是个私有属性,但是Firefox的引擎将他暴露了出来成为了一个共有的属性,我们可以对外访问和设置。

好,概念说清了,让我们看一下下面这些代码:

1<script type="text/javascript">
2var Person = function () { };
3 Person.prototype.Say = function () {
4 alert("Person say");
5}
6var p = new Person();
7p.Say();
8</script>

这段代码很简单,相信每个人都这样写过,那就让我们看下为什么p可以访问Person的Say。

首先var p=new Person();可以得出p.__proto__=Person.prototype。那么当我们调用p.Say()时,首先p中没有Say这个属性, 于是,他就需要到他的__proto__中去找,也就是Person.prototype,而我们在上面定义了 Person.prototype.Say=function(){}; 于是,就找到了这个方法。

好,接下来,让我们看个更复杂的。

01<script type="text/javascript">
02var Person = function () { };
03 Person.prototype.Say = function () {
04 alert("Person say");
05}

 

06Person.prototype.Salary = 50000;

 

07var Programmer = function () { };
08Programmer.prototype = new Person();
09Programmer.prototype.WriteCode = function () {
10 alert("programmer writes code");

 

11};

 

 

12Programmer.prototype.Salary = 500;

 

13var p = new Programmer();
14p.Say();
15p.WriteCode();
16alert(p.Salary);
17</script>

我们来做这样的推导:

var p=new Programmer()可以得出p.__proto__=Programmer.prototype;

而在上面我们指定了Programmer.prototype=new Person();我们来这样拆分,var p1=new Person();Programmer.prototype=p1;那么:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根据上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。

好,算清楚了之后我们来看上面的结果,p.Say()。由于p没有Say这个属性,于是去p.__proto__,也就是 Programmer.prototype,也就是p1中去找,由于p1中也没有Say,那就去p.__proto__.__proto__,也就是 Person.prototype中去找,于是就找到了alert(“Person say”)的方法。

其余的也都是同样的道理。

这也就是原型链的实现原理。

最后,其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用,换句话说,他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__!

转载于:https://www.cnblogs.com/chengjun/p/5237288.html

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

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

相关文章

C#抓取网页HTML内容

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Net; using System.Text; using System.IO; using System.Text.RegularExpressions; namespace Web { /// <summary> /// 公共方法类 /// </summary> p…

项目一感应垃圾桶(Wemos)

硬件材料&#xff1a; Wemos D1、SG90舵机、HC-SR04、杜邦线若干、蜂鸣器3.3V&#xff08;可有可无&#xff09; 软件材料&#xff1a; arduino IDE编译器、USB转串口驱动 Wemos D1&#xff1a; 特性&#xff1a; 基于ESP-8266EX及arduino做的一个融合arduino兼容&#xff0…

docker删除本地所有镜像

docker rmi -f ${docker images -qa}

PAT1069. The Black Hole of Numbers

//这是到水题&#xff0c;之前因为四位数的原因一直不能A&#xff0c;看了别人的程序&#xff0c;才明白&#xff0c;不够四位的时候没考虑到&#xff0c;坑啊。。。。。脸打肿 #include<cstdio>#include<algorithm>using namespace std;int main(){ //freopen(&qu…

WiFi避障小车

硬件清单&#xff1a; Wemos D1&#xff08;支持AP模式也就是路由模式和STA模式也就是上网设备&#xff09;、超声波模块、小车、L9110s步进电机控制器 软件&#xff1a; eclipse、arduino IDE WiFi配置参考博文 ESP8266WiFi库: 从上图中可以看出ESP8266WiFi库主要包含Stati…

yum常用命令整理

yum命令的形式一般如下。要说明的是以下演示中所使用到的PACKAGE、GROUP都是变量&#xff0c;需要保证运行yum命令的主机能连接外网&#xff0c;否则大部分命令将由于没有网络连接而不能输出结果。yum [options] [command] [package]#以下演示中大写的单词是变量1.安装操作yum …

CSS3 2D 转换

CSS3 2D 转换 先看兼容性 transform属性向应用元素应用2d 或者 3d装换&#xff1b;该属性允许我们进行旋转&#xff0c;缩放&#xff0c;移动或者倾斜&#xff1b; 基本语法&#xff1a; transform: none|transform-functions;transform-function&#xff1a;这东东有n的函数可…

程序猿最喜欢说的30句话

虽然代码总会有这个那个问题&#xff0c;但程序猿却总有谜一般的从容和自信。上图来自&#xff1a;《当程序出问题时程序员最喜欢说的30句话》来看看程序猿经常说的话&#xff1a;1、在我的电脑上是正常的啊。。。2、不可能出现这种情况的3、快了&#xff0c;已经完成了90%。4、…

linux环境下Ncurses实现贪吃蛇游戏

游戏说明&#xff1a; linux环境下基于Ncurses图形库的C语言小游戏。 Ncurses介绍&#xff1a; Ncurses(new curses)是一套编程库&#xff0c;它提供了一系列的函数以便使用者调用它们去生成基于文本的用户界面。 Ncurses是一个能提供功能键定义(快捷键),屏幕绘制以及基于文本…

韩顺平循序渐进学java 第13讲 抽象类.接口

13.1抽象类 13.1.1 概念 当父类的一些方法不能确定时&#xff0c;可以用abstract关键字来修饰该方法&#xff0c;称为抽象方法&#xff0c;用abstract来修饰该类&#xff0c;称为抽象类。 13.1.2 抽象类-深入讨论 抽象类是java中一个比较重要的类&#xff1a; 1、用abstract关键…

C#实现简体繁体转换代码示例

//简体转繁体 public static string _ConvertChinTrad(string strInput) { EncodeRobert edControl new EncodeRobert(); string strResult ""; if (strInput null) return strResult; if (strInput.ToString().Length > 1) strResult edControl.SCTCConvert(…

java基础JDK的安装和环境变量的配置

JRE和JDK&#xff1a; JRE是java程序运行时环境&#xff0c;包含JVM&#xff08;相当于java在不同操作系统上运行时java和操作系统之间的翻译&#xff0c;保证java程序的跨平台&#xff09;和运行时所需要的核心库。所以我们想要运行一个已有的java程序&#xff0c;那么只需要…

C#通过SMTP发送邮件代码示例

1、新建SMTP.cs类库文件 public class SMTP { /// <summary> /// SMTP服务器 /// </summary> public string smtp { get; set; } /// <summary> /// SMTP服务器端口 /// </summary> public int port { get; set; } /// <summary> /// 发件人 ///…

docker下载tomact

docker run -it -p 8080:8080 tomcat 比如下载tomcat,你现在去访问&#xff0c;先访问docker里面的tomcat, 左边的8080是对外暴露的服务端口&#xff0c;对应着右边的8080是tomact的实际端口 下载tomcat 启动tomcat docker run -it -p 8080:8080 tomcat

Wijmo 2016年蓝图

2015年很快就过去了&#xff0c;这是 Wijmo 重要的一年&#xff0c;尤其是对 Wijmo5。脱离传统的小部件&#xff0c;重新写一套 JS 控件&#xff0c;现在看来这个决定是正确的。用 TypeScript 写 Wijmo5&#xff0c;意味着我们没有任何依赖&#xff0c;不再需要 jQuery&#xf…

IDEA安装和运行HelloWorld

IDEA安装&#xff1a; IDEA中Hello World步骤&#xff1a; ① ②点击创建空项目&#xff0c;下一步 ③ ④在打开后会弹出以下界面&#xff0c;然后点击新建模块 ⑤点击新建模块后出现以下界面&#xff0c;选择java并选择JDK的安装路径。 ⑥然后修改模块名称&#xff0c;点击…

C#获取电脑IP、MAC地址示例代码

/// <summary> /// 使用 C# 自带的类库实现计算机信息获取 /// </summary> public class DefaultDeviceInfo { public virtual string GetCpuId() { try { string cpuInfo " "; ManagementClass cimobject new ManagementClass("Win32_Processor…

docker运行随机分配端口

docker run -d -it -P tomcat -P这个是大写的P&#xff0c;表示随机分配端口 执行后可以看到32768为随机分配的端口&#xff0c;8080是tomcat端口 测试成功