22-进阶 JS里的对象

  • 全局对象window

全局对象---标准叫法 glabol,在浏览器里面也叫 window,也是一个 hash;
每一次浏览器生成时,首先就会生成一个全局对象 (global),这个对象就是window,


image.png

window 的属性分为两种,一种是ECMAscipt规定的;一种是浏览器自己开发实现的,不一定遵从相同的规范。


image.png

接下来主要介绍ECMAscipt规定的属性中的几个很常用的。

  1. Number()
    Number()有两种用法:
var n1 = Number('1')
1
-------------
var n2 =  new Number(1)

console.log(n2)
Number {1}
__proto__: Number
[[PrimitiveValue]]: 1


n2.valueOf()
1
n2.toString()
"1"
(18).toString(16)      //转为16进制后再转换成字符串
"12"

n2与n1的区别在于:内存中存放方式不同。

image.png

然而作为简单类型的 n1,也可以:n1.toString(),为什么作为非 对象 类型的n1 可以使用对象的属性用法???
实际上,作为简单类型的n1 在执行 对象的属性 用法时,JS临时创建了一个 new Number(1),然后这个临时的 对象 执行了属性用法后将结果传递过来了,之后n1.toString()执行结束,临时对象也被销毁。
测试:

var n = 1
n.xxx = 2 //能否执行成功??
2  //执行成功
n.xxx ==??
n.xxx  == undefined  ??

内存图如下:

image.png

temp 做为临时对象,在 n.xxx = 2执行完后销毁,因此后面的n.xxx == undefined

  1. String()
    同上,作为简单类型的 String 也可以使用 object.key 格式的用法;
var s1 = "safefwfwefwef"     //简单类型的声明方式

var s2 = new String(s1)    //作为复杂类型的声明方式
----------------------------------------------------------------------------
typeof s1
"string"
typeof s2
"object"
console.log(s2)

String {"safefwfwefwef"}
0: "s"1: "a"2: "f"3: "e"4: "f"5: "w"6: "f"7: "w"8: "e"9: "f"10: "w"11: "e"12: "f"
length: 13            //作为复杂类型的Number并没有length
__proto__: String
[[PrimitiveValue]]: "safefwfwefwef"

s1[0]
"s"
s2[0]
"s"

String几个方法示例(键值对):

s2.charAt(0) //类似s1[0],获取某个索引对应的字符
"s"
s2.charAt(1)
"a"
s2.charCodeAt(6)     //获取对应索引的Unicode 码,10进制
102
s2.charCodeAt(6).toString(16)   //获取对应索引的Unicode 码,16进制
"66"
"  user name  ".trim()    //去除左右两边的空格
"user name"
s1
"safefwfwefwef"
s1.slice(0,2)
"sa"
s1.slice(0,3)
"saf"
var s3 = "hello"
undefined
s3.replace('e','o')  //生成一个新的,而不是改变原有的
"hollo"
s3
"hello"
  1. boolean
    同上:
var b1 = true
undefined
var b2 = new Boolean(true)

-------------------
console.log(b2)
Boolean {true}
    __proto__: Boolean
      constructor: ƒ Boolean()
      toString: ƒ toString()
      valueOf: ƒ valueOf()
      __proto__: Object
        [[PrimitiveValue]]: false
      [[PrimitiveValue]]: true

注意:

var b3 = false
var b4 = new Boolean(false)

!!b3
false
!!b4
true

4 Object
不同上:两种声明方式效果相同

var o1 = {}

var o2 = new Object()

o1
{}
o2
{}
o1 == o2
false
  • 公用属性(原型)

  1. new Number() 的公用属性(原型):
var n = new Number(22)
console.log(n)
-----------------------------
Number {22}
    __proto__:Number   // new Number() 的公用属性(原型)
        constructor:ƒ Number()
        toExponential:ƒ toExponential()
        toFixed:ƒ toFixed()
        toLocaleString:ƒ toLocaleString()
        toPrecision:ƒ toPrecision()
        toString:ƒ toString()
        valueOf:ƒ valueOf()
        __proto__:Object   // new Object() 的公用属性(原型)
        [[PrimitiveValue]]:0
    [[PrimitiveValue]]:22
image.png
  1. new String() 的公用属性(原型):
var s = new String('hello')
undefined
console.log(s)

String {"hello"}
    0:"h"
    1:"e"
    2:"l"
    3:"l"
    4:"o"
    length:5
    __proto__:String    // new String() 的公用属性(原型)
        anchor:ƒ anchor()
        big:ƒ big()
        blink:ƒ blink()
        bold:
        ƒ bold()
        charAt:ƒ charAt()
        ......
        .....
        ......
        valueOf:ƒ valueOf()
        Symbol(Symbol.iterator):ƒ [Symbol.iterator]()
        __proto__:Object         // new Object() 的公用属性(原型)
        [[PrimitiveValue]]:""
    [[PrimitiveValue]]:"hello"
  1. new Object() 的公用属性(原型):
var o = {}

console.log(o)
 
{}
    __proto__:           // new Object() 的公用属性(原型)
        constructor:ƒ Object()
        hasOwnProperty:ƒ hasOwnProperty()
        isPrototypeOf:ƒ isPrototypeOf()
        propertyIsEnumerable:ƒ propertyIsEnumerable()
        toLocaleString:ƒ toLocaleString()
        toString:ƒ toString()
        valueOf:ƒ valueOf()
        __defineGetter__:ƒ __defineGetter__()
        __defineSetter__:ƒ __defineSetter__()
        __lookupGetter__:ƒ __lookupGetter__()
        __lookupSetter__:ƒ __lookupSetter__()
        get __proto__:ƒ __proto__()
        set __proto__:ƒ __proto__()

n.__proto__.__proto__s.__proto__.__proto__o.__proto__所指向的是 heap 中的同一地址空间。
n.__proto__里有toString,o.__proto__里也有toString,这两个是同一个么???

image.png

那么,所有这些公用属性(原型)在哪???
所有这些公用属性(原型)都是 hash ,那么如果这些 hash 没有被引用的话,就会被垃圾回收掉,那么,是谁在引用 它??
Object.prototype 就是 Object的公用属性(原型)。即Object在引用Object的公用属性(原型);

Object.prototype
---------------------
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
    constructor:ƒ Object()
    hasOwnProperty:ƒ hasOwnProperty()
    isPrototypeOf:ƒ isPrototypeOf()
    propertyIsEnumerable:ƒ propertyIsEnumerable()
    toLocaleString:ƒ toLocaleString()
    toString:ƒ toString()
    valueOf:ƒ valueOf()
    __defineGetter__:ƒ __defineGetter__()
    __defineSetter__:ƒ __defineSetter__()
    __lookupGetter__:ƒ __lookupGetter__()
    __lookupSetter__:ƒ __lookupSetter__()
    get __proto__:ƒ __proto__()
    set __proto__:ƒ __proto__()
------------------------
var o1 = {}
undefined
o1.__proto__ === Object.prototype
true

同理:
Number.prototype 就是 Number的公用属性(原型)。即Number在引用Number的公用属性(原型);
String.prototype 就是 String的公用属性(原型)。即String在引用String的公用属性(原型);
Null.prototype 就是 Null的公用属性(原型)。即Null在引用Null的公用属性(原型);
而且:

var n = new Number(1)
undefined
var s = new String('s')
undefined
var b = new Boolean(false)
undefined
var o = new Object()
undefined
n.__proto__ === Number.prototype
true
s.__proto__ === String.prototype
true
b.__proto__ === Boolean.prototype
true
o.__proto__ === Object.prototype
true
n.__proto__.__proto__ === Object.prototype
true
s.__proto__.__proto__ === Object.prototype
true
b.__proto__.__proto__ === Object.prototype
true
Number.prototype.__proto__ === Object.prototype
true
String.prototype.__proto__ === Object.prototype
true
Boolean.prototype.__proto__ === Object.prototype
true
--------------------
Object.prototype.__proto__
null

关于prototype__proto__的区别:
简单的理解是:prototype是某些特殊的函数作为构造函数时的公用属性(原型)的 key 名;__proto__是由构造函数构造出来的具体的 对象 的公用属性(原型)的 key 名。

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

推荐阅读更多精彩内容