JavaScript两张图搞懂原型链

目录
  • 1.原型的关系
  • 2.原型链
  • 3.结语

前言：

我们上一篇文章介绍了JavaScript原型，为什么不将原型链一起介绍了呢？因为JavaScript中的原型链是一个难点，也是一个面试必问的考点，现在就来学习一下。

1.原型的关系

在JavaScript中的每个函数都会有一个prototype属性，这个属性又会返回一个原型，原型又有一个constructor属性，这个属性指向与之关联的构造函数。通过构造函数实例化的对象会有一个__proto__属性，这个__proto__属性指向与构造函数的prototype指向的是同一内存。

值得注意的是__proto__属性已经在标准中被删除，这里使用Object.getPrototypeOf(object)和Object.setPrototypeOf(object, prototype)代替。

现在来测试Object构造函数与原型的关系，示例代码如下所示：

// 首先 Object 是一个构造函数，就会有 prototype 属性
var result = Object.prototype
console.log(result) // 得到一个原型对象
/*
 * 原型对象的 constructor 属性 -> 返回与之关联的构造函数
 * Object.getPrototypeOf(result) 返回指向构造函数的 prototype
 */
var result2 = result.constructor
console.log(result2) // [Function: Object]
var result3 = Object.getPrototypeOf(result)
console.log(result3) // null

图解如下所示：

我们通过Object.getPrototypeOf(Object.prototype)获取Object.prototype的原型时，返回的值为null这就表示我们查找到Object.prototype就可以停止查找了。

2.原型链

为了更方便我们来理解原型链式什么，首先来看一下下面这一段代码：

function Person(name) {
  this.name = name
}

var PP = Person.prototype
var PPC = PP.constructor
// 验证与构造函数是否相同
console.log(PPC === Person) // true

// 实例化 Person
var person = new Person('一碗周')
// 获取 Person 实例化后的对象的原型
var pP = Object.getPrototypeOf(person)
// 验证 Person 实例化后的对象的原型是否指向构造函数的 prototype
console.log(pP === PP) // true

实际上所有的构造函数默认都是继承于Object的，如下代码测试：

// 获取 Person.prototype 的原型
var PPP = Object.getPrototypeOf(PP)
var OP = Object.prototype
// 判断两者是否相等
console.log(PPP === OP) // true

上面的代码表述的不是很清楚，我画了一张图来理解一下：

上图中画红色线的部分就是原型链，原型链就是原型中的关系的指向，直到最终结果为null也就是Object.prototype，原型链就结束了，也就是说**Object.prototype**是原型链中的终点。

我们可以通过Object.setPrototypeOf(obj, prototype)方法来设置具体内容的原型链，但是如果不是必要建议不要这样做，因为这样做是非常耗性能的。

3.结语

通过两张图来讲解JavaScript中的原型中的关系以及原型链是什么，最后还介绍了原型链的终点。

到此这篇关于JavaScript两张图搞懂原型链的文章就介绍到这了,更多相关JavaScript原型链内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解JavaScript中的原型和原型链

    详解JavaScript中的原型和原型链

    目录 原型链图 原型必备知识 prototype属性(显示原型) proto属性(隐式原型) constructor属性 总结 原型链图 原型必备知识 要了解原型就必须搞清三个属性:__proto__.prototype. constructor. 1.__proto__. constructor属性是对象所独有的: 2.prototype属性是函数独有的: 3.js中函数也是对象的一种,那么函数同样也有属性__proto__. constructor: 原型五大规则: 1.所有引用类型(对象,

  • JavaScript原型链详解

    JavaScript原型链详解

    目录 1.构造函数和实例 2.属性Prototype 3.属性__proto__ 4.访问原型上的方法 5.构造函数也有__proto__ 6.构造函数的原型也有__proto__ 7.Object.prototype这个原型对象很特殊 8.总结 1.构造函数和实例 假设你声明一个方法叫做Foo() ,那么我们可以通过new Foo()来声明实例. function Foo() { console.log("我是一个构造方法"); } const f1 = new Foo(); 现在你

  • JS难点同步异步和作用域与闭包及原型和原型链详解

    JS难点同步异步和作用域与闭包及原型和原型链详解

    目录 JS三座大山 同步异步 同步异步区别 作用域.闭包 函数作用域链 块作用域 闭包 闭包解决用var导致下标错误的问题 投票机 闭包两个面试题 原型.原型链 原型对象 原型链 完整原型链图 JS三座大山 同步异步 前端中只有两个操作是异步的: 定时器异步执行; ajax异步请求 编译器解析+执行代码原理: 1.编译器从上往下逐一解析代码 2.判断代码是同步还是异步 同步:立即执行 异步:不执行.放入事件队列池 3.等所有同步执行完毕开始执行异步 同步异步区别 api : 异步有回调,同步没有

  • 彻底理解JavaScript的原型与原型链

    彻底理解JavaScript的原型与原型链

    目录 前言 基础铺垫 prototype contructor属性 __proto__ 原型链 提高 总结 后语 前言 原型与原型链知识历来都是面试中考察的重点,说难不算太难,但要完全理解还是得下一定的功夫.先来看一道面试题开开胃口吧: function User() {} User.prototype.sayHello = function() {} var u1 = new User(); var u2 = new User(); console.log(u1.sayHello === u2

  • JavaScript 原型与原型链详情

    JavaScript 原型与原型链详情

    目录 1.prototype(显式原型) 2.__proto__(隐式原型) 3.constructor(构造函数) 4.new的原理 5.原型链 5.1 原型链的作用 5.2 构造函数的__proto__是什么呢? 6.总结 前言: JavaScript常被描述为一种「基于原型的语言」--每个对象都拥有一个「原型对象」,对象以其原型为模板.从原型继承属性和放法.原型对象也可能拥有原型,并从中继承属性和方法,一层一层以此类推.这种关系常被称为「原型链」,它解释了为何一个对象会拥有定义在其他对象中

  • 带你理解JavaScript 原型原型链

    目录 一.原型.原型链相等关系理解 二:原型.原型链的意思何在 看完这篇文章,你会发现,原型.原型链原来如此简单!  上面经典的原型链相等图,根据下文的学习,你会轻易掌握. 一.原型.原型链相等关系理解 首先我们要清楚明白两个概念: js分为函数对象和普通对象,每个对象都有__proto__属性,但是只有函数对象才有prototype属性 Object.Function都是js内置的函数, 类似的还有我们常用到的Array.RegExp.Date.Boolean.Number.String 这两

  • JavaScript两张图搞懂原型链

    JavaScript两张图搞懂原型链

    目录 1.原型的关系 2.原型链 3.结语 前言: 我们上一篇文章介绍了JavaScript原型,为什么不将原型链一起介绍了呢?因为JavaScript中的原型链是一个难点,也是一个面试必问的考点,现在就来学习一下. 1.原型的关系 在JavaScript中的每个函数都会有一个prototype属性,这个属性又会返回一个原型,原型又有一个constructor属性,这个属性指向与之关联的构造函数.通过构造函数实例化的对象会有一个__proto__属性,这个__proto__属性指向与构造函数的p

  • 如何通过一张图搞懂springBoot自动注入原理

    如何通过一张图搞懂springBoot自动注入原理

    目录 @SpringBootApplication注解解读 1.@SpringBootConfiguration 2.@EnableAutoConfiguration @Inherited @AutoConfigurationPackage AutoConfigurationImportSelector.class 3.@ComponentScan 总结 @SpringBootApplication注解解读 为什么我们的启动类上标注一个@SpringBootApplication注解,再加一个r

  • 基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解

    构造函数.原型实现继承的缺陷 首先来分析构造函数和原型链两种实现继承方式的缺陷: 构造函数(对象冒充)的主要问题是必须使用构造函数方式,且无法继承通过原型定义的方法,这不是最好的选择.不过如果使用原型链,就无法使用带参数的构造函数了.开发者如何选择呢?答案很简单,两者都用. 构造函数+原型混合方式 这种继承方式使用构造函数定义类,并非使用任何原型.创建类的最好方式是用构造函数定义属性,用原型定义方法.这种方式同样适用于继承机制,用对象冒充继承构造函数的属性,用原型链继承 prototype 对象

  • R语言 实现将两张图放在同一张画布

    R语言 实现将两张图放在同一张画布

    我就废话不多说了,大家还是直接看代码吧~ ts1<-ts(test_data$tot_num,frequency = 365,start=c(2017,11,21)) plot(ts1,col='blue',lty='dotted',ylim=c(50,550)) par(new=TRUE) ts2<-ts(test_data$pre_result,frequency = 365,start=c(2017,11,21)) plot(ts2,col='red',ylim=c(50,550)) 好

  • 14张图看懂什么是区块链技术

    14张图看懂什么是区块链技术

    区块链技术最初源于解决"拜占庭将军"问题,金融科技的发展使得区块链技术有了更好的应用场景.它最显著的特征是去中心化,当然在应用中也存在一些技术和安全的挑战.欲知何为区块链?且看图示详解. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们. 您可能感兴趣的文章: 用不到50行的Python代码构建最小的区块链 Python学习入门之区块链详解 你应该知道的区块链运作7个核心技术 200行代码轻松实现一个简单的区块链 利用swoole+redis实现股票和区块链服务

  • 一文搞懂JavaScript中原型与原型链

    一文搞懂JavaScript中原型与原型链

    目录 1.构造函数原型prototype 2.对象原型__proto__ 3.constructor构造函数 4.原型链 5.原型对象中的this指向 6.扩展内置对象(原型对象的应用) 在ES6之前,我们面向对象是通过构造函数实现的.我们把对象的公共属性和方法放在构造函数里 像这样: function student(uname,age) { this.uname = uname; this.age = age; this.school = function() { console.log('

  • JavaScript使用原型和原型链实现对象继承的方法详解

    JavaScript使用原型和原型链实现对象继承的方法详解

    本文实例讲述了JavaScript使用原型和原型链实现对象继承的方法.分享给大家供大家参考,具体如下: 实际上JavaScript并不是一门面向对象的语言,不过JavaScript基于原型链的继承方式.函数式语法,使得编程相当灵活,所以可以利用原型链来实现面向对象的编程. 之前对JavaScript一直都是一知半解,这两天看了一下原型链这一块知识,综合练习了一下JavaScript的对象继承方式. 以下就是原型链和原型的关系,引用网上的一张图 在Javascript中,每个函数都有一个原型属性p

  • 深入浅出理解javaScript原型链

    深入浅出理解javaScript原型链

    本文实例讲述了javaScript的原型链.分享给大家供大家参考.具体分析如下: 对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了. 看了这张图后突然对javascript有了质的理解. javascript的原型链有显式和隐式两种: 显式原型链:即我们常见的prototype: 隐式原型链:在一般环境下无法访问,即不可见,在FireFox下可以通过__proto__方式访问:隐式原型链用于jav

  • JavaScript三大重点同步异步与作用域和闭包及原型和原型链详解

    JavaScript三大重点同步异步与作用域和闭包及原型和原型链详解

    目录 1. 同步.异步 2. 作用域.闭包 闭包 作用域 3. 原型.原型链 原型(prototype) 原型链 如图所示,JS的三座大山: 同步.异步 作用域.闭包 原型.原型链 1. 同步.异步 JavaScript执行机制,重点有两点: JavaScript是一门单线程语言 Event Loop(事件循环)是JavaScript的执行机制 JS为什么是单线程 最初设计JS是用来在浏览器验证表单操控DOM元素的是一门脚本语言,如果js是多线程的,那么两个线程同时对一个DOM元素进行了相互冲突

随机推荐