js这门语言有很多诟病,然而很多被无视的【原创内容,转载请注明出处】【作者:唐霜】点,构成了js最为美妙的语言特性。这篇文【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。章将带你走进魔术般的引用型数据类型和原型【版权所有】唐霜 www.tangshuang.net【本文受版权保护】链背后,寻找那些被遗忘的超能力。并且,基【转载请注明来源】【版权所有,侵权必究】于这些超能力,我们将实现功能极其复杂,但【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net可以达到极为绝妙的架构设计。
【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。引用型数据类型未经授权,禁止复制转载。
【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】原创内容,盗版必究。原创内容,盗版必究。称法有很多,但是在我这里,我统一称这种借【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net鉴于java的数据结构为引用型数据类型。转载请注明出处:www.tangshuang.net原创内容,盗版必究。除去几种基本数据类型,其他所有类型都是引【作者:唐霜】【本文受版权保护】用型数据类型。所谓引用型数据类型,是指变原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】量保持内存地址指针,当该指针对应的具体内【版权所有,侵权必究】【本文首发于唐霜的博客】容发生变化时,指向同一指针的所有变量同时【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】发生变化。
【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。这是一个极其复杂的设计,这里的“复杂”既转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。包含原理上的,也包含情感上的。一台机器的著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】内存是有限的,虽然独立的栈存储数据更有利原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net于快速读取,但是会很快消耗完内存。而堆存【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。储由于没有特定结构,而且js还是弱类型语未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。言,这让读取数据又变的很慢。两难之间取舍【未经授权禁止转载】【未经授权禁止转载】,最后引用型数据类型成为js这门语言最原【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】始的力量,支撑着所有程序的发展。
【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。【原创内容,转载请注明出处】【原创内容,转载请注明出处】这就是js的“原力”,引用型数据类型决定未经授权,禁止复制转载。【转载请注明来源】了js的基因,很多语言特性成为那样,很大【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。程度是因为基因决定。
【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。【本文受版权保护】【作者:唐霜】举个例子,我们不能在遍历一个数组的时候,著作权归作者所有,禁止商业用途转载。【关注微信公众号: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)
}
console.log(i, item)
}
在遍历过程中,我们删掉了一个元素,导致数著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】组的长度变短,而实际循环并没有被调整,因本文作者:唐霜,转载请注明出处。【未经授权禁止转载】此,我们必须写一行代码进行调整:
未经授权,禁止复制转载。【版权所有】唐霜 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)
}
这样的操作我们司空见惯。著作权归作者所有,禁止商业用途转载。
【转载请注明来源】本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】内存引用带来了很多副作用,因此当我们使用【未经授权禁止转载】【未经授权禁止转载】redux时,必须遵循它那一整套redu【原创内容,转载请注明出处】未经授权,禁止复制转载。cer的规则,如果直接修改一个对象,会导【原创不易,请尊重版权】【原创不易,请尊重版权】致数据虽变但值仍相等的情况:
本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。let a = { test: 1 }
let b = a
b.test = 2
// a === b => true
这在react的组件撰写中非常危险,它使【转载请注明来源】【原创内容,转载请注明出处】得shouldComponentUpda未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】te等钩子不能被正常触发。
原创内容,盗版必究。本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。看上去这是一个大坑,大而特大的坑。但是,【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。如果我们换一个角度,我们在什么情况下需要原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】这样的力量?
未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 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共用同【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。一个data,虽然它们在自己的行为上不同【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。,但是它们的行为基于相同的data数据来【本文首发于唐霜的博客】【版权所有,侵权必究】实现,虽然上面这样写没有什么错,但是,我【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】们为何不直接写成:
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】【作者:唐霜】【版权所有】唐霜 www.tangshuang.netlet data = {}
let a = {
data,
say() {
alert(this.data.msg)
},
}
let b = {
data,
say() {
alert('my msg:' + this.data.msg)
},
}
这样的语义不是更明确吗?我们这里非常明确本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】的表述,a和b使用相同的data,当da【原创不易,请尊重版权】【本文受版权保护】ta改变时,同时影响它们的行为。
【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】这样的例子你完全看不出它的威力,原因在于【作者:唐霜】本文作者:唐霜,转载请注明出处。data太过简单。倘若,data是一个跨未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。模块的庞大数据体系,它贯穿于你的整个应用著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。,用户在pageA对data进行了修改,未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。希望这个修改被带到pageB,如果通过函未经授权,禁止复制转载。未经授权,禁止复制转载。数来逐层传递,那估计得写N个函数吧。然而转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。,实际上,我们只需要一个引用数据,不需要【版权所有】唐霜 www.tangshuang.net【作者:唐霜】任何额外的内存开销。
转载请注明出处:www.tangshuang.net【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。原型链继承原创内容,盗版必究。
【关注微信公众号:wwwtangshuangnet】【转载请注明来源】【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。再见识了上面的data的有趣之处后,我们【原创不易,请尊重版权】【未经授权禁止转载】再来看js的原型链继承。在js里面,各种本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】花哨的操作实在是太多太多了,比如通过ne【转载请注明来源】本文版权归作者所有,未经授权不得转载。w关键字创建一个实例,比如通过exten著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。ds继承一个类,比如令人抓狂的this…【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。…这些风骚的操作背后,原型链继承起到了黑【原创不易,请尊重版权】【作者:唐霜】色幽默的决定作用。
【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】【转载请注明来源】我相信你玩儿过docker,我不讲doc【本文首发于唐霜的博客】【本文受版权保护】ker,我讲原型链。
未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。一个优秀的原型链保证一个数据体系拥有最小原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】单位。让我们来看下一个例子:
未经授权,禁止复制转载。【原创不易,请尊重版权】未经授权,禁止复制转载。【本文受版权保护】【未经授权禁止转载】var obj1 = {
a: 1,
b: 2,
}
var obj2 = Object.assign({}, a, { b: 3 })
这段代码的目的是,创建一个obj2,使它【版权所有】唐霜 www.tangshuang.net【本文受版权保护】跟obj1有大致相仿的结构,但是也有自己【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。的特殊性。然而,仔细观察,我们会发现,o本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。bj2是对obj1的浅复制。它在表层拥有【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。完全独立的存储空间,如果我们按照这样的方【本文受版权保护】【版权所有】唐霜 www.tangshuang.net法复制一万个obj,我们会发现,内存被吃【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。的很快。而原型链继承就像一个带着白手套的【本文首发于唐霜的博客】【原创不易,请尊重版权】魔术师,用更为简洁的语言去描述相同结构的【本文首发于唐霜的博客】【未经授权禁止转载】数据。
【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net【作者:唐霜】var obj1 = {
a: 1,
b: 2,
}
var obj2 = Object.create(obj1)
obj2.b = 3
虽然代码的行数增加了,然而内在的机理却在未经授权,禁止复制转载。未经授权,禁止复制转载。发生变化。obj2保持了最小的内存消化,原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】但同时拥有了和obj1相似的数据结构。更【转载请注明来源】【本文首发于唐霜的博客】为重要的是,你是否还记得前面我们谈到da著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】ta被共用的场景。我们让千万个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世界的图腾,所有的未经授权,禁止复制转载。【原创内容,转载请注明出处】js文化都在围绕着它发展壮大。这似乎有点【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net危言耸听,但如果你认为angular是一【本文受版权保护】【关注微信公众号:wwwtangshuangnet】个不错的框架的话,一定还记得angula【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】r中关于作用域的一些列描述。父级作用域在著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。子作用域中仍然有效,但子作用域优先级更高转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net。它背后的原理,就是利用原型链的继承来实【作者:唐霜】【原创不易,请尊重版权】现。
【未经授权禁止转载】未经授权,禁止复制转载。【原创内容,转载请注明出处】未经授权,禁止复制转载。核级应用:数据快照vs数据版本控制本文版权归作者所有,未经授权不得转载。
【未经授权禁止转载】原创内容,盗版必究。原创内容,盗版必究。本文作者:唐霜,转载请注明出处。前面讲了那么多,有没有更感性的方式,让我本文作者:唐霜,转载请注明出处。【未经授权禁止转载】们可以对这些无关痛痒的话题更加在意呢?当【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】然有的,我们需要自己手撸一个东西,让这些【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】零零碎碎的兴奋可以落地成核,炸开一个新宇【转载请注明来源】原创内容,盗版必究。宙。
【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。我们知道,在使用redux时,我们可以做【转载请注明来源】原创内容,盗版必究。到一个功能,就是恢复数据,或者将连续的状未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】态动态设置,形成界面的连续变化,终而形成【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。肉眼可观的影像。我们的认知告诉我们,这个未经授权,禁止复制转载。【版权所有,侵权必究】原理很简单,redux管理的是状态,应用著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】一个状态对应一个界面,把每一个状态的变化【作者:唐霜】【本文首发于唐霜的博客】保存起来,就可以得到连续的状态,也就可以未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net得到连续的界面变化。
著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。【本文首发于唐霜的博客】可是啊,如此庞大的状态,每一个变动可能就【版权所有,侵权必究】【原创不易,请尊重版权】是一个微小的粒子,保存起来?也许还是太年著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。轻。
未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】【作者:唐霜】我已经提到过docker了,不知道你还对【转载请注明来源】【转载请注明来源】它有没有兴趣。每一个容器基于一个镜像,镜【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net像层层叠叠,就像是人类文明一样,后人站在未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。前人的肩膀上。底层的镜像可以被不同的上层转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。镜像使用,这样,就减少了同样的内容在do【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。cker中重复出现的情况。不同的应用都基未经授权,禁止复制转载。【本文受版权保护】于Ubuntu,只要一个Ubuntu镜像【版权所有,侵权必究】【版权所有,侵权必究】就行了,apache、php,对于一个应著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。用的不同环境,这些底层镜像大家都相同了,【未经授权禁止转载】本文作者:唐霜,转载请注明出处。但却可以跑出千万多姿的应用出来。
【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】【本文首发于唐霜的博客】【本文首发于唐霜的博客】【转载请注明来源】同样的道理,状态的改变,只是在原有状态的本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。基础上做一点小小的定制而已,有必要把整个转载请注明出处:www.tangshuang.net【本文受版权保护】状态都保存起来吗?不需要,只需要保存变化【本文受版权保护】【转载请注明来源】过的那一点点就可以了,其他的所有,我们从【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。上一个状态继承即可。这是最最最适合魔术师转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。原型链发挥魔力的地方了。
【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】母状态 -> 状态b -> 状态c -> 当前状态
在这个应用场景里,被保存过的状态从来不会本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net被修改,它们安静的沉睡。你可以让当前的界著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】面,犹如游标卡尺般,在这个链条上来回游动【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】,像那些被玩儿坏的鬼畜剪辑般,游刃有余。
未经授权,禁止复制转载。【本文首发于唐霜的博客】【转载请注明来源】转载请注明出处:www.tangshuang.net【版权所有,侵权必究】你可能还是git的忠实粉丝,喜欢merg未经授权,禁止复制转载。【未经授权禁止转载】e功能喜欢到爆炸。在这样的原型链模型里面【未经授权禁止转载】【原创不易,请尊重版权】,你也可以轻松做到数据的版本管理:
未经授权,禁止复制转载。【原创不易,请尊重版权】【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。母状态 | 状态a | 状态b | \ | 状态c | \ 状态d | | / | 状态e | / 状态f | 当前状态
这样的结构,基于redux可以实现吗?或【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。许还差那么一些,然而,基于原型链却是轻轻转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。松松。任何一个状态,都可以由两部分组成,本文作者:唐霜,转载请注明出处。【转载请注明来源】一部分是来自对上一个状态的继承,另一部分原创内容,盗版必究。原创内容,盗版必究。是来自自己独特的特殊数据。而相对而言,这【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。些特殊数据的量总是小的。
【转载请注明来源】著作权归作者所有,禁止商业用途转载。【本文受版权保护】你可能有个疑问,上面将“状态e”merg【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】e到“状态f”的过程怎么去实现呢?有两种转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。方式:
【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net【本文受版权保护】var f = Object.create(d) Object.assgin(f, e)
这种方式把d这条线当作master,接收转载请注明出处:www.tangshuang.net原创内容,盗版必究。来自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 },
})
这种方式则绕一些,通过创建代理来保证同时【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】保持了两个状态的同时继承,同时定义了两个【本文受版权保护】【版权所有】唐霜 www.tangshuang.net隐式的属性来保存继承的来源,方便后期查找【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】。这种方法比方法1更好的地方在于,方法1本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。把状态e merge到f之后,和e就没有【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。关系了,merge的过程,要求把e这条分【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】支的所有改动都找出来,然后一并赋值给f,未经授权,禁止复制转载。【版权所有,侵权必究】这样其实面临了前面说的保存了一些其实不用本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net保存的数据。而方法2则很好的解决这个问题本文作者:唐霜,转载请注明出处。【转载请注明来源】,它不需要把数据从整个e这条分支检索出来【原创内容,转载请注明出处】原创内容,盗版必究。,仍然保留了原型链继承的模式。
【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】小结本文作者:唐霜,转载请注明出处。
未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】也许,你对js的爱憎分明,你渴望它更加完【本文首发于唐霜的博客】【原创不易,请尊重版权】美,但是非常遗憾的是,每一门语言都不可能【版权所有】唐霜 www.tangshuang.net【作者:唐霜】完美,否则世界上只需要一门语言,然而正式【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】因为语言的多样性,这个世界才更加有趣。对【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】js原始冲动的琢磨,或许就是一个兴趣的开【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。始,你不需要纠结于语言的语法和憋足的数据原创内容,盗版必究。【转载请注明来源】类型,你领略了它原力中的super po著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netwer之后,就可以享受这一场魔术盛宴了。
原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】最后的小广告,刚刚完成了objext这个转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。包的开发,它很好的利用了原型链的特点,实原创内容,盗版必究。本文作者:唐霜,转载请注明出处。现了复杂但接口又很简单的功能,欢迎品尝 https://github.com/t【未经授权禁止转载】【未经授权禁止转载】angshuang/objext。【原创不易,请尊重版权】
【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。2018-09-27 3804 原型链



var obj1 = {
a: 1,
b: 2,
}
var obj2 = Object.assign({}, a, { b: 3 })
这句应该笔误写错了吧…