JS里的对象和原型

本博客主要讲以下几部分

全局对象 window
全局函数
公用属性是什么
重要公式

全局对象window

ECMAScript 规定全局对象叫做 global,但是浏览器把 window 作为全局对象(浏览器先存在的)

window 就是一个哈希表,有很多属性。
window 的属性就是全局变量

这些全局变量分为两种:

  • 一种是 ECMAScript 规定的
global.parseInt
global.parseFloat
global.Number
global.String
global.Boolean
global.Object
  • 一种是浏览器自己加的属性(私有)
history  //浏览器历史,也叫BOM
window.alert  
window.prompt
window.comfirm
window.console.log
window.console.dir
window.document  //有规范,叫DOM(W3C规定)
window.document.createElement
window.document.getElementById

所有 API 都可以在 MDN 里找到详细的资料。

全局函数

  • Number

先看以下代码

var n = 1
var n1 = new Number(1) //创建一个 Number 对象

那么问题来了,
nn1 的区别是什么?
这时画一个内存图就清楚了

Number

这样可以看出,nn1 的区别是内存上是不一样的
那么Number(1)里写了什么呢?
valueOf,toString...这些都是Number()函数内置的操作符,也就是说,如果包装成对象的话,n1就有更多便捷的操作给你用,而n就只有数字1

  • 临时转换

这是为什么呢,因为JS发明时,JS之父的BOSS要求JS要长得像Java

所以就有了Number()函数,但是实际上Number()基本没用,大家都喜欢直接用var n = 1,但是n.toString因为不是对象,所以不能直接转换

这时,临时转换就出现了
临时转换就是在想要调用ntoString操作时,创建一个临时对象,用这个对象的toString()方法去操作n,临时转换后就会把那个临时对象抹杀
用内存图来理解是这样的:

临时转换

所以现在,就算我们只写var n = 1,之后也能使用复杂Number()的所有功能

但是要注意的是,n本身是没有toString()函数的,只是利用来临时变量的方法,请看下面这题

var n = 1
n.xxx = 2
那么,n.xxx的值是什么呢?
临时转换2

因为n只是将2存到临时变量的xxx里,所以n.xxx的值是undefined

  • String

var s = 'asdfg'
var s1 = new String(asdfg)

和之前理解Number()一样,s之所以可以直接Number(s),是因为浏览器创建了一个临时对象,然后's'调用了这个对象的'Number()'方法,使用完后这个临时对象就被抹杀了

这里要提一句的是,代码中的new如果不加,那就是用作转换用的。如果加了,就是生成对象。

  • Boolean

接下来看这一题

var f = false
var f1 = new Boolean(false)
if(f){console.log(1)}  //  打印1
if(f1){console.log(2)}  //  打印2

请问这题浏览器会打印出什么呢?

我们画个内存图

Boolean

因为f=false,所以1是不会打印出来的
因为f1实际上是一个对象,所以浏览器会打印出2

  • Object

var o1 = {}
var o2 = new Object()

其实o1o2的方式根本没区别,只是他们的值内存地址不一样而已
所以Object()基本没用

  • 小结

看到这里,我们可以知道四个全局函数的作用和相应内存的改变了
这些全局函数只是将值由基本类型变成了对象而已

公用属性(原型)

所有对象都有 toString 和 valueOf 属性,那么我们是否有必要给每个对象一个 toString 和 valueOf 呢?

JS 的做法是把 toString 和 valueOf 放在一个对象里(暂且叫做公用属性组成的对象)
然后让每一个对象的 __proto__ 存储这个公用属性组成的对象的地址

  • 这里可以看图来理解

原型解释图

在看这张图前,我们先考虑一下浏览器的垃圾回收机制,垃圾回收会回收没有被引用的对象。
这些全局对象如果不被引用的话,就会被浏览器回收掉,如何避免这些全局属性被回收掉呢?

浏览器在打开的时候,就会创建一个名为window的全局属性,这个全局属性包含了所有全局函数的地址值。
这些地址又引用了该函数特有的公共属性(对象),每个函数特有的公共属性(对象)又用_prote_来储存Object对象的地址

  • 举个例子

n.toString()

流程是这样的
1.浏览器先看n是不是对象,不是做临时转换。
2.是的话就先去看看n对应的函数公共类型里找有没有toString()这个操作符
3.如果没有,就进入_prote_对应的公共属性里找有没有toString()操作符
4.有的话,就调用这个toString()

这样的,形成的穿过多个节点的流程,就叫原型链

  • 内存图理解

var o1 = new Number(8)
var o2 = 8
o1 === o2 // false
o1.toString === o2.toString  //  true
因为他们调用的方法是一样的
内存图

他们的数据类型是不一样的,但是他们调用的共同属性的方法(对象)是一样的

重要公式

由此,我们可以得出一个公式,结合原型解释图理解

var 对象 = new 函数()
对象.__proto__ === 对象的构造函数.prototype

由这个公式,我们可以再推论

var number = new Number()
number.__proto__ = Number.prototype
Number.__proto__ = Function.prototype // 因为 Number 是 Function 的实例

var object = new Object()
object.__proto__ = Object.prototype
Object.__proto__ = Function.prototype // 因为 Object 是 Function 的实例

var function = new Function()
function.__proto__ = Function.prototype
Function.__proto__ == Function.prototye // 因为 Function 是 Function 的实例!
推论图

这个公式如果你能读懂的话,你也就懂JS里的对象到底是什么了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容