JS类型转换和内存机制

数据类型转换

任意类型转字符串

  1. String(x)
    转字符串方法一

  2. x.toString()
    转字符串方法二

  3. x + '' 加上空字符串
    转字符串方法三


任意类型转数字

  1. Number(x)

    1
    Number('1')   // 1
  2. parseInt(x, 10) 后面的数字表示几进制

    1
    2
    3
    4
    5
    parseInt('1',10)   // 1
    parseInt('011') // 11
    parseInt('011',8) // 9
    parseInt('s') // NaN
    parseInt('1s') // 1
  3. parseFloat(x)

    1
    parseFloat('1.23')   // 1.23
  4. x - 0

    1
    '1' - 0   // 1
  5. + x

    1
    2
    + '1'  // 1
    + '-1' // -1 加号表示取它原本的值

任意类型转布尔

  1. Boolean(x)

  2. !!x

    1
    2
    !! 0   false   
    !! 1 true
  • 五个falsy值:
    0, NaN, 空字符串, Null, undefined
  • 所有的对象都是true

内存机制

Chrome 给每个网页分配一定数量的内存
这些内存要分给页面渲染器、网络模块、浏览器外壳和 JS 引擎(V8引擎)
JS 引擎将内存分为代码区和数据区
我们只研究数据区
数据区分为 Stack(栈内存)Heap(堆内存)

  • 简单类型的数据直接存在 Stack 里
  • 复杂类型的数据是把 Heap 地址存在 Stack 里

遇到问题就画图分析。

内存图

问题

1
2
3
4
5
var a = 1
var b = a
b = 2
请问 a 显示是几?
1
1
2
3
4
5
var a = {name: 'a'}
var b = a
b = {name: 'b'}
请问现在 a.name 是多少?
'a'
1
2
3
4
5
var a = {name: 'a'}
var b = a
b.name = 'b'
请问现在 a.name 是多少?
'b'
1
2
3
4
5
var a = {name: 'a'}
var b = a
b = null
请问现在 a 是什么?
{name: 'a'}

垃圾回收

  • 如果一个对象没有被引用,它就是垃圾,将被回收。
  • 垃圾回收和数据结构有关系,即判断一个树的根有没有被引用
  • IE6有bug:关闭页面不会垃圾回收,除非关掉整个浏览器
    解决方法:
    1
    2
    3
    window.onunload = function(){
    document.div.onclick = null // 把每个监听事件都null掉,否则会造成内存泄漏
    }

深复制和浅复制

也可称为深拷贝和浅拷贝

1
2
3
4
5
var a = 1
var b = a
b = 2 //这个时候改变 b
a 完全不受 b 的影响
那么我们就说这是一个深复制

对于简单类型的数据来说,赋值就是深拷贝。
对于复杂类型的数据(对象)来说,才要区分浅拷贝和深拷贝。

这是一个浅拷贝的例子

1
2
3
4
var a = {name: 'Allen'}
var b = a
b.name = 'b'
a.name === 'b' // true

因为我们对 b 操作后,a 也变了

什么是深拷贝?就是对 Heap 内存进行完全的拷贝。

1
2
3
4
var a = {name: 'Allen'}
var b = deepClone(a) // deepClone 还不知道怎么实现
b.name = 'b'
a.name === 'a' // true