最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • JS三座大山之 原型的简洁思路

    正文概述 掘金(ioudan_立)   2020-12-11   163

    JS世界

    1.创造一个“对象的原型”

    • 也叫做“根”
    • 包含所有普对象的共有属性
    • “根”对象没有构造者,所以它没有原型

    Object.prototype.__proto__ === null

    2.创造一个“函数的原型”

    • 包含所有函数的共有属性
    • “函数的原型”对象是是由“根”对象创造的,所以:

    Function.prototype.__proto__ === Object.prototype

    3.创造一个“数组的原型”

    • 包含数组的共有属性
    • “数组的原型”对象是由“根”对象创造的,所以:

    Array.prototype.__proto__ === Object.prototype

    4.创造一个“函数的构造函数”Function

    Function的自身情况

    • 因为Function是一个构造函数,也就是说它是函数类型,
    • 函数都是由'Function'构造的,所以它具有所有函数的共有属性,即:

    Function.__proto__ === Function.prototype

    • Function.prototype 指向地址 #202,也就是“函数的原型”
    • 所以Function.proto 也指向地址 #202,“函数的原型”
    • 也就是说FunctionFunction自己构造的?
    • 具体不深入了

    所有的新函数都由Function构造的

    • “函数的构造函数”Function,具有prototype属性
    • Function.prototype指向“函数的原型” 地址 #202
    • 并且,Function是“函数的构造函数”,所以,由它新构造的函数,都具有函数的共有属性
    var fn =()=>{}
    fn.__proto__ === Function.prototype
    true
    

    5.创造一个“对象的构造函数”Object

    Object的自身情况

    • 因为Object是一个构造函数,也就是说它是个函数类型;
    • 函数都是由Function构造的,所以它具有所有函数的共有属性:

    Object.__proto__ === Function.prototype

    • Function.prototype 指向地址 #202,也就是“函数的原型”
    • 所以Object.__proto__ 也指向地址 #202,“函数的原型”

    所有的新对象都是由“Object”构造的(从阶段5以后)

    • “对象的构造函数”Object,具有prototype属性,
    • Object.prototype指向“对象的原型” 地址#101
    • 并且,Object是对象的构造函数,所以,由它新构造的对象都具有对象的共有属性:

    ({}).__proto__ === Object.prototype

    6.创造一个“数组的构造函数”Array

    Array的自身情况

    • 因为Array是一个构造函数,也就是说它是个函数类型;
    • 函数都是由Function构造的,所以Array具有所有函数的共有属性:

    Array.__proto__ === Function.prototype

    • Function.prototype 指向地址 #202,也就是“函数的原型”
    • 所以Array.__proto__ 也指向地址 #202,“函数的原型”

    所有的新数组[]都是由Array构造的

    • 数组的构造函数Array,具有prototype属性,Array.prototype指向“数组的原型” 地址 #303
    • 并且,Array是数组的构造函数,所以,由它新构造的数组都具有数组的共有属性:

    [].__proto__ === Array.prototype

    7,创建window对象(由浏览器提供,不属于JS)

    • window.Object属性,正式命名“对象的构造函数”为Object,之前的步骤中,Object名称只是为了方便说明
    • window.Array属性,正式命名“数组的构造函数”为Array,之前的步骤中,Array名称只是为了方便说明
    • 因为,JS创建一个对象时,是没有具体名称的,只有用一个具体的变量名称去引用时,它才有名称!

    思路很简陋,未必全都正确;后续会继续完善,有异议可以提出,一定改正!

    三个总结

    1.JS公式

    对象.proto === 其构造函数的.prototype

    2.根公理

    所有的对象都是由Object构造的,即Object.prototype是所有对象的(直接或间接的)原型

    3.函数公理

    一切函数都是Function构造的 函数.proto === Function.prototype 函数有Array、Object、Function

    举例

    乱一

    {name:'frank'}的原型是什么?
    ({name:'frank'}).__proto__ === Object.prototype
    true
    
    • {name:'frank'}是个对象,由Object new来的,所以它的原型是对象的原型
    [1,2,3]的原型是什么?
    [1,2,3].__proto__ === Array.prototype
    true
    
    • [1,2,3]是个数组,由Array new来的,所以它的原型是数组的原型
    Object的原型是什么?
    Object.__proto__ === Function.prototype
    
    
    • Object是一个构造对象的构造函数,也就是函数,是由函数Function new来的,所以它的原型是函数的原型

    乱二

    [1,2,3]的原型疑惑

    • [1,2,3]的原型是Array.prototype
    • Object.prototype是所有对象的原型
    • Object.prototype为什么不是[1,2,3]的原型

    解释

    • 原型分两种:直接原型和间接原型
    • 对于普通对象来说,Object.prototype是直接原型
    • 对于数组、函数这两个特殊类型的对象来说,Object.prototype是间接原型
    //直接原型
    [1,2,3].__proto__ === Array.prototype
    true
    //间接原型
    Array.prototype.__proto__ === Object.prototype
    true
    

    乱三

    1.Object.prototype的原型是什么?

    Object.prototype.__proto__ === null
    true
    
    • 对象的原型是“根”,所有没有构造者

    2.Function.prototype的原型是?

    Function.prototype.__proto__ === Object.prototype
    true
    
    • 函数的原型是由“根”对象创造的,

    3.函数f的原型是?

    var f =()=>{}
    undefined
    f.__proto__ === Function.prototype
    true
    
    
    • 所有的函数都是由Function创造的

    4.函数toString的原型是什么?

    Array.prototype.toString.__proto__ === Function.prototype
    true
    
    • 所有的函数都是由Function创造的

    起源地 » JS三座大山之 原型的简洁思路

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元