脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js原型链

理解JavaScript原型链

 更新时间：2016年10月25日 15:54:53   作者：雨帘轻挂  
简单说一说对JavaScript原型链的理解,希望对大家学习JavaScript原型链有所帮助，具体内容如下

每一个JavaScript对象都和另一个对象相关联，相关联的这个对象就是我们所说的“原型”。每一个对象都会从原型继承属性和方法。有一个特殊的对象没有原型，就是Object。在之后的图示中会进行说明。

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

function Student(name){
  this.name = name;
 this.hello = function(){
   alert(`Hello,${this.name}`);
 }
 }

这个函数包含一个属性name和一个方法hello。
在JavaScript中，可以通过new关键字来调用Student函数（不写new就是一个普通函数，写new就是一个构造函数），并且返回一个原型指向Student.prototype的对象，如下所示：

 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中类型的判断

    简单谈谈Javascript中类型的判断

    这篇文章主要是对判断javascript的数据类型的判断方式进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2015-10-10
  • JavaScript中DOM和BOM的区别与用处详解

    JavaScript中DOM和BOM的区别与用处详解

    这篇文章主要介绍了JavaScript中DOM和BOM的区别与用处,DOM和BOM是前端开发中常用的两个概念,它们分别表示不同的对象模型,用于操作浏览器的不同部分,了解它们的区别和用处,有助于在前端开发中灵活使用 JavaScript 操作页面和浏览器,需要的朋友可以参考下
    2024-09-09
  • Javascript 制作图形验证码实例详解

    Javascript 制作图形验证码实例详解

    这篇文章主要介绍了Javascript 制作图形验证码实例详解的相关资料,附有实例代码及实现效果图，需要的朋友可以参考下
    2016-12-12
  • js判断横竖屏及禁止浏览器滑动条示例

    js判断横竖屏及禁止浏览器滑动条示例

    这篇文章主要介绍了使用js如何判断横竖屏及禁止浏览器滑动条,需要的朋友可以参考下
    2014-04-04
  • js保留两位小数最简单的实现方法

    js保留两位小数最简单的实现方法

    JS数据格式化是在进行web前端开发时常碰到的事情,特别是在数据类型为Float的数据就需要特殊处理,如保留两位小数、小数点后的数据是否需要四舍五入等等,下面这篇文章主要给大家介绍了关于js保留两位小数最简单的实现方法,需要的朋友可以参考下
    2023-05-05
  • javascript中typeof操作符和constucor属性检测

    javascript中typeof操作符和constucor属性检测

    这篇文章主要介绍了javascript中typeof操作符和constucor属性检测的相关资料,需要的朋友可以参考下
    2015-02-02
  • Alova.js现代化请求库使用指南

    Alova.js现代化请求库使用指南

    alova.js 是一个基于 Promise 的轻量级 HTTP 请求库,它提供了简单而强大的 API 来处理前端的 HTTP 请求,它的设计目标是简化开发者在前端进行 HTTP 请求的过程,提供更好的开发体验和更高的效率,本文给大家详细介绍了Alova.js现代化请求库的使用,需要的朋友可以参考下
    2025-03-03
  • 详解Bootstrap四种图片样式

    详解Bootstrap四种图片样式

    本文给大家介绍Bootstrap 对图片的支持，Bootstrap提供了四个可对图片应用简单样式的class，对Bootstrap四种图片class相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • javascript学习小结之prototype

    javascript学习小结之prototype

    本系列博文主要谈一些在 javascript 使用中经常会混淆的高级应用，包括: prototype, closure, scope, this关键字. 对于一个需要提高自己javascript水平的程序员,这些都是必须要掌握的，本节主要介绍prototype.
    2015-12-12
  • uni-app全局变量的四种实现方式总结

    uni-app全局变量的四种实现方式总结

    在开发的过程中,我们不可避免的用到全局变量,比如我们的请求的公共路径这个变量,下面这篇文章主要给大家总结介绍了关于uni-app全局变量的四种实现方式,需要的朋友可以参考下
    2023-10-10

最新评论