JS 的面向对象

参考: 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 属性, 存储的值指向另一个内存地址, 这个地址上存储着一个对象, 包含了共有属性)

JS 的面向对象

原型与原型链

题目

知识点

讲解

你可能感兴趣的:(JS 的面向对象)