广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript原型链中函数和对象的理解
  • 270
分享到

JavaScript原型链中函数和对象的理解

2024-04-02 19:04:59 270人浏览 八月长安
摘要

目录__ proto__prototype.__ proto__理解__ proto__ 最近在看高程4,原型链肯定是绕不过的,本瓜之前一直认为,只要记住这句话就可以了: 一个对象的

__ proto__

最近在看高程4,原型链肯定是绕不过的,本瓜之前一直认为,只要记住这句话就可以了:

一个对象的隐式原型(__proto__)等于构造这个对象的构造函数的显式原型(prototype)

确实,所有对象都符合这句真理,在控制台打印一试便知:

const str = new String("123")
str.__proto__ === String.prototype // true
const arr = new Array(["123"])
arr.__proto__ === Array.prototype // true
const obj = new Object()
obj.__proto__ === Object.prototype // true
const bl = new Boolean(false)
bl.__proto__ === Boolean.prototype // true
......
const fn = function(){}
fn.__proto__ === Function.prototype // true

虽然我们平常都会像以下这样写居多,声明方式不一样,但结果不变:

const str = '123'
str.__proto__ === String.prototype // true
const arr = [123]
arr.__proto__ === Array.prototype // true
const obj = {}
obj.__proto__ === Object.prototype // true
const bl = false
bl.__proto__ === Boolean.prototype // true
......
const fn = new Function()
fn.__proto__ === Function.prototype // true

顺着这个思路,那我们接着在构造函数上,继续用 __proto__ 寻找,可以得到:

String.__proto__=== Function.prototype // true
Array.__proto__=== Function.prototype // true
Boolean.__proto__=== Function.prototype // true
Object.__proto__=== Function.prototype // true 
Function.__proto__=== Function.prototype // true

这些基本构造函数(String、Array、Boolean、Object 等),都是用 Function 来构造生成的!!

还能用 __proto__ 继续向上找吗? 不能了,因为结果会是一直重复下面这一行代码:

Function.__proto__ === Function.prototype

所以,不管你怎样通 __proto__ 隐式原型向上找,最终都只能找到 Function,而 Function 的隐式原型等于它的显式原型;

prototype.__ proto__

但是这与我们所知不符呀,不是万物皆对象吗??

我们尝试再用 __proto__ 向前探一步,发现:

Function.__proto__.__proto__ === Object.prototype // true
Function.__proto__ === Function.prototype // true
Function.prototype.__proto__ === Object.prototype // true

Function 这个终极构造函数,通过查找显式原型的隐式原型,竟然等于 Object 的显式原型!

其实,其它构造函数也一样,都能找到 Object:

String.prototype.__proto__=== Object.prototype // true
Array.prototype.__proto__=== Object.prototype // true
Boolean.prototype.__proto__=== Object.prototype // true
Object.prototype.__proto__=== Object.prototype // true 

所有构造函数的显式原型的隐式原型 等于 Object 的显式原型!!

理解

为什么要这样设定呢??

为什么对象只用 .__proto__ 向上查找,最终只能找到 Function?

为什么构造函数用 .prototype.__proto__ 向上查找,能找到 Object ?

这样原型链查找不是有两套逻辑吗?

后来,本瓜歪理解:

【Function】就好像是创造万物的上帝,它创造了:各种各样的物质【对象】,物质又分化为:人【字符串】、鱼【数组】、鸟【布尔】、兽【数值】、石头【Date】、花草【正则】等等分类;

这些不同种类的物质,再一代一代延续(繁衍)下去。。。。。。

问:这些种类,它们子孙或后代们的特性【属性】是来源于哪里呢??

1.可以从它们的祖先那里继承而来,这一点没毛病,生物 DNA 遗传,龙生龙、凤生凤,老鼠儿子会打洞

let Mouse = function(){
	this.makeAHole = true
}
let m1 = new Mouse()
m1.makeAHole // true
m1.__proto__.makeAHole === Mouse.prototype.makeAHole // true

2.或者还可以从【物质】这个原始分类而来, 因为人鱼鸟兽、花草树木、石头都还是属于“物质”,比如都有碳元素,就像字符串、数组、布尔、数值都是属于“对象”,都有 toString 方法;

Object.prototype.carbon = true
let p1 = 'man'
p1.carbon // true
p1.__proto__.__proto__.carbon === Object.prototype.carbon// true

对象 Object(物质)是由函数 Function(上帝)创造的,没毛病。

上帝(Function)也是一种物质(Object),一切都是物质(Object),物质(Object)起源于大爆炸,起源于空(null),也没毛病。

再来看这张经典的图:

按照咱们“理解”也画一个:

哈哈哈,害行,这次就先理解到这吧,更多关于javascript原型链函数对象的资料请关注编程网其它相关文章!

--结束END--

本文标题: JavaScript原型链中函数和对象的理解

本文链接: https://www.lsjlt.com/news/151510.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript原型链中函数和对象的理解
    目录__ proto__prototype.__ proto__理解__ proto__ 最近在看高程4,原型链肯定是绕不过的,本瓜之前一直认为,只要记住这句话就可以了: 一个对象的...
    99+
    2022-11-13
  • 怎么理解JS原型、原型链、对象
    本篇内容主要讲解“怎么理解JS原型、原型链、对象”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么理解JS原型、原型链、对象”吧! 一. 普通对象与函...
    99+
    2022-10-19
  • Javascript中面向对象和原型原型链是怎样的
    今天就跟大家聊聊有关Javascript中面向对象和原型原型链是怎样的,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。面向对象理论知识总述* 核心答案...
    99+
    2022-10-19
  • JavaScript中的原型和原型链怎么理解
    这篇文章主要介绍“JavaScript中的原型和原型链怎么理解”,在日常操作中,相信很多人在JavaScript中的原型和原型链怎么理解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2022-10-19
  • JavaScript的原型对象与原型链实例分析
    本篇内容介绍了“JavaScript的原型对象与原型链实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、prototype和__pr...
    99+
    2023-07-02
  • 详解JavaScript中的原型和原型链
    目录原型链图原型必备知识prototype属性(显示原型)proto属性(隐式原型)constructor属性总结 原型链图 原型必备知识 要了解原型就必须搞清三个属性:__pro...
    99+
    2022-11-12
  • javascript的构造函数,原型,原型链和new你了解多少
    目录1、什么是构造函数?2、如何通过构造函数创建一个对象?3、new一个对象的过程发生了什么?4、什么是原型?5、原型、构造函数、实例的关系?6、什么是原型链?7、类?总结1、什么是...
    99+
    2022-11-13
  • 如何理解JavaScript中的原型与原型链
    本篇文章给大家分享的是有关如何理解JavaScript中的原型与原型链,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。原型和原型链关系贯穿Jav...
    99+
    2022-10-19
  • 带你彻底理解JavaScript中的原型对象
    目录一、什么是原型1.1 函数的原型对象1.2 使用构造函数创建对象二、与原型有关的几个属性和方法2.1 prototype属性2.2 constructor属性2.3 __prot...
    99+
    2022-11-12
  • javascript的构造函数, 原型,原型链和new是什么
    这篇“javascript的构造函数, 原型,原型链和new是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“j...
    99+
    2023-06-29
  • 三张图带你搞懂JavaScript的原型对象与原型链
    对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在...
    99+
    2022-11-13
  • 彻底理解JavaScript的原型与原型链
    目录前言基础铺垫prototypecontructor属性__proto__原型链提高总结后语前言 原型与原型链知识历来都是面试中考察的重点,说难不算太难,但要完全理解还是得下一定...
    99+
    2022-11-12
  • JavaScript原型和原型链与构造函数和实例之间的关系详解
    目录原型原型链原型 如图所示: 1.instanceof检测构造函数与实例的关系: function Person () {.........} person = new Pers...
    99+
    2022-11-13
  • Javascript的原型和原型链你了解吗
    目录一、为什么要使用原型?怎样去理解原型的出现1、对象字面量创建对象的缺点2、工厂函数3、构造函数二、使用原型三、原型概念辨析四、原型链练习总结一、为什么要使用原型?怎样去理解原型的...
    99+
    2022-11-13
  • Javascript原型和原型链的知识点整理
    这篇文章主要讲解了“Javascript原型和原型链的知识点整理”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Javascript原型和原型链的知识点整理”...
    99+
    2022-10-19
  • JavaScript中的原型和原型链是什么
    这篇文章主要介绍“JavaScript中的原型和原型链是什么”,在日常操作中,相信很多人在JavaScript中的原型和原型链是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript中的原型和...
    99+
    2023-06-21
  • javascript构造函数以及原型对象的示例分析
    小编给大家分享一下javascript构造函数以及原型对象的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!如果是实例方法,不同的实例化,它们引用的地址是不一样的,是唯一的。//定义...
    99+
    2022-10-19
  • javascript中原型对象this的原则是什么
    小编给大家分享一下javascript中原型对象this的原则是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!原则只有当调用这个函数时,才能确定构造函数中的this指向谁。一般来说,构造函数中的this指的是函数的调用...
    99+
    2023-06-20
  • 详解JavaScript原型对象的this指向问题
    目录一、this指向二、修改this指向1、call()方法2、apply()方法总结 一、this指向 构造函数中的this 指向实例对象。那么原型对象this的指向呢? 如下:...
    99+
    2022-11-12
  • javascript原型链图解的总结和实践
    目录原型链我们可以基于原型链来实现一个简易的JQuery库总结 原型链 在ES6中引入了class关键字,但是JS依然是基于原型的,class实际上是语法糖。 举个例子,有一个pe...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作