js这门语言有很多诟病，然而很多被无视的【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net点，构成了js最为美妙的语言特性。这篇文【原创内容，转载请注明出处】【未经授权禁止转载】章将带你走进魔术般的引用型数据类型和原型原创内容，盗版必究。转载请注明出处：www.tangshuang.net链背后，寻找那些被遗忘的超能力。并且，基【转载请注明来源】原创内容，盗版必究。于这些超能力，我们将实现功能极其复杂，但本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。可以达到极为绝妙的架构设计。

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

引用型数据类型

称法有很多，但是在我这里，我统一称这种借【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。鉴于java的数据结构为引用型数据类型。【本文首发于唐霜的博客】【版权所有，侵权必究】除去几种基本数据类型，其他所有类型都是引未经授权，禁止复制转载。【原创内容，转载请注明出处】用型数据类型。所谓引用型数据类型，是指变【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。量保持内存地址指针，当该指针对应的具体内原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。容发生变化时，指向同一指针的所有变量同时【转载请注明来源】【原创内容，转载请注明出处】发生变化。

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

这是一个极其复杂的设计，这里的“复杂”既【原创不易，请尊重版权】【作者：唐霜】包含原理上的，也包含情感上的。一台机器的【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】内存是有限的，虽然独立的栈存储数据更有利【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。于快速读取，但是会很快消耗完内存。而堆存本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】储由于没有特定结构，而且js还是弱类型语【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】言，这让读取数据又变的很慢。两难之间取舍本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。，最后引用型数据类型成为js这门语言最原【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。始的力量，支撑着所有程序的发展。

【版权所有，侵权必究】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

这就是js的“原力”，引用型数据类型决定本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net了js的基因，很多语言特性成为那样，很大【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】程度是因为基因决定。

未经授权，禁止复制转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

举个例子，我们不能在遍历一个数组的时候，【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net随意删除数组的某个元素：

本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。

let arr = [1, 2, 3, 4]
for (let i = 0, len = arr.length; i < len; i ++) {
  let item = arr[i]
  if (item === 2) {
    arr.splice(i, 1)
  }
  console.log(i, item)
}

在遍历过程中，我们删掉了一个元素，导致数著作权归作者所有，禁止商业用途转载。【本文受版权保护】组的长度变短，而实际循环并没有被调整，因【本文受版权保护】【关注微信公众号：wwwtangshuangnet】此，我们必须写一行代码进行调整：

转载请注明出处：www.tangshuang.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

let arr = [1, 2, 3, 4]
for (let i = 0, len = arr.length; i < len; i ++) {
  let item = arr[i]
  if (item === 2) {
    arr.splice(i, 1)
    len = arr.length
  }
  console.log(i, item)
}

这样的操作我们司空见惯。

【原创内容，转载请注明出处】【未经授权禁止转载】【作者：唐霜】

内存引用带来了很多副作用，因此当我们使用【转载请注明来源】【版权所有】唐霜 www.tangshuang.netredux时，必须遵循它那一整套redu著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】cer的规则，如果直接修改一个对象，会导【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】致数据虽变但值仍相等的情况：

【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

let a = { test: 1 }
let b = a
b.test = 2
// a === b => true

这在react的组件撰写中非常危险，它使本文版权归作者所有，未经授权不得转载。【作者：唐霜】得shouldComponentUpda【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】te等钩子不能被正常触发。

【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】

看上去这是一个大坑，大而特大的坑。但是，【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】如果我们换一个角度，我们在什么情况下需要【未经授权禁止转载】原创内容，盗版必究。这样的力量？

【转载请注明来源】【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。

let a = {
  data: {},
  say() {
    alert(this.data.msg)
  },
}
let b = {
  get data() {
    return a.data
  },
  say() {
    alert('my msg:' + this.data.msg)
  },
}

上面这段代码，我们的期望是，a和b共用同原创内容，盗版必究。【版权所有，侵权必究】一个data，虽然它们在自己的行为上不同转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】，但是它们的行为基于相同的data数据来本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。实现，虽然上面这样写没有什么错，但是，我【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】们为何不直接写成：

原创内容，盗版必究。未经授权，禁止复制转载。未经授权，禁止复制转载。

let data = {}
let a = {
  data,
  say() {
    alert(this.data.msg)
  },
}
let b = {
  data,
  say() {
    alert('my msg:' + this.data.msg)
  },
}

这样的语义不是更明确吗？我们这里非常明确【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。的表述，a和b使用相同的data，当da本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netta改变时，同时影响它们的行为。

【本文受版权保护】【原创不易，请尊重版权】

这样的例子你完全看不出它的威力，原因在于【本文首发于唐霜的博客】【转载请注明来源】data太过简单。倘若，data是一个跨本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net模块的庞大数据体系，它贯穿于你的整个应用未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】，用户在pageA对data进行了修改，本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。希望这个修改被带到pageB，如果通过函转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】数来逐层传递，那估计得写N个函数吧。然而【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。，实际上，我们只需要一个引用数据，不需要【本文首发于唐霜的博客】未经授权，禁止复制转载。任何额外的内存开销。

本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。

原型链继承

再见识了上面的data的有趣之处后，我们本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。再来看js的原型链继承。在js里面，各种著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】花哨的操作实在是太多太多了，比如通过ne本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。w关键字创建一个实例，比如通过exten【转载请注明来源】【原创内容，转载请注明出处】ds继承一个类，比如令人抓狂的this…【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net…这些风骚的操作背后，原型链继承起到了黑未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net色幽默的决定作用。

【原创不易，请尊重版权】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net

我相信你玩儿过docker，我不讲doc【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ker，我讲原型链。

【本文首发于唐霜的博客】原创内容，盗版必究。

一个优秀的原型链保证一个数据体系拥有最小【原创内容，转载请注明出处】【转载请注明来源】单位。让我们来看下一个例子：

【本文受版权保护】本文版权归作者所有，未经授权不得转载。

var obj1 = {
  a: 1,
  b: 2,
}
var obj2 = Object.assign({}, a, { b: 3 })

这段代码的目的是，创建一个obj2，使它【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】跟obj1有大致相仿的结构，但是也有自己【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net的特殊性。然而，仔细观察，我们会发现，o【版权所有，侵权必究】【转载请注明来源】bj2是对obj1的浅复制。它在表层拥有【关注微信公众号：wwwtangshuangnet】【作者：唐霜】完全独立的存储空间，如果我们按照这样的方【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】法复制一万个obj，我们会发现，内存被吃【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】的很快。而原型链继承就像一个带着白手套的【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】魔术师，用更为简洁的语言去描述相同结构的【转载请注明来源】【原创不易，请尊重版权】数据。

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】

var obj1 = {
  a: 1,
  b: 2,
}
var obj2 = Object.create(obj1)
obj2.b = 3

虽然代码的行数增加了，然而内在的机理却在转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。发生变化。obj2保持了最小的内存消化，【本文受版权保护】【作者：唐霜】但同时拥有了和obj1相似的数据结构。更【版权所有】唐霜 www.tangshuang.net【本文受版权保护】为重要的是，你是否还记得前面我们谈到da【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netta被共用的场景。我们让千万个obj共用原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。data作为一个结构模型，但使用最少量但【作者：唐霜】【未经授权禁止转载】内存消耗：

本文作者：唐霜，转载请注明出处。【转载请注明来源】本文版权归作者所有，未经授权不得转载。

var data = {
  a: 1,
  b: 2,
}
var obj1 = Object.create(data)
Object.assign(obj1, {
  a: 3,
})
var obj2 = Object.create(data)
Object.assign(obj2, {
  b: 4,
})

当我修改data时，所有的obj都在调整【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net，但是它们又不会丢失自己的特殊性。

原创内容，盗版必究。未经授权，禁止复制转载。

原型链继承，就像是js世界的图腾，所有的【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netjs文化都在围绕着它发展壮大。这似乎有点【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】危言耸听，但如果你认为angular是一【转载请注明来源】【转载请注明来源】个不错的框架的话，一定还记得angula转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。r中关于作用域的一些列描述。父级作用域在原创内容，盗版必究。本文作者：唐霜，转载请注明出处。子作用域中仍然有效，但子作用域优先级更高【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。。它背后的原理，就是利用原型链的继承来实【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】现。

转载请注明出处：www.tangshuang.net【版权所有，侵权必究】

核级应用：数据快照vs数据版本控制

前面讲了那么多，有没有更感性的方式，让我【未经授权禁止转载】本文作者：唐霜，转载请注明出处。们可以对这些无关痛痒的话题更加在意呢？当【作者：唐霜】【原创内容，转载请注明出处】然有的，我们需要自己手撸一个东西，让这些【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net零零碎碎的兴奋可以落地成核，炸开一个新宇本文版权归作者所有，未经授权不得转载。【转载请注明来源】宙。

【未经授权禁止转载】【转载请注明来源】原创内容，盗版必究。

我们知道，在使用redux时，我们可以做本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】到一个功能，就是恢复数据，或者将连续的状转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】态动态设置，形成界面的连续变化，终而形成【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。肉眼可观的影像。我们的认知告诉我们，这个原创内容，盗版必究。未经授权，禁止复制转载。原理很简单，redux管理的是状态，应用【原创内容，转载请注明出处】【本文首发于唐霜的博客】一个状态对应一个界面，把每一个状态的变化【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】保存起来，就可以得到连续的状态，也就可以未经授权，禁止复制转载。原创内容，盗版必究。得到连续的界面变化。

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】

可是啊，如此庞大的状态，每一个变动可能就著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。是一个微小的粒子，保存起来？也许还是太年【本文受版权保护】【作者：唐霜】轻。

【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。

我已经提到过docker了，不知道你还对【本文受版权保护】本文版权归作者所有，未经授权不得转载。它有没有兴趣。每一个容器基于一个镜像，镜【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。像层层叠叠，就像是人类文明一样，后人站在转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。前人的肩膀上。底层的镜像可以被不同的上层【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】镜像使用，这样，就减少了同样的内容在do【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。cker中重复出现的情况。不同的应用都基【转载请注明来源】未经授权，禁止复制转载。于Ubuntu，只要一个Ubuntu镜像【版权所有，侵权必究】【版权所有，侵权必究】就行了，apache、php，对于一个应转载请注明出处：www.tangshuang.net【作者：唐霜】用的不同环境，这些底层镜像大家都相同了，原创内容，盗版必究。原创内容，盗版必究。但却可以跑出千万多姿的应用出来。

【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】

同样的道理，状态的改变，只是在原有状态的著作权归作者所有，禁止商业用途转载。【作者：唐霜】基础上做一点小小的定制而已，有必要把整个未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】状态都保存起来吗？不需要，只需要保存变化【版权所有，侵权必究】【转载请注明来源】过的那一点点就可以了，其他的所有，我们从原创内容，盗版必究。转载请注明出处：www.tangshuang.net上一个状态继承即可。这是最最最适合魔术师著作权归作者所有，禁止商业用途转载。【本文受版权保护】原型链发挥魔力的地方了。

【作者：唐霜】【本文受版权保护】【本文受版权保护】

母状态 -> 状态b -> 状态c -> 当前状态

在这个应用场景里，被保存过的状态从来不会未经授权，禁止复制转载。【作者：唐霜】被修改，它们安静的沉睡。你可以让当前的界【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】面，犹如游标卡尺般，在这个链条上来回游动未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net，像那些被玩儿坏的鬼畜剪辑般，游刃有余。

【版权所有】唐霜 www.tangshuang.net【转载请注明来源】

你可能还是git的忠实粉丝，喜欢merg【作者：唐霜】原创内容，盗版必究。e功能喜欢到爆炸。在这样的原型链模型里面【作者：唐霜】【作者：唐霜】，你也可以轻松做到数据的版本管理：

转载请注明出处：www.tangshuang.net【未经授权禁止转载】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。

母状态
|
状态a
|
状态b
|    \
|    状态c
|       \
状态d     |
|       /
|    状态e
|    /
状态f
|
当前状态

这样的结构，基于redux可以实现吗？或著作权归作者所有，禁止商业用途转载。【作者：唐霜】许还差那么一些，然而，基于原型链却是轻轻【转载请注明来源】原创内容，盗版必究。松松。任何一个状态，都可以由两部分组成，【本文受版权保护】本文版权归作者所有，未经授权不得转载。一部分是来自对上一个状态的继承，另一部分【转载请注明来源】【未经授权禁止转载】是来自自己独特的特殊数据。而相对而言，这【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】些特殊数据的量总是小的。

本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

你可能有个疑问，上面将“状态e”merg【本文首发于唐霜的博客】【本文受版权保护】e到“状态f”的过程怎么去实现呢？有两种著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】方式：

【本文受版权保护】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。

var f = Object.create(d)
Object.assgin(f, e)

这种方式把d这条线当作master，接收著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】来自e这条分支的pull request【原创不易，请尊重版权】【原创不易，请尊重版权】。

原创内容，盗版必究。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

var f = new Proxy({}, {
  get: (target, prop) => {
    return target[prop] || e[prop] || d[prop]
  },
})
Object.defineProperties(f, {
  $$master: { value: d },
  $$branck: { value: e },
})

这种方式则绕一些，通过创建代理来保证同时【转载请注明来源】【原创内容，转载请注明出处】保持了两个状态的同时继承，同时定义了两个【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。隐式的属性来保存继承的来源，方便后期查找著作权归作者所有，禁止商业用途转载。【本文受版权保护】。这种方法比方法1更好的地方在于，方法1转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。把状态e merge到f之后，和e就没有【原创内容，转载请注明出处】未经授权，禁止复制转载。关系了，merge的过程，要求把e这条分【版权所有，侵权必究】转载请注明出处：www.tangshuang.net支的所有改动都找出来，然后一并赋值给f，【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】这样其实面临了前面说的保存了一些其实不用【本文受版权保护】本文版权归作者所有，未经授权不得转载。保存的数据。而方法2则很好的解决这个问题本文作者：唐霜，转载请注明出处。【作者：唐霜】，它不需要把数据从整个e这条分支检索出来本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net，仍然保留了原型链继承的模式。

【作者：唐霜】【未经授权禁止转载】

小结

也许，你对js的爱憎分明，你渴望它更加完原创内容，盗版必究。【本文首发于唐霜的博客】美，但是非常遗憾的是，每一门语言都不可能【作者：唐霜】【版权所有，侵权必究】完美，否则世界上只需要一门语言，然而正式【原创内容，转载请注明出处】【本文受版权保护】因为语言的多样性，这个世界才更加有趣。对转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】js原始冲动的琢磨，或许就是一个兴趣的开【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】始，你不需要纠结于语言的语法和憋足的数据本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。类型，你领略了它原力中的super po原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。wer之后，就可以享受这一场魔术盛宴了。

转载请注明出处：www.tangshuang.net原创内容，盗版必究。

最后的小广告，刚刚完成了objext这个【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net包的开发，它很好的利用了原型链的特点，实【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net现了复杂但接口又很简单的功能，欢迎品尝 https://github.com/t本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】angshuang/objext。

【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【未经授权禁止转载】

2018-09-27 4193 原型链