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
复制代码
未完待续 ~~~
原文发布时间为:2018年06月30日
作者:伟林
本文来源:掘金 如需转载请联系原作者
关注公众号
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
-
上一篇
如何将 emoji 当成单色 icon 使用
腾讯云开发实验室,免费云资源+互动式教学体验+真实的实验环境。cloud.tencent.com 原文: How to Use Emojis as Icons 作者: Preethi Sam 使用单色 emoji 在 web 设计中 icon 变得越来越重要,在网上有很多关于 icon 的资源,免费的付费的都有。在这里,介绍如何运用一种已经我们非常熟悉的方式 -- emoji ,来当成 icon 使用。 emoji 的一个好处是已经在系统中内置,而 icon 资源还需要从站点服务器获取。emoji 只是一些跟普通文本类似的简单字符,所以这会是传统 icon 图片的一种很好的替代方式。 使用 emoji 很简单,只需要通过键盘将其作为文本添加到 HTML 中,或者是直接使用它们的 Unicode 字符码点。但要把它们当成 icon 使用,还有一点问题。 通常,icon 是单色组成的形状,但 emoji 并不是。 可以使用text-shadow来实现将其变成单色。 <ul> <li><span class=icon></span> Bicyc...
-
下一篇
一个浏览器插件,测试xpath的工具
相信大家有一个感觉,就是每当写爬虫时,需要写xpath来找到我们要的数据,调试xpath会浪费很多时间,一次又一次的requests请求,每每看到取到的元素与自己心中想要的元素不符时.......... 今天为大家介绍一款谷歌浏览器插件,能帮大家在待抓取页面直接写xpath并且可以看到取到的元素,话不多说 上图: 打开Chrome商店,搜索 xpath-helper 会出现如图中的搜索结果,点击添加至CHROME按钮,根据提示完成添加即可。(如果chrome商店连不上,请大家自行百度解决方案) 安装完毕后 可以看到我们的浏览器右上方多了一个图标: 这个就是xpath helper的图标。 点击图标,会出现一个黑色背景的输入框,如下图: image.png 在QUERY的下方输入xpath表达式 可在 RESULTS下方显示取到的结果: image.png 这个xpath是获取简书下文章列表的每一个id 可以看到结果取到了 20个。 针对于复杂的xpath需要,有了这个工具再就也不用一次一次的发requests测试xpath了,节省了很多时间。 请大家参考。 我的个人公众号,希望大家支持...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS关闭SELinux安全模块
- Dcoker安装(在线仓库),最新的服务器搭配容器使用
- CentOS8编译安装MySQL8.0.19
- Windows10,CentOS7,CentOS8安装Nodejs环境
- SpringBoot2全家桶,快速入门学习开发网站教程
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS7,8上快速安装Gitea,搭建Git服务器

微信收款码
支付宝收款码