javascript有5种基础的内建对象(Fundamental Objects)ObjectFunctionErrorSymbolBoolean,而Object/Function尤为特殊,是定义其他内建对象或者普通对象和方法的基础。

详细的了解ObjectFunction对象有助于更好的理解javascript的一些工作原理。

和其他引用类型一样,Object/Function既是对象,有自己的方法和属性,也是函数,可以作为构造函数。
本文主要讨论以下几个问题:

  • Fucntion.prototype和普通对象的prototype有何区别?
  • Object.prototype.__proto__ = ?
  • Object.__proto__ = ?
  • ObjectFunction的原型对象有何特殊之处?

Function

Function的属性

在ES6标准中,Function 对象有两个属性:

  • length
    值为1,这个属性的特性为{ [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: true },即不可覆盖,不可被for...in遍历,但可以通过Object.defineProperty修改它的上面这些特性

  • prototype
    为原型对象,(见ES最新标准说明 Function.prototpye)它跟一般函数的prototype的区别在于

    • ❗️它不可写,不可配置,不可遍历。 即它永远指向固定的一个对象,且是其他所有函数的原型对象,所有函数本身的__proto__指向它。
    1. const o = {number: 20}
    2. Function.prototype = o // 依然是原来的值,未改变
    3. typeof Array.__proto__ // 'function' [=== Function.prototype]
    4. typeof Object.__proto__ // 'function' [=== Function.prototype]
    5. typeof Array.prototype.__proto__ // 'object' [=== Object.prototype]
    6. function F () {}
    7. F.__proto__ === Function.prototype // true
    8. F.prototype = o // prototype指向o
    • ❗️它是一个函数。 一般函数的prototype是一个带有constructor属性的普通对象,但Functionprototype是一个函数对象(built-in function object),js中唯一一个默认prototype为函数的对象
    1. typeof Function.prototype // 'function'
    2. function F () {}
    3. typeof F.prototype // ☘ 'object'
    4. typeof Object.prototype // 'object'

这是ES标准中规定的Function对象的两个属性,但其实在FireFox、Chrome在实现时,还有一个name属性,它的值就是'Function'。另外还有一个属性,就是__proto__

相比于ObjectFunction对象自带属性是比较少的

★ Function.prototype

在ES规范,有关Function.prototype部分 定义的Functionprototype的方法有

  1. Function.prototype.apply
  2. Function.prototype.bind
  3. Function.prototype.call
  4. Function.prototype.contructor
  5. Function.prototype.toString
  6. Function.prototype[@@hasInstance](V)

函数和对象都有__proto__属性,指向构造函数的prototype属性所指向的对象,即它的原型对象。

而函数的__proto__属性(❗️并非它的原型对象prototype上的__proto__属性)指向Function.prototype,所以Function.prototype上的属性和方法都会被函数对象(function object)所继承。

通过上面的介绍,相信能够明白以下这些有意思的等式为何成立

  1. Function.__proto__ === Function.prototype // true ❗️
  2. Object.__proto__ === Function.prototype // true
  3. Object.prototype.__proto__ === null // true
  4. Function.prototype.__proto__ === Object.prototype // true
  5. Object.prototype === Object.__proto__ // false

同时,因为函数对象本身有prototype属性,是Object的实例,所以也继承了Object.prototype的属性

Object

★ Object函数对象的属性

Object作为函数,与普通函数一样,有lengthprototype__proto__name属性,除此之外,还有很多没有被继承的私有方法

  1. // 方法
  2. Object.assign()
  3. Object.create()
  4. Object.defineProperties()
  5. Object.defineProperty()
  6. Object.entries()
  7. Object.freeze()
  8. Object.getOwnPropertyDescriptor()
  9. Object.getOwnPropertyDescriptors()
  10. Object.getOwnPropertyNames()
  11. Object.getOwnPropertySymbols()
  12. Object.getPrototypeOf()
  13. Object.is()
  14. Object.isExtensible()
  15. Object.isFrozen()
  16. Object.isSealed()
  17. Object.keys()
  18. Object.preventExtensions()
  19. Object.seal
  20. Object.setPrototypeOf()
  21. Object.values()

Object函数对象的方法不是这里的重点,就不再展开。

★ Object.prototype

Function.prototype和其他引用类型(Array.prototypeString.prototype)一样是不可写不可配置不可for...in遍历的,但依然可以被扩展,即可以往Object.prototype新增属性和方法

  1. Object.isExtensible(Object.prototype) // true
  • ❗️Object.prototype的一个重要特性是,它是所有对象原型链的终点,因为Object.prototype.__proto__的值为null,即
  1. Object.prototype.__proto__ === null

一个对象的实例,沿着它的原型链,通过__proto__一层层往上找某一个属性,如果在Object.prototype上没找到,那就会返回undefined,所以,原型链不会无限的找下去。

  1. function F () {}
  2. F.prototype.age = 20
  3. let f = new F()
  4. f.__proto__ === F.prototype // true
  5. f.__proto__.__proto__ === Object.prototype //true
  6. f.__proto__.proto__.__proto__ === null // true
  7. /**
  8. * 查找过程
  9. * f.color -> 没找到,继续
  10. * f.__proto__.color(F.prototype) -> 没找到,继续
  11. * f.__proto__.__proto__.color(F.prototype.__proto__,Object.prototype) 没找到,返回undefined
  12. * 如果继续 f.__proto__.__proto__.__proto__ (Object.prototype.__proto__) === null 结果跟上面一样
  13. */
  14. console.log(f.color) // undefined

Object.prototype上的属性和方法,会被js中的所有方法和对象所继承,ES规范中的属性

  1. Object.prototype.constructor
  2. Object.prototype.hasOwnProperty()
  3. Object.prototype.isPrototypeOf()
  4. Object.prototype.propertyIsEnumerable()
  5. Object.prototype.toLocaleString()
  6. Object.prototype.toString()
  7. Object.prototype.valueOf()
  8. Object.prototype.__proto__

下图是FunctionObjectFunction.prototypeObject.prototye相互之间关系图


Object、Function的关系

ObjectFunction之间最让人琢磨不透的,就是他们的关系

  1. Object instanceof Object // true
  2. Object instanceof Function // true
  3. Function instanceof Function // true
  4. Function instanceof Object // true
  5. const o = {}
  6. o instanceof Object //true
  7. o instanceof Function // false
  8. function F () {}
  9. F instanceof Object //true
  10. F instanceof Function //true

未完待续 ~~~

Function和Object 应该知道的的更多相关文章

  1. 那些必须要知道的Javascript

    原文:那些必须要知道的Javascript JavaScript是前端必备,而这其中的精髓也太多太多,最近在温习的时候发现有些东西比较容易忽略,这里记录一下,一方面是希望自己在平时应用的时候能够得心应 ...

  2. 每一个JavaScript开发者都应该知道的10道面试题

    JavaScript十分特别.而且差点儿在每一个大型应用中起着至关关键的数据.那么,究竟是什么使JavaScript显得与众不同,意义非凡? 这里有一些问题将帮助你了解其真正的奥妙所在:   1.你能 ...

  3. 关于C#你应该知道的2000件事

    原文 关于C#你应该知道的2000件事 下面列出了迄今为止你应该了解的关于C#博客的2000件事的所有帖子. 帖子总数= 1,219 大会 #11 -检查IL使用程序Ildasm.exe d #179 ...

  4. 关于WPF你应该知道的2000件事

    原文 关于WPF你应该知道的2000件事 以下列出了迄今为止为WPF博客所知的2,000件事所创建的所有帖子. 帖子总数= 1,201 动画 #7 - 基于属性的动画 #686 - 使用动画制作图像脉 ...

  5. Python小白需要知道的 20 个骚操作!

    Python小白需要知道的 20 个骚操作! Python 是一个解释型语言,可读性与易用性让它越来越热门.正如 Python 之禅中所述: 优美胜于丑陋,明了胜于晦涩. 在你的日常编码中,以下技巧可 ...

  6. 每个JavaScript开发人员应该知道的33个概念

    每个JavaScript开发人员应该知道的33个概念 介绍 创建此存储库的目的是帮助开发人员在JavaScript中掌握他们的概念.这不是一项要求,而是未来研究的指南.它基于Stephen Curti ...

  7. 你应该知道的RPC原理

    你应该知道的RPC原理 在学校期间大家都写过不少程序,比如写个hello world服务类,然后本地调用下,如下所示.这些程序的特点是服务消费方和服务提供方是本地调用关系. 而一旦踏入公司尤其是大型互 ...

  8. 百度知道的php爬虫

    原文地址:百度知道的php爬虫作者:好宏杰软件 <?php class spider  {    private $content ;    private $contentlen ;    p ...

  9. 嵌入式程序员应知道的0x10个基本问题

     来源:网络 嵌入式程序员应知道的0x10个基本问题 1 . 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题)#define SECONDS_PER_YEAR (60 ...

随机推荐

  1. 【原创】大叔经验分享(64)cloudera manager agent启动组件进程过程

    概述 The Agent is started by init.d at start-up. It, in turn, contacts the Cloudera Manager Server and ...

  2. Arduino Nano与SIM800C 通信

    首先感谢 原文作者:https://blog.csdn.net/weixin_44481398/article/details/86596933#commentBox 找了好久没有找到,使用他的代码一 ...

  3. js下载blob的形式

    前端构建blob的方式就是通过服务器返回的文件来创建blob,需要知道文件在服务器的具体路径,用bob创建object url对象,添加到a标签上,然后触发,blob有两个问题,1.对浏览器有兼容性限 ...

  4. upload上传 和 download下载

    文件上传:   <div class="upload-form"> <input id="fileUpload" type="fil ...

  5. 微信小程序中button去除默认的边框

    button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; p ...

  6. mysql8安装

    1.先卸载当前系统中已安装的mariadb rpm -qa | grep mariadb rpm -e --nodeps 文件名 2.安装mysql依赖包 yum install gcc gcc-c+ ...

  7. 2.LVS的三种工作模式_NAT模式

    1.LVS的三种工作模式 1)VS/NAT模式(Network address translation) 2)VS/TUN模式(tunneling) 3)DR模式(Direct routing) 1. ...

  8. 数据结构---->数组

    1.什么是数组? 数组是一种线性的数据结构.它同一组连续的内存空间,来存储一组具有相同类型的数据. 简单说明几点: (1).线性表:就是数据排成像一条线一样的结构.每个线性表的数据最多只有前和后两个方 ...

  9. Jmeter (四) 关联

    关联: 实例:关联登录请求的 session,方便下次自动登录( 自我理解) 关联用户session 关联 例如 京东秒杀 1000个用户 同时秒杀 怎么模拟??  使用关联啊! 一.正则表达式提取器 ...

  10. BZOJ1821 部落划分[最小生成树]

    方法一:套路性的,二分距离,然后把距离点对距离小于答案的边都联通起来,然后看集合数量超过k说明答案小,增大,否则减小. 方法二:贪心,类kruskal.n个点,k个连通块,则需要有效连接(同一个块内的 ...