美文网首页
javascript原型链

javascript原型链

作者: ysdyyy | 来源:发表于2019-08-26 17:06 被阅读0次

虽然JavaScript中一切皆对象,但为了理解原型链系统,我们需要将JavaScript的对象分为对象和函数两大类。在此基础上,JavaScript原型链遵循以下通用规则
1:对象有proto属性,函数有prototype属性
2:对象由函数生成
3:生成对象时,对象的proto属性指向函数的prototype属性

一:一般情况
创建空对象,实际上我们是用Object函数来生成对象的

var o = {}
undefined
o.__proto__ == Object.prototype
true

也可以显式的使用object函数来创建对象

var o2 = Object()
undefined
o.__proto__ === Object.prototype
true

使用函数来创建自定义的对象

function myObj(){}
undefined
var o3 = new myObj()
undefined
o3.__proto__ === myObj.prototype
true

二:函数对象
函数对象都是由Function函数生成的

function fn(){}
undefined
fn.__proto__ === Function.prototype
true

Function函数本身作为对象时,生成它的函数是他自身

Function.__proto__ === Function.prototype
true

Object函数也是一个函数对象

Object.__proto__ ===Function.prototype
true

三:prototype是谁
现在我们知道,对象的proto属性是从生成它的函数的prototype那里得来的,那么,prototype又是谁?

一般函数默认的prototype是系统自动生成的一个对象


image.png
fn.prototype.constructor === fn
true
fn.prototype.__proto__ === Object.prototype
true

一般函数默认的prototype是一个类型为“object”的对象。它有两个属性,其中constructor属性指向这个函数自身,proto属性指向object.prototype,这说明一般函数的prototype属性是由object函数生成的

四:特殊情况
object函数和Function函数是特殊的


image.png
Object.prototype.constructor === Object
true
Object.prototype.__proto__
null

1:object.prototype多了一堆方法
2:object.prototype.proto为null:
typeof object.prototype === 'object',说明它是一个object对象,如果它由object函数生成,按照通用规则,就该是object.prototype.proto === object.prototype,这样object.prototype.proto属性指向了它自身,这样以proto属性构成的原型链就再也没有终点了,所以为了让原型链有终点,规定object.prototype.proto === null

Function函数

typeof Function.prototype
"function"
Function.prototype
ƒ () { [native code] }
Function.prototype.__proto__ === Object.prototype
true

1:Function函数的prototype类型为function
2:按照通用规则,一个Function类型的对象,应该是由Function函数生成,那么Function.prototype.proto === Function.prototype,和object函数同样的问题出现了:循环引用,所以JavaScript规定Function.prototype.proto === Object.prototype,这样既不会出现循环引用,又让proto构成的原型链指向了唯一的终点:
Object.prototype.proto === null

image

参考链接:
https://www.jianshu.com/p/686b61c4a43d

相关文章

  • 【javascript】继承

    javascript只支持实现继承,而且继承主要是依靠原型链来实现的。 原型链 javascript将原型链作为实...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • javaScript原型链

    javaScript原型链概念JavaScript之继承(原型链)数据结构var Person = functio...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • javascript碎片知识001

    javascript中的对象(原型,原型链) 什么是原型? 原型是JavaScript中的继承的基础,JavaSc...

  • 面试题 Javascript

    介绍JavaScript的基本数据类型。 说说写JavaScript的基本规范? JavaScript原型,原型链...

  • JavaScript 基础知识点

    介绍JavaScript的基本数据类型。 说说写JavaScript的基本规范? JavaScript原型,原型链...

  • 原型和原型链篇

    原型和原型链 1.理解原型设计模式以及JavaScript中的原型规则 原型设计模式JavaScript是一种基于...

  • 原型链 完整版(JavaScript)

    原型链 完整版(JavaScript)

网友评论

      本文标题:javascript原型链

      本文链接:https://www.haomeiwen.com/subject/faocjctx.html