参考: https://zhuanlan.zhihu.com/p/23090041?refer=study-fe
原型与原型链
题目
- 如何准确判断一个变量是数组类型
- 写一个原型链继承的例子
- 描述 new一个对象的过程
- zepto( 或其他框架)源码中如何使用原型链
知识点
- 构造函数
- 构造函数 - 扩展
- 原型规则和示例
- 原型链
- instanceof
讲解
JS 中的面向对象是什么呢?
可以把面向对象视为宗教中的一类信仰:
- 面向对象教
- 函数式教
- Both
在面向对象的领域中, 并没有函数这个说法, 替代的品是一个称为 Class(类) 的东西, 但是在 JS 当中并没有 Class 这个东西, 反而是用一种称为构造函数的东西相对应? 那么什么是构造函数呢?
- 定义: 如果一个函数, 返回了一个对象, 则称为构造函数
为什么要有面向对象的概念呢? 按照以前学习 java 的思路, 当然是为了封装/继承/多态
- 封装: 隐藏细节(用函数也可以实现, 并非一定要用面向对象)
- A 对 A 封装
- A 对 B 封装
//假设我写了100行代码实现一个功能, 可以给些代码起一个统一的名字, 方便以后的调用, 看名字就知道是在干什么
$.get(url).then(success)
// B并不知道实现的细节,A向 B 提供了可以直接拿来用的 API, 更便于合作
- 继承: 儿子具有父亲的属性(你有的我都有), 同时又有着自己的性格 -> 复用代码很有用
Js当中并没有继承的方式(类似于 java 中面向对象的方法),而是采用了原型的方式实现, 但是在最新的版本中加入了面向对象的概念, 后面会提到
- 多态: 一个东西拥有两种或多种东西的属性 -> 让一个东西更加的灵活
举个例子, 节点分为:
- 元素节点
- 文本节点
在下面的代码中, div 既可以充当节点, 也可以视为元素
div.childNodes // 节点子代
div.children //元素子代
JS 是如何实现面向对象的
首先知道 JS 有7中基本类型, 前六种是基本类型(存值)
- number
- string
- boolean
- undefined
- null
- symbol
- object (引用类型, 存内存地址)
我们重点看 object 这个类型, object类型包含普通类型,数组和函数. 当我们写出一个 object 时到底发生了什么呢?
//在 stack( 栈内存)中, 让 obj 的值是一个对象的地址(比如 Address 89), 那么在89这个地址下, 存储的是真正的{ name:'frank', age: 18}
var obj = {
name: 'frank',
age: 18
}
此时考虑一个问题, obj 具有 name, age 属性之外, 为什么还具有.tostring()这个属性呢? 在address89这块内存地址中, 我们明明只有 name 和 age 属性啊!
obj.tostring() // '{name:'frank, age:18}'
答案就是这个tostring() 属性实际是存储在原型链中的.最可能想到的就是当我们在内存地址 address89 下存储一个对象{name:'frank', age:18}的时候, 聪明的JS 自动在这个对象中添加了了 toString 属性, 这个属性存储的也是一个内存地址, 假设是 address 266, 而这个地址上实际存储的就是我们常用的 toString 方法, 别忘了方法也是 object 的一种.
于是答案就清晰了, 每当我们创建一个 obj 时, 都会按照这种方式创建. 那么当我们创建一个 obj2时, 则会在某个内存地址产生这样的对象
var obj2 = {
name: 'frank',
age: 18,
toString: address 34 // address 34 同样指向一个内存地址, 该地址也存储了一个 tostring 方法
}
此时问题来了, 我们发现在内存地址 address 266 和 address 34 都存储了tostring 方法, 这样不是很浪费么,要是我创建1W个 obj 内, 岂不是内存中有1W 个 tostring 方法? JS 引擎说, 这个好办, 我让不同的 obj 的 tostring 都指向同一个内存中的方法不就好了? 于是obj2, obj3, ..., objn的 toString 属性, 都指向了address 266.
问题看似解决了, 但是还有一个疑问, 类似于tostring 这种由 JS 引擎为我们添加的属性可能会有很多, 如果每个 obj 中都存储这些属性的 key 值, 也是对内存的一种浪费. 为了解决这个问题, JS 引擎将这些共有属性( key + value) 全部都提取出来单独存储.
于是在内存中的某个地方, 假设为 address 88 存在这样一个对象, 它表示了所有 object 共有的属性.
//这里的 xxx 代表指向一个内存地址, 该地址上存储的是对应的函数
{
toString: xxx
valueof: xxx
...
}
于是乎, 前文提到的 obj, obj2 变成了
{
name: 'frank',
age: 18,
共有属性: address 88
}
直到这里我们就达到了有效节省内存的目的. 在 JS 中, 我们把这个共有属性取名为__ proto__.
{
name: 'frank',
age: 18,
__proto__: address 88
}
obj.__proto__ === obj2.__proto__ // true
现在让我们看看下面这个结果, 也就很好理解了
obj.__proto__.gender = 'male' //在实际写代码的时候, 不要这么操作, 因为很影响速度
obj2.gender // 'male'
说了这么多, 可能还是有个疑问, 那就是 address 88 地址上用来供大家共享的对象是谁创建的, 他的地址又是由谁来保存的呢?
其实这个对象是有 JS 引擎自己创建的, 即使我们什么代码也没有写, 在内存中它也是存在的. 而这个对象的地址则保存在 Object.prototype 这个属性中, 于是下面的代码也是成立的
window.Object.prototype.gender = 'male'
obj.gender // 'male'
obj2.gender // 'male'
而对于函数, 数组这样的对象, 他们也都有这自己独特的共有属性, 这么这个用来共享的对象的地址分别存储在 window.Array.prototype 和 window.Function.prototype中, 其他的情况以此类推.
(上文中的 Object, Function, Array 也都是 window 对象中的 key, value指向一个内存地址, 这个地址上的对象具有prototype 属性, 存储的值指向另一个内存地址, 这个地址上存储着一个对象, 包含了共有属性)
