前言

  • 在线音乐戳我呀！
  • 音乐博客源码上线啦！
  • 糊里糊涂在前端畛域磕磕碰碰了靠近三年，想看看Vue源码，不晓得有没有最近想看源码的猿友，如果JS不够硬，倡议跟我一起来重学JS，重学完置信再去看源码，会事倍功半。
  • 尤其清晰的记得毕业期间有一次上课期间手机响起来，接了个面试电话，就问了原型、原型链，真的是怕什么来什么，过后对这块常识较含糊，支支吾吾答复不上来很难堪。
  • 真花了几天几夜，只为出现最好的文章。可能一次性看不完，倡议点赞珍藏，花再多工夫也要硬啃下来，肯定拿下原型链这块盲区常识，好嘛！！！
  • 接下来咱们来看看JS的原型、原型链知识点都能够考些什么。
  • 请脑子清晰，跟着我的节奏，保障一回彻底啃下，Are you ready ？
每日一面：
面试官：晓得什么是对象吗？
晓得，不过我工作致力，上进心强，临时还没有对象。然而打算找对象了。

先来问本人六七八道面试题

  • 说一下原型？
  • 说一下原型链过程？
  • Object.prototype.__proto__ 值为啥？
  • 什么的显式原型、隐式原型都指向它本人？
  • 任何函数都是new Function创立的？
  • Function的显式原型是不是都是new Object进去的？
  • 所有的函数的__proto__都是一样的？
  • 所有函数的显式原型指向对象默认是空object实例对象？
想看答案，间接划到最上面。
如果会了，面试官轻易拿捏好吧。
如果不会，咱们先来了解原型、原型链的概念。
只有晓得问题背地的原理常识，解题必然顺手拈来。

原型与原型链

  • 原型(prototype)
  • 显式原型与隐式原型
  • 原型链

一、原型

1.1 函数的prototype属性

1.1.1. 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)

上段代码不便了解这段话：

function Fun () {}console.log(Fun.prototype)  // 默认指向一个Object空对象(没有咱们的属性)

咱们定义的Fun函数有一个prototype属性，而且打印进去默认指向Object空对象。

❓ 杠精上身：我不信，那为什么Date函数怎么一创立就默认有很多办法？

有图有假相。

你不是说prototype属性, 它默认指向一个Object空对象，打印进去这么多办法（揭穿你），不过typeof Date.prototype的确是object对象类型。

这个问题我能够答复一下：

其实Date原型prototype上的办法是Date初始化本人往原型上增加的，次要是给实例对象应用的，谁把我创立进去，就给谁用。

关上Date函数，从源码能够看到Date往prototype增加了很多办法。

懂了，原来是Date函数创立的时候本人往prototype上增加属性办法。

❓ 你说函数的显式原型指向对象默认是空object实例对象？

console.log(Fn.prototype instanceof Object) // trueconsole.log(Object.prototype instanceof Object) // falseconsole.log(Function.prototype instanceof Object) // true

Object除外。

1.1.2. 原型对象中有一个属性constructor, 它指向函数对象

咱们用代码了解一下：

Date的原型prototype有一个属性constructor，这个属性constructor指向Date对象。

Date.prototype.constructor === Date

咱们再用画图了解一下（说好肯定要带懂你）

构造函数和原型对象有互相援用的关系图如下：

你外面有个属性prototype能找到我，我外面有个属性constructor也能找到你。

1.2 给原型对象增加属性(个别都是增加办法)

有何作用:

为了给函数的所有实例对象主动领有原型中的属性(办法)。

// 给Fun原型增加属性testFun.prototype.test = function () {    console.log('test()')}// 你问我有什么用？还不是给你fun实例对象能够调用test办法用的var fun = new Fun()fun.test()

二、显式原型与隐式原型

2.1 每个函数function都有一个prototype，即显式原型(属性)

//定义构造函数function Fn() {       // 外部语句: this.prototype = {}}  console.log(Fn.prototype)  // {}

而函数的prototype属性在什么时候会被加上？

函数的prototype属性: 在定义函数时主动增加的, 默认值是一个空Object对象

2.2 每个实例对象都有一个__proto__，可称为隐式原型(属性)

//创立实例对象var fn = new Fn()  // 外部语句: this.__proto__ = Fn.prototypeconsole.log(fn.__proto__)   // {}

而对象的__proto__属性: 创建对象时主动增加的, 默认值为构造函数的prototype属性值

2.3 对象的隐式原型的值为其对应构造函数的显式原型的值

其实也的确是相等，因为实例对象的__proto__属性在创建对象时主动增加的, 默认值为构造函数的prototype属性值。

二者的地址值都是同一个，天然相等。

function Fn() {}var fn = new Fn()console.log(Fn.prototype === fn.__proto__) // true

咱们再来上张图更透底搞懂他们的关系：

⭐请容许我啰嗦两句（倡议依据阿泽以下说的，而后画下来，画着画着就懂了）：

  • 1.第一行代码定义了Fn函数，那么栈空间产生Fn，因为函数是援用类型，所以赋予0x123（栈空间命名不是这样子叫，只不过在这里给它一个名字）
  • Fn是构造函数，外部语句：this.prototype = {}，所以有显式原型prototype属性，指向空object对象0x234。
  • 输入Fn.prototype，打印{constructor: ƒ, prototype:{...}}
  • 2.创立以Fn实例对象的fn，在栈空间新建fn，指向堆空间的0x3456。
  • 实例对象有__proto__属性，实例对象被创立外部语句是：this.__proto__ = Fn.prototype
  • 对应上方2.3 对象的隐式原型的值为其对应构造函数的显式原型的值
  • fn的__proto__和Fn.prototype指向同一个值为0x234。
  • 3.在Fn构造函数的原型上增加test属性，即0x234空object对象上增加test属性。
  • 接着执行fn.test()，所谓点.就是去堆空间外面找对应的属性值，它先去自身0x345找，发现并没有找到，持续去它的隐式__proto__原型链0x234上找，找到了test属性，返回！
误区：
找属性的时候，不会去显式原型上找，它是回去找隐式原型__proto__属性上查找，因为一开始该属性创立的时候，就是将显式原型prototype属性赋给隐式原型__proto__属性。

❓ 杠精上身：为什么构造函数有prototype属性了，实例对象还要搞一个__proto__的值为构造函数prototype的值呢？

大略作用就是共享内存，缩小办法对内存占用，test办法变成公交车，prototype就是现金，__proto__就是扫码，只有给钱都能上（都能拜访test）。

2.4 能间接操作显式原型, 但不能间接操作隐式原型(ES6之前)

咱们失常都是间接给Fn原型上增加属性办法，而不会间接去操作fn实例对象的__proto__属性去增加办法。

也就是能够间接操作显式原型，而不要间接去操作隐式原型。（尽管当初ES6时代能够去操作隐式原型，但最好不要）。

function Fn() {}var fn = new Fn()// 给显式原型增加test办法Fn.prototype.test = function () {    console.log('test()')}// 通过实例调用原型的办法fn.test()

三、原型链

⭐倡议跟着以下剖析，本人把图画进去，程序员的入手能力很重要（如果切实懒，再关上一个窗口放把下面的图，一边看图一边看剖析），如果图、剖析不联合，有可能无奈GET到点哦 ~

如果临时没工夫，倡议珍藏，等有工夫缓缓看。

3.1 聊原型链前，咱们先来看一道面试题目。（请耐下性子，好好看上来，必有收货）

请输入以下程序执行的后果。

function Fn() {    this.test1 = function () {      console.log('test1()')    }}Fn.prototype.test2 = function () {    console.log('test2()')}var fn = new Fn()fn.test1()  // test1()fn.test2()  // test2()console.log(fn.toString())  // '[object Object]'fn.test3()  // Uncaught TypeError: fn.test3 is not a function
偷笑，这面试官也太小看我了吧！

面试官：别急，请根据上述代码块画出函数的栈堆、以及原型链指向。

是不是很多面试者忽然不晓得怎么画了呢？

其实也失常，对原型链概念隐隐约约，画不进去，失常，不过这也是本篇存在的意义。

记住三句话：

  • 每个函数都有一个prototype属性, 它默认指向一个Object空对象。
  • 每个实例对象都有一个__proto__，可称为隐式原型。
  • 实例对象的隐式原型属性等于构造函数显式原型属性的值。

来吧，唐伯虎附体。冲！

  • 右边的程序块大局观大略是：

    • Object对象0x567是引擎创立了它，程序再执行的时候也就有了左边堆空间的产生；
    • 无论是Fn函数的显式原型也好，隐式原型也罢，都是Object的实例对象；
    • 然而Object尽管是大家的爸爸，但也是有原型的，是0x345。（爸爸的爸爸叫爷爷）

⭐请容许我啰嗦两句（倡议依据阿泽说的，而后画下来，画着画着就懂了）：

  • 1.第一行代码定义了Fn函数，那么栈空间产生Fn，因为函数是援用类型，所以赋予0x123（栈空间命名不是这样子叫，只不过在这里给它一个名字）
  • 堆空间也产生0x123的function对象，并有prototype属性。
  • prototype默认会指向一个Object空对象，咱们给这个空对象命名0x234。
  • 对应下面 1.1.1 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
  • 0x234有一个__proto__属性。既然都有__prototy__隐式原型，那0x234是Object的实例对象。
  • __proto__指向一个Object对象，咱们给这个原型对象命名为0x345。
  • 对应下面 2.2 每个实例对象都有一个__proto__，可称为隐式原型(属性)
  • 要讲这个0x345，咱们先来引进Object对象。
  • 先问大家一个问题，Object对象先创立还是咱们代码块的Fn函数先创立？
  • Object对象在咱们代码还没有执行的时候，JS引擎曾经创立了Object。
  • 验证下：看图的0x234实例对象的__proto__隐式原型属性 = 构造函数Object的显式原型，那居然是等于（赋值运算），那必定是左边先有的。右先创立才有的右边。
  • 所以Fn之前，Object曾经先创立了，咱们给Object命名为0x567。
  • 0x567的Object函数对象有一个prototype属性。
  • prototype指向Object原型对象，咱们给这个对象命名0x3456。
  • 咱们晓得prototype默认会指向一个Object空对象，那这里Object的prototype也是指向一个空对象？
  • 总得有个尾吧，这里就是尾了。所以0x3456外面有很多属性。如：toString()、valueof()、...
  • 当然，它还有__proto__属性，只不过值为null。
  • 所以toString办法，咱们在函数对象就能够调用它，因为函数也是对象，对象的原型最终为Object，Object的prototype显式原型就有toString办法。
  • 回归上方的0x234的__proto__指向的就是Object的prototype显式原型。
  • 2.OK，到这里咱们画完代码块中的Fn函数的创立（是不是感觉我就定义一个函数，就这么简单了，其实再走上来就通了），来，咱们持续GO！
  • 3.接着Fn.prototype.test2给Fn原型增加test2属性，咱们在0x234对象外面增加test2属性。
  • 4.var fn = new Fn()，创立了一个Fn的实例对象fn，在栈中创立fn，命名为0x456。
  • 堆空间有0x456这块内存，有着test1属性。
  • 有人可能会问了，test1不是Fn构造函数的吗？为什么test1写在fn实例对象外面？
  • 请留神：在Fn中的test1是this.test1 = function(){}创立的，上篇讲到想写好面向对象的代码，这篇肯定要看讲到this指向，谁调用我，this就指向谁，在这里是fn调用的，那this.test1当然是写在fn外面。
  • 当然，0x456是一个实例对象，那就应该有__proto__隐式属性。
  • 该隐式属性指向Who？
  • 对应后面2.3 对象的隐式原型的值为其对应构造函数的显式原型的值
  • 所以，这里的0x456实例对象隐式原型的值指向0x123构造函数显式原型的值，即指向：0x234。
  • 5.OK，右边代码块持续走，fn.test1办法执行，输入test1()
  • 6.fn.test2()办法执行，先找到fn（先在本身属性中查找，找到返回）。
  • 然而并没有找到，fn外面只有test1、__proto__属性。（如果没有, 再沿着__proto__这条链向上查找, 找到返回）
  • 咱们沿着__proto__这条线寻找上来，找到0x234，0x234有test2、__proto__属性，OK，找到test2，返回，进行查找。输入test2。
  • 7.持续走，打印fn.toString()，先找到fn，并没有toString，再沿着__proto__这条链向上查找，找到0x234，还是没有找到，再沿着__proto__这条链向上查找，来到0x345的Object原型对象，找到了toString属性，打印[object Object]。
  • 8.最初一步，fn.test3()，先找到fn，并没有toString，再沿着__proto__这条链向上查找，找到0x234，还是没有找到，再沿着__proto__这条链向上查找，来到0x345的Object原型对象，还是没有找到，再沿着__proto__这条链向上查找，但此时的__proto__为null。
  • 说到这里，咱们再来聊一个状况。
  • 如果是fn.test3，到Object的__proto__隐式原型为null，那到最止境了，找不到怎么办呢？会报错？还是返回null？
  • 其实都不是，是undefined。
  • 所以fn.test3输入undefined，但你fn.test3()，undefined()执行，把undefined当做函数执行，那不得报错。

打完出工。

⭐倡议跟着以上剖析，本人把图画进去，程序员的入手能力很重要（如果切实懒，再关上一个窗口放把下面的图，一边看图一边看剖析），如果图、剖析不联合，有可能无奈GET到点哦 ~

看完临时还隐隐约约，请重复看以上剖析。

如果临时没工夫，倡议珍藏，等有工夫缓缓看。

PS：
1. Object.prototype.__proto__从上图得悉，尽管Object的原型曾经是最底层了，但它也是有__proto__，只不过值为null，那其实从某种角度来说，它也是实例对象，因为有__proto__属性就是实例对象。
2. 最小的孩子为null。
3.对于Object相干常识：
Object在一开始就有一个原型对象0x345，object的函数对象和实例对象都指向了原型对象；的确，不论是我Object的实例对象0x234还是别的函数fn都最终指向了我0x345。
同时object的实例0x234对象也是别的函数的prototype默认指向的一个object空对象。（请联合以上图，倡议关上一个窗口而后把图利落过来，一一对应这些0x某某某，是很清晰明了的）

3.2 再来一条？（易出错）

请输入以下程序执行的后果。

function Fn() {    this.test1 = function () {      console.log('test1()')    }}console.log(Fn.prototype) // {constructor: ƒ}Fn.prototype.test2 = function () {    console.log('test2()')}console.log(Fn.prototype) // {test2: ƒ, constructor: ƒ}

其实下面输入的答案是错的。

啊？

正确答案如下：看图

能够看到开展前，并没有test2（下面的答案是对的），但如果开展后，第一个打印却又有test2函数。

来，请听我剖析一波。

  • 第一个输入Fn.prototype开展有test2这个属性，但没有test2的本质内容。
  • JS申明的变量都会提前，所以这里prototype在一开始就晓得有个叫test2的属性的。
  • 然而理论的内容prototype不晓得，只有当Fn.prototype.test2 = function () {}执行实现才晓得。能够在增加原型后，打印输出再看一次prototype。
  • 会发现test2的样子和没增加原型不一样了。此时test2正式作为函数退出了prototype中。
  • 是开始的时候变量申明提前造成的。即一开始就有test2存在了。

3.3 拜访一个对象属性时，原型链的内心世界

  • 拜访一个对象的属性时：

    • 先在本身属性中查找，找到返回
    • 如果没有, 再沿着__proto__这条链向上查找, 找到返回
    • 如果最终没找到, 返回undefined
  • 原型链的别名：隐式原型链
  • 其实从下面的例子得悉，每次拜访对象属性，其实都会去寻找__proto__隐式原型链下来找，所以原型链被人起了别名叫隐式原型链。
  • 小误区：var fn = new Fn()这段代码的fn，这个是不是也在原型链中找？
  • 不是，它是在作用域里，变量查找是在作用域中找的；原型链查找的是对象的属性。
  • 原型链的作用：查找对象的属性(办法)
都看到这了，再保持保持就完结了（前面更精彩，后面那段剖析算啥，前面才是重头戏）

3.4 构造函数/原型/实体对象的关系(图解一)

var o1 = new Object()var o2 = {}

面试官：这段代码执行完，栈堆空间是怎么的？

  • 首先：o1、o2都是Object构造函数的实例对象，那实例对象必然有__proto__属性。
  • 其次：实例对象的__proto__隐式原型属性指向构造函数显式原型属性的值。
  • 最终：能够看到图中o1、o2的__proto__属性与Object的prototype都指向同一个值Object.prototype

3.5 构造函数/原型/实体对象的关系(图解二)

面试官：置信我，最初一道了。（说进去你可能不信）

最初一道咱们就轻松一点，请画出function Foo(){ }原型链。

间接上图。

⭐请容许我再多啰嗦两句：

  • 能够看到Foo函数有两条线，一条是function Foo()，还有一条是__proto__。
  • 第一条线为什么会存在？
  • 1.function Foo()它是一个构造函数，这没问题吧，在下面2.1 每个函数function都有一个prototype，即显式原型(属性) 一开始咱们就讲到了，所以天然有这条线存在。
  • 构造函数有显式原型属性prototype。
  • 第二条线为什么会存在呢？
  • 2.看到了图中第二条线有__proto__这个属性，谁有这个属性，实例对象吧，啥，你不是说function Foo()是构造函数吗？当初又说是实例对象？
  • 别急，function Foo(){ }，其实是一个省略的写法，它还能够写成var Foo = new Function()，这种写法是相等的，那我这样一写，Foo岂不是是Function的实例对象，那也很天然有了第二条线是__proto__。
  • 透过实质去看问题，将迎刃而解。
  • 换句话说：所有的函数对象都有隐式、显式原型属性；隐式原型属性指向大写Function的显式原型属性。（你怎么不早说.....当初这不是说了嘛）
  • 3.Foo的__proto__和function Function的显式原型prototype都指向了Function.prototype。
  • Foo是Function构造函数new进去的吧，Foo是实例对象；function Function是构造函数，构造函数有prototype不过分吧。所以有了__proto__、function Function()都指向Function.prototype这条线，再次验证下面的2.3 对象的隐式原型的值为其对应构造函数的显式原型的值。（留神联合上图）
  • 4.有个奇怪的景象：Function的显式、隐式原型都指向本人？

  • 有隐式原型，那就是实例对象；有prototype显式原型，那就是构造函数。
  • 阐明Function，也是本人new进去的，即：Function = new Function（这个其实就是先有鸡，还是先有蛋的问题）
  • 只有这样能力说显著式、隐式原型都相等，别的函数是没有这个特点的，如：下面的var Foo = new Function()，Foo分了两条线，显式原型一条、隐式原型另一条。
  • 只有一个显式、隐式原型属性都是本人的，就是Function。（⭐画重点，面试要考的）
  • 也就是说：任何函数创立都是new Function进去的，Function本人也不例外。
  • 5.函数的显式原型是new Object。

  • 解释一下：

    • 函数是由Function生的，你本人的函数它的__proto__隐式原型指向它父亲，也就是Function的prototype显式原型。
    • Function惟一不同的就是它的__proto__指向它本人。
    • 也就是说Function.__proto__找不到它的父亲了（这个很要害）
    • 然而Function的prototype在Function创立后就存在了。
    • Function.prototype是一个对象，是对象，所以它的__proto__当然指向的是Object。
  • 6.为什么会有Object的__proto__指向Function.prototype这条线？

  • 隐式原型怎么有的？（构造函数的显式原型给的）
  • Object怎么来的？（其实Object也是new Function进去的，哈哈哈）
  • 又因为Object是Function的实例对象。线是从Object的__proto__指向Function的。
  • 所有Function都是new Function，所以Function才是这原型链的胁从。
  • 能够看到下图function Object()的隐式原型指向Function的显式原型，所有对象函数都是Function创立进去的。
  • 好，大家不是说所有皆对象吗？那你这什么都是Function创立的，不是应该所有皆函数吗？
  • 是啊，函数是最底层的，函数能够叫函数对象，函数只是对象的一种非凡示意，所以所有皆对象。这里有一篇不服，老湿说的万物皆对象，你也信？
  • 7.所有函数的__proto__都是一样的。因为都是new Function产生的。
  • new Function显式原型是不会变的，那实例对象的__proto__隐式原型指向着我的显式原型prototype，那大家都是我创立的，我不会变，天然大家也不会变。
聊一聊所有函数的__proto__都是一样的
1. 其实就是两条路：函数能够看做是构造函数，这时走的是object，这条显式原型链；
2. 构造函数的显式原型链用prototype走，这条路和他本人的所有实例的__proto__关联。
3. 另一条路，函数也能够看做是Function的实例，这时走的是Function的这条隐式原型链，用本人的__proto__走。
4. 此时所有函数都是一个妈生的，就是new Function()失去的。而Function自身也是函数，所以也应该合乎Function通过new Function()失去。
5. 这样推导出必须满足Function由new Function()失去，即Function.__proto__ === Function.prototype
6. 艰深的讲就是：所有鸡都是鸡妈生的，而且鸡妈也是鸡，所以鸡妈也是鸡妈生的。
鸡(fn)有本人的prototype，这只鸡(fn)其实又是鸡妈生的，所以有__proto__

3.6 原型继承

构造函数的实例对象主动领有构造函数原型对象的属性（办法）

利用的就是原型链。

原型上的属性办法就是为了给实例对象用的，也就是它的孩子，谁创立了我，我就给谁用。

四、面试

当初轻易问你几道题，应该能对答如流了吧！

Are You OK？

4.1 Object.prototype.__proto__ 值为啥？

：null。最小的孩子为null。

Object的原型对象才是原型链的止境。

4.2 什么的显式原型、隐式原型都指向它本人？

：Function。

显式原型Function是构造函数；隐式原型Function也是实例对象。

要是你能给面试官再画上【3.5 构造函数/原型/实体对象的关系(图解二)】这张图，那今天来下班。

4.3 任何函数都是new Function创立的？

：是的，甚至Function它本人也不例外。

Function.__proto__ === Function.prototype

看，所有的都指向了Function的显式原型属性。

不太明确的童鞋能够再看看【3.5 构造函数/原型/实体对象的关系(图解二)】这张图。

好，大家不是说所有皆对象吗？那你这什么都是Function创立的，不是应该所有皆函数吗？

是啊，无论是内置函数、自定义函数、object都是通过new Function进去的，函数是最底层的，函数能够叫函数对象，函数只是对象的一种非凡示意，所以所有皆对象。这里有一篇不服，老湿说的万物皆对象，你也信？

4.4 Function的显式原型是不是都是new Object进去的？

：是的。

  • Function.prototype.__proto__ === Object.prototype
  • 函数是由Function生的，你本人的函数它的__proto__隐式原型指向它父亲，也就是Function的prototype显式原型。
  • Function惟一不同的就是它的__proto__指向它本人。
  • 也就是说Function.__proto__找不到它的父亲了（这个很要害）
  • 然而Function的prototype在Function创立后就存在了。（A = B，必定是B先产生才有了A）
  • Function.prototype是一个对象，是对象，所以它的__proto__当然指向的是Object。

4.5 所有的函数的__proto__都是一样的？

：是的。

因为所有的函数都是通过new Function进去的。

new Function的隐式原型和Function的显式原型相等。（隐式是实例，谁赋值给它的，构造函数的显式原型）

Function是不会变的。

所以所有的函数的__proto__都是一样的。

不太明确的童鞋能够再看看【3.5 构造函数/原型/实体对象的关系(图解二)】最初的总结。

4.6 所有函数的显式原型指向对象默认是空object实例对象？

：并不是。

console.log(Fn.prototype instanceof Object) // trueconsole.log(Object.prototype instanceof Object) // falseconsole.log(Function.prototype instanceof Object) // true

Object除外。Object内置很多属性。

最初

想起有一次加班的时候，一个开发五年的大佬再向我解说本人的代码的时候，说到hasOwnPrototype()这个办法的时候，说这个办法是for in遍历对象的时候VS Code主动生成的hasOwnPrototype，如下图：

大佬说我也不晓得这个办法是干嘛的，我看他人都有加，最好还是加上吧。

也是笑了笑，其实就是为了谨严，确保我这个对象的属性都是自定义增加的。

很多开发了很多年的大佬，说到底层原理难堪的摸了摸头。

不晓得，不明了，不重要，重要的是不懂就要学，写了不止八小时，好几天拼凑起来的文章。

如果对您有帮忙，你的点赞是我后退的润滑剂。

以往举荐

尤大大说我的代码全副不加分号

老湿说的万物皆对象，你也信？

Vue-Cli3搭建组件库

Vue实现动静路由（和面试官吹我的项目亮点）

我的项目中你不晓得的Axios骚操作（手写外围原理、兼容性）

VuePress搭建我的项目组件文档

koa2+vue+nginx部署

vue-typescript-admin-template后盾管理系统

原文链接

https://juejin.cn/post/7010942653915201543/