每一个JavaScript对象都和另一个对象相关联,相关联的这个对象就是我们所说的“原型”。每一个对象都会从原型继承属性和方法。有一个特殊的对象没有原型,就是Object,还有一种通过Object.create()创建的对象,如果传入的第一个参数为null,也没有原型。在之后的图示中会进行说明。

举个栗子,我们首先声明一个函数Student():

 function Student(name){
this.name = name;
this.hello = function(){
alert(`Hello,${this.name}`);
}
}
这个函数包含一个属性name和一个方法hello。
在JavaScript中,可以通过new关键字来调用Student函数(不写new就是一个普通函数,写new就是一个构造函数),并且返回一个原型指向Student.prototype的对象,如下所示:
1 var xiaoming = new Student("xiaoming");
alert(xiaoming.name); // xiaoming
xiaoming.hello(); // Hello,xiaoming
如果我们想确认一下我们的设想对不对,就会希望去比较一下xiaoming.prototype和Student.prototype是否相等。
但是xiaoming没有prototype属性,不过可以用__proto__来查看。接下来我们就用这些属性来查看xiaoming,Student,Object之间的原型链:
document.onreadystatechange = function(){
// interactive表示文档已被解析,但浏览器还在加载其中链接的资源
if(document.readyState === "interactive"){
var xiaoming = new Student("xiaoming");
alert(xiaoming.name);
xiaoming.hello();
console.log("xiaoming.__proto__:");
console.log(xiaoming.__proto__);
console.log("Student.prototype:");
console.log(Student.prototype);
console.log("xiaoming.__proto__ === Student.prototype:" + xiaoming.__proto__ === Student.prototype);
console.log("Student.prototype.constructor:" + Student.prototype.constructor);
console.log("Student.prototype.prototype:" + Student.prototype.prototype);
console.log("Student.prototype.__proto__:");
console.log(Student.prototype.__proto__);
console.log(Object.prototype);
console.log("Student.prototype.__proto__ === Object.prototype:" + Student.prototype.__proto__ === Object.prototype);
}
}

七个红色箭头指向的就是七个console.log语句的输出结果。用图例展示一下如图所示:

测试表明Object.prototype和Student.prototype.__proto__指向的Object并不是同一个。
这个Object就是之前说的没有原型的那个Object,我们可以看到它并没有对应的prototype或者__proto__属性:

由图可得原型链如下所示:

由于本人语言表达能力有限,理解也比较浅显,所以图示比较多,错误之处还望指出,谢谢。

简单说一说对JavaScript原型链的理解的更多相关文章

  1. JavaScript原型链的理解

    JavaScript中的每一个对象都有prototype属性,我们称之为原型,而原型的值也是一个对象,因此它有自己的原型,这样就串联起来形成了一条原型链.原型链的链头是object,它的prototy ...

  2. JavaScript学习总结(十七)——Javascript原型链的原理

    一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中, ...

  3. 明白JavaScript原型链和JavaScrip继承

    原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: <script type="text/javascript"&g ...

  4. 资料--JavaScript原型链

    JavaScript原型链 原文出处:https://www.cnblogs.com/chengzp/p/prototype.html 目录 创建对象有几种方法 原型.构造函数.实例.原型链 inst ...

  5. javascript原型链中 this 的指向

    为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = { d: 40 }; var a = { x: 10, calculate: function (z) ...

  6. 深入理解javascript原型链

    在javascript中原型和原型链是一个很神奇的东西,对于大多数人也是最难理解的一部分,掌握原型和原型链的本质是javascript进阶的重要一环.今天我分享一下我对javascript原型和原型链 ...

  7. Javascript 原型链资料收集

    Javascript 原型链资料收集 先收集,后理解. 理解JavaScript的原型链和继承 https://blog.oyanglul.us/javascript/understand-proto ...

  8. JavaScript原型链:prototype与__proto__

    title: 'JavaScript原型链:prototype与__proto__' toc: false date: 2018-09-04 11:16:54 主要看了这一篇,讲解的很清晰,最主要的一 ...

  9. javascript原型与原型链个人理解

    想了解原型和原型链,我觉得首先我们得知道javascript里有一个Object 与 Function,它俩都是构造函数,当然函数也是一个对象.我们打印Object 与 Function看一下, co ...

随机推荐

  1. Windows Server 2008 R2 搭建网站详细教程

    转自:http://jingyan.baidu.com/album/642c9d34098bf5644a46f71f.html?picindex=4 网上都有一些Windows Server 2008 ...

  2. 接口调用 读取图片报错 Access to the path '' is denied.解决方案

    调用接口 读取服务器上 图片 报错: Server was unable to process request. ---> Access to the path '图片路径' is denied ...

  3. CSS之inline和inline-block

    inline-block 控制台-代码: PS:inline-block是让元素以内联形式存在,也就是不是块级,但是表现起来(又具有块级元素的高度)--也就是可以调高度(margin或者padding ...

  4. 【Android】16.0 UI开发(七)——列表控件RecyclerView的点击事件实现

    1.0 在各布局的基础上,修改ProvinceAdapter.java的代码: package com.example.recyclerviewtest; import android.support ...

  5. 2-3 Sass的函数功能-列表函数

    列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值: nth($list, $n):返回一个列表中指定的某个标签值 join($list1, ...

  6. CentOS 7运维管理笔记(1)----设置默认启动模式为GUI模式或命令行模式

    昨天在虚拟机中安装CentOS 7时选择了GNOME模式安装,开机默认进入GUI模式.网上搜找修改为默认命令行模式的方法,看到说修改 /etc/inittab文件,在最低下一行添加 但是 使用 cat ...

  7. Flink Flow

    1. Create environment for stream computing StreamExecutionEnvironment env = StreamExecutionEnvironme ...

  8. WebRequest的get及post提交

    static string get_html(string url) { var request = WebRequest.Create(url); var response = request.Ge ...

  9. c# 知识学习

    1.C#基础知识梳理系列 2.详解C#委托,事件与回调函数 3.C#制作Windows service

  10. 沉淀,再出发:Maven的使用和规范

    沉淀,再出发:Maven的使用和规范 一.前言 Maven作为项目管理工具,在一个大型项目开发的每个阶段都有着很大的用处,为什么需要这个东西呢,还是为了消除不确定性,统一化管理,正如我们做的每一件事其 ...