Function和Object 应该知道的
javascript有5种基础的内建对象(Fundamental Objects),Object
、Function
、Error
、Symbol
、Boolean
,而Object
/Function
尤为特殊,是定义其他内建对象或者普通对象和方法的基础。
详细的了解Object
和Function
对象有助于更好的理解javascript的一些工作原理。
和其他引用类型一样,Object
/Function
既是对象,有自己的方法和属性,也是函数,可以作为构造函数。
本文主要讨论以下几个问题:
Fucntion.prototype
和普通对象的prototype
有何区别?Object.prototype.__proto__
= ?Object.__proto__
= ?Object
、Function
的原型对象有何特殊之处?
Function
Function的属性
在ES6标准中,Function 对象有两个属性:
length
值为1,这个属性的特性为{ [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: true }
,即不可覆盖,不可被for...in
遍历,但可以通过Object.defineProperty
修改它的上面这些特性prototype
为原型对象,(见ES最新标准说明 Function.prototpye)它跟一般函数的prototype
的区别在于- ❗️它不可写,不可配置,不可遍历。 即它永远指向固定的一个对象,且是其他所有函数的原型对象,所有函数本身的
__proto__
指向它。
const o = {number: 20}
Function.prototype = o // 依然是原来的值,未改变 typeof Array.__proto__ // 'function' [=== Function.prototype]
typeof Object.__proto__ // 'function' [=== Function.prototype] typeof Array.prototype.__proto__ // 'object' [=== Object.prototype] function F () {}
F.__proto__ === Function.prototype // true F.prototype = o // prototype指向o
- ❗️它是一个函数。 一般函数的
prototype
是一个带有constructor
属性的普通对象,但Function
的prototype
是一个函数对象(built-in function object
),是js
中唯一一个默认prototype
为函数的对象
typeof Function.prototype // 'function' function F () {}
typeof F.prototype // ☘ 'object'
typeof Object.prototype // 'object'
- ❗️它不可写,不可配置,不可遍历。 即它永远指向固定的一个对象,且是其他所有函数的原型对象,所有函数本身的
这是ES标准中规定的Function
对象的两个属性,但其实在FireFox、Chrome在实现时,还有一个name
属性,它的值就是'Function'
。另外还有一个属性,就是__proto__
相比于Object
,Function
对象自带属性是比较少的
★ Function.prototype
在ES规范,有关Function.prototype部分 定义的Function
的prototype
的方法有
Function.prototype.apply
Function.prototype.bind
Function.prototype.call
Function.prototype.contructor
Function.prototype.toString
Function.prototype[@@hasInstance](V)
函数和对象都有__proto__
属性,指向构造函数的prototype
属性所指向的对象,即它的原型对象。
而函数的__proto__
属性(❗️并非它的原型对象prototype
上的__proto__
属性)指向Function.prototype
,所以Function.prototype
上的属性和方法都会被函数对象(function object)所继承。
通过上面的介绍,相信能够明白以下这些有意思的等式为何成立
Function.__proto__ === Function.prototype // true ❗️
Object.__proto__ === Function.prototype // true
Object.prototype.__proto__ === null // true
Function.prototype.__proto__ === Object.prototype // true
Object.prototype === Object.__proto__ // false
同时,因为函数对象本身有prototype
属性,是Object
的实例,所以也继承了Object.prototype
的属性。
Object
★ Object函数对象的属性
Object
作为函数,与普通函数一样,有length
、prototype
、__proto__
、name
属性,除此之外,还有很多没有被继承的私有方法
// 方法
Object.assign()
Object.create()
Object.defineProperties()
Object.defineProperty()
Object.entries()
Object.freeze()
Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptors()
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.getPrototypeOf()
Object.is()
Object.isExtensible()
Object.isFrozen()
Object.isSealed()
Object.keys()
Object.preventExtensions()
Object.seal
Object.setPrototypeOf()
Object.values()
Object
函数对象的方法不是这里的重点,就不再展开。
★ Object.prototype
与Function.prototype
和其他引用类型(Array.prototype
、String.prototype
)一样是不可写、不可配置、不可for...in遍历的,但依然可以被扩展,即可以往Object.prototype
新增属性和方法
Object.isExtensible(Object.prototype) // true
- ❗️
Object.prototype
的一个重要特性是,它是所有对象原型链的终点,因为Object.prototype.__proto__
的值为null
,即
Object.prototype.__proto__ === null
一个对象的实例,沿着它的原型链,通过__proto__
一层层往上找某一个属性,如果在Object.prototype
上没找到,那就会返回undefined
,所以,原型链不会无限的找下去。
function F () {}
F.prototype.age = 20
let f = new F()
f.__proto__ === F.prototype // true
f.__proto__.__proto__ === Object.prototype //true
f.__proto__.proto__.__proto__ === null // true
/**
* 查找过程
* f.color -> 没找到,继续
* f.__proto__.color(F.prototype) -> 没找到,继续
* f.__proto__.__proto__.color(F.prototype.__proto__,Object.prototype) 没找到,返回undefined
* 如果继续 f.__proto__.__proto__.__proto__ (Object.prototype.__proto__) === null 结果跟上面一样
*/
console.log(f.color) // undefined
Object.prototype
上的属性和方法,会被js中的所有方法和对象所继承,ES规范中的属性
Object.prototype.constructor
Object.prototype.hasOwnProperty()
Object.prototype.isPrototypeOf()
Object.prototype.propertyIsEnumerable()
Object.prototype.toLocaleString()
Object.prototype.toString()
Object.prototype.valueOf()
Object.prototype.__proto__
下图是Function
、Object
与Function.prototype
、Object.prototye
相互之间关系图
Object、Function的关系
Object
和Function
之间最让人琢磨不透的,就是他们的关系
Object instanceof Object // true
Object instanceof Function // true
Function instanceof Function // true
Function instanceof Object // true
const o = {}
o instanceof Object //true
o instanceof Function // false
function F () {}
F instanceof Object //true
F instanceof Function //true
未完待续 ~~~
Function和Object 应该知道的的更多相关文章
- 那些必须要知道的Javascript
原文:那些必须要知道的Javascript JavaScript是前端必备,而这其中的精髓也太多太多,最近在温习的时候发现有些东西比较容易忽略,这里记录一下,一方面是希望自己在平时应用的时候能够得心应 ...
- 每一个JavaScript开发者都应该知道的10道面试题
JavaScript十分特别.而且差点儿在每一个大型应用中起着至关关键的数据.那么,究竟是什么使JavaScript显得与众不同,意义非凡? 这里有一些问题将帮助你了解其真正的奥妙所在: 1.你能 ...
- 关于C#你应该知道的2000件事
原文 关于C#你应该知道的2000件事 下面列出了迄今为止你应该了解的关于C#博客的2000件事的所有帖子. 帖子总数= 1,219 大会 #11 -检查IL使用程序Ildasm.exe d #179 ...
- 关于WPF你应该知道的2000件事
原文 关于WPF你应该知道的2000件事 以下列出了迄今为止为WPF博客所知的2,000件事所创建的所有帖子. 帖子总数= 1,201 动画 #7 - 基于属性的动画 #686 - 使用动画制作图像脉 ...
- Python小白需要知道的 20 个骚操作!
Python小白需要知道的 20 个骚操作! Python 是一个解释型语言,可读性与易用性让它越来越热门.正如 Python 之禅中所述: 优美胜于丑陋,明了胜于晦涩. 在你的日常编码中,以下技巧可 ...
- 每个JavaScript开发人员应该知道的33个概念
每个JavaScript开发人员应该知道的33个概念 介绍 创建此存储库的目的是帮助开发人员在JavaScript中掌握他们的概念.这不是一项要求,而是未来研究的指南.它基于Stephen Curti ...
- 你应该知道的RPC原理
你应该知道的RPC原理 在学校期间大家都写过不少程序,比如写个hello world服务类,然后本地调用下,如下所示.这些程序的特点是服务消费方和服务提供方是本地调用关系. 而一旦踏入公司尤其是大型互 ...
- 百度知道的php爬虫
原文地址:百度知道的php爬虫作者:好宏杰软件 <?php class spider { private $content ; private $contentlen ; p ...
- 嵌入式程序员应知道的0x10个基本问题
来源:网络 嵌入式程序员应知道的0x10个基本问题 1 . 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题)#define SECONDS_PER_YEAR (60 ...
随机推荐
- C#中操作单个cookie和cookie字典
单个cookie和cookie字典在浏览器中的存储格式如下:可以看到,单个cookie是以单一键值对的方式存储的,而cookie字典的值包含多个键值对,这些键值对之间以&符号拼接.cookie ...
- 原生JS-实现轮播图
用原生JS实现一个轮播图(效果) HTML <div id="outer"> <ul id="imgList"> <!-- 图片列 ...
- 4 java 笔记
1 javadoc工具默认只处理以public,protected修饰的类,接口,方法,成员变量,构造器和内部类之前的文档注释 2 文档注释以斜线后紧跟两个星号开始/**,以星号后紧跟一个斜线结束*/ ...
- Capture 设置pin name 不可见
在器件库文件页面空白处双击,自动弹出OPTIONS对话框,再设计PIN NAME 可见属性为FLASE. 双击管脚.不管用,改不了.
- Networker软件安装
- Django学习系列20:改进功能测试
隐示等待和显示等待 我们看看在功能测试中function_tests.py中的 time.sleep inputbox.send_keys(Keys.ENTER) time.sleep(1) self ...
- dockerfile 与 docker-compose的区别
https://blog.csdn.net/londa/article/details/91815208 先简单理解 docker 的使用过程,它分为镜像构建与容器启动. 镜像构建:即创建一个镜像,它 ...
- 虚拟dom比对原理
dom对比步骤 1.用js对象来表达dom结构 tagName 标签名props 元素属性key 唯一标识children 子元素,格式和父元素一样count 有几个子元素,用于计算当前元素的索引,处 ...
- vue-cli中模拟数据的两种方法
我所使用的是新版vue-cli 首先进行所需插件的安装,vue-resource,json-server,proxyTable. 目录结构如图 在main.js中引入vue-resource模块,Vu ...
- Typescript玩转设计模式 之 创建型模式
作者简介 joey 蚂蚁金服·数据体验技术团队 前言 我们团队的工作是用单页面应用的方式实现web工具.涉及到数万到十数万行的前端代码的管理,而且项目周期长达数年. 怎么样很好地管理好这种量级的前端代 ...