一篇搞懂原型链 深入讲解 prototype __proto__

2019-06-14 admin

看过构造函数和原型链的很多文章,要么直接讲的比较突兀,不适合新手看,要么只是讲了一部分,今天我来做个了断,梳理一下自己的理解,还请各路大神不吝赐教。 (文中部分推论仅为个人观点,希望不会把谁谁带进小黑沟里)

一 无极生太极,太极生两仪,两仪生四象,四象生八卦,八卦演万物

万物皆对象,对象从何而来?

var a = {};
var b = new Object();
var c = Object();
var d = new fn();
var ga = Object.create(null);
var gb = Object.create({});
var gc = Object.create(d);

// 其实都是实例化构造函数
function user(){    
    this.name = 'tom';
}
fn.prototype.age = 18;
var objTom = new user();

二 江有碧水 山有青松

构造函数有 prototype proto 对象有 proto (prototype 又是对象)

clipboard.png

objTom.proto 指向 fn.prototype

fn.prototype.proto 指向 Object.prototype

Object.prototype.proto 指向 null

这是最常见的原型链

三 人过留名 雁过留声

objTom 的咏春拳了得,但是如何表明自己是师出正派 user 呢? 通过constructor

clipboard.png

也就是说 判定一个对象是哪个门派有两条,一功夫正宗 二功夫师出何门。

var objJohn = {}
objJohn.__proto__ = user.prototype
objJohn.constructor = user

经过两步 objJohn 正式成为咏春弟子,当然,学了功夫背叛师门的也是有的。 师父的功夫哪里来的呢?当然是自己悟出来的。 clipboard.png

四 创始之初 皆为混沌

user虽然是函数,但也是对象,是由 Function 创建。但是Function这种原始天尊又由何而来?

clipboard.png

Function 创建了自己,自身的prototype __proto__都是function类型。尽管自己给自己用泥巴捏身体,但是这个泥巴(Function.prototype 函数)从何而来呢?

clipboard.png

虽然 Function 能创建自己 但是还是依赖于 Object和Object.prototype(我们叫他混沌之灵吧)。

Object 用 Object.prototype 创建了 Function.prototype 函数(对象) (因为指向他的__proto__) Function 用 Function.prototype 创建了 Function 函数(对象) (因为指向他的__proto__) Function 用 Function.prototype 创建了 user 函数(对象) (因为指向他的__proto__) user 用 user.prototype 创建了 objTom 对象 (因为指向他的__proto__)

问题又来了,Object 构造函数从哪里来的呢

clipboard.png

总算可以出一口气了。上图我们可以看到。 1 Object 函数还是 原始天尊 Function 生产出来的。 2 Object.prototype 我们的混沌之灵来自 null

所以小小的更新下结论,这个不是鸡和鸡蛋的问题,是从无到有,从简单到复杂的过程。

无 -> 混沌之灵 -> 原始天尊 -> 构造函数 -> 普通对象 null -> Object.prototype -> Function -> Object user等 -> objTom

终于看完了,我也终于写完了,表述可还清楚?!看懂了?!看懂赶紧点个赞,累屎我了。

[转载]原文链接:https://segmentfault.com/a/1190000019478773

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67269.html

文章标题:一篇搞懂原型链 深入讲解 prototype __proto__

相关文章
深入分析JSON编码格式提交表单数据
以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始。而新出现的JSON格式提交表单数据方法,将表单里的...
2017-03-25
JavaScript中String.prototype用法实例
本文实例讲述了JavaScript中String.prototype用法。分享给大家供大家参考。具体如下: // 返回字符的长度,一个中文算2个 String.prototype.ChineseLength=functi...
2017-03-23
浅谈Javascript的静态属性和原型属性
文章给各位介绍Javascript的静态方法和原型方法一个例子,如果大家对于Javascript的静态方法和原型方法不了解可以和小编一起来看看。 一段代码,了解静态方法和实例方法: <script> /...
2017-03-23
javascript中的Function.prototye.bind
函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其实就是 Function.prototy...
2017-03-25
深入浅出分析javaScript中this用法
本文实例讲述了javaScript中this用法。分享给大家供大家参考。具体分析如下: 之前学javascript的时候总搞不清this,这个this不像java里的this那么好理解。我后来也是看了许多别人写的文章,才理解过来的。现在把别...
2017-03-23
Html5塑手机浏览器:腾讯X5谋生态链
最近,手机浏览器一系列大事件引人瞩目。 先是搜狐创始人、CEO张朝阳通过微博推荐手机QQ浏览器,而不是自家的搜狗手机浏览器,引起坊间热议。一个以X5为核心的生态圈正在悄然成型。 然后UC浏览器发出微博:“约吗?”,公开挑战其他手机浏览器。当...
2015-11-12
深入探寻seajs的模块化与加载方式
由于一直在使用,所以了解了下seajs的源代码。这里是我对下面几个问题的理解: 1、seajs的require(XXX)的方法是怎样实现模块加载的? 2、为什么需要预加载? 3、为什么需要构建工具? 4、构建前后的代码究竟有些什么区别,为什...
2017-03-22
深入理解JavaScript编程中的原型概念
JavaScript 的原型对象总是让人纠结。即使是经验丰富的JavaScript专家甚至其作者,经常对这一概念给出很有限的解释。我相信问题来自于我们对原型最早的认识。原型总是与new, constructor 以及令人困惑的prototy...
2017-03-25
js实现鼠标滑过文字链接色彩变化的效果
本文实例讲述了js实现鼠标滑过文字链接色彩变化效果的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1...
2017-03-23
javascript动态创建链接的方法
本文实例讲述了javascript动态创建链接的方法。分享给大家供大家参考。具体分析如下: 动态创建链接示例: <html xmlns="http://www.w3.org/1999/...
2017-03-23
回到顶部