Javascript 的原型和原型链相关的基础知识对实际工作有什么帮助吗 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
WangLiCha
V2EX    程序员

Javascript 的原型和原型链相关的基础知识对实际工作有什么帮助吗

  WangLiCha 2022-05-05 18:05:09 +08:00 6272 次点击
这是一个创建于 1258 天前的主题,其中的信息可能已经有所发展或是发生改变。
自学的前端做了些东西,现在比较习惯用更接近传统面向对象语言一点的 Typescript ,之前学 JS 的原型链的时候费了很大的功夫,有点想知道熟练掌握原型链的话对于面试以外能有什么实际的帮助吗?想请教一下各位可能用 JS 更多一点的 V 友们。
76 条回复    2022-05-07 19:06:15 +08:00
across
    1
across  
   2022-05-05 18:11:18 +08:00 via iPhone
这个不懂没资格做团队开发,谁知道你还有多少坑
Austaras
    2
Austaras  
   2022-05-05 18:16:53 +08:00
没有
WangLiCha
    3
WangLiCha  
OP
   2022-05-05 18:17:28 +08:00
@across 这个是怎么个说法?如果是团队都使用 Typescript 会好些吗?
Puteulanus
    4
Puteulanus  
   2022-05-05 18:19:03 +08:00
完了,被开除开发籍了

新项目应该不会有需要用到的了吧,维护老项目可能遇上手写的
感觉大概知道是怎么回事就行了,真需要用的时候再去查
面试考这个我更倾向于是八股文
liveoppo
    5
liveoppo  
   2022-05-05 18:19:43 +08:00   2
我不是专家,仅供参考:
1 、绝大部分工作都涉及不到原型链;
2 、只要能用其他方法解决问题,就绝对不要用原型链。
seki
    6
seki  
   2022-05-05 18:22:19 +08:00
如果技术栈都是现代的,基本不用考虑原型链的事情

如果一份工作内容里面要熟练掌握原型链才能做,那么可能是技术栈太陈旧或者太偏门了,或者真的是要钻研到很深入的某些领域的。前者的话建议还是别去了,人生苦短。
misdake
    7
misdake  
   2022-05-05 18:31:22 +08:00
如果要深入底层去做团队或者公司的基础设施,那有可能需要。其他情况下需要的可能性挺低的。
rabbbit
    8
rabbbit  
   2022-05-05 18:35:13 +08:00
包之类的可能会用.业务用不着,需要继承也是用 class
debuggerx
    9
debuggerx  
   2022-05-05 18:39:13 +08:00
日常开发毫无用处,谁手写原型链我跟谁急,尤其是上了 TS 之后还用那些奇怪特性,我愿称之为 JS 遗毒。
除了某些老掉牙的项目和库,唯一能想到的情况就是调试某些转译后的 ES5 代码可能会碰到,不过调试 debug 时基本也不太会被这块影响,差不多能看懂就行了。
总的来说,新代码就用新特性写,转译就配好 sourcemap ,找库尽量避免太老的就行
nulIptr
    10
nulIptr  
   2022-05-05 18:41:21 +08:00
二手前端写 react+ts ,别说原型,连 this 都没用过
libook
    11
libook  
   2022-05-05 18:51:30 +08:00   4
做过 7 年 JS 全栈开发,感觉开发中有用,可以为解决问题提供更多思路,但确实用到的频率很低。

原型链不是废弃的特性,反而是核心特性,很多新特性是在原型链基础上设计的,面试的时候能够灵活回答原型链的问题,证明候选人掌握 JS 核心原理,未来解决问题的思路更广。至少我觉得原型链的知识比作用域提升的知识更有实用价值。

JS 中类似的有用但不常用的特性还有不少,比如迭代器(和异步迭代器),很少的情况下需要自己构造迭代器,但在一些场景下自己构造迭代器可以显著降低代码复杂度。
thulof
    12
thulof  
   2022-05-05 19:00:52 +08:00
实现装饰器的时候要用到
SolidZORO
    13
SolidZORO  
   2022-05-05 19:01:12 +08:00 via iPhone
别说原型,你看 react 把 this 都给整没了,就是担心你们用错了。要是真有这样执着原型的公司,你跑还不行吗?
autoxbc
    14
autoxbc  
   2022-05-05 19:02:25 +08:00   5
你故意避开什么,最终就会在什么上吃亏,搞技术不该有短板
hamsterbase
    15
hamsterbase  
   2022-05-05 19:14:00 +08:00
如果是 前端框架开发、工具链开发,这个还是挺有用的。

如果是普通业务开发,应该用不上。
slowgen
    16
slowgen  
   2022-05-05 19:21:04 +08:00
有其它语言实际项目经验( PHP 、Python 、Java )经验,用 Node.js + TypeScript 写了 5 年项目(监控告警、爬虫、文件服务、网关、扫描器),目前代码里没出现过一次 prototype ,仅供参考。
golangLover
    17
golangLover  
   2022-05-05 19:30:49 +08:00 via Android
有任何用处。只是通过面试。js 就是多这种没意义的事
KuroNekoFan
    18
KuroNekoFan  
   2022-05-05 19:31:40 +08:00 via iPhone
基本没有,我都推广 this free
ccyu220
    19
ccyu220  
   2022-05-05 19:35:26 +08:00   3
你让我想起了

var that = this

这玩意估计除了引入都 vue2 项目,之后我从来没用过了
thinkershare
    20
thinkershare  
   2022-05-05 20:14:59 +08:00   1
最快确定一个人是否完整,系统且认真的学习过 Javascript, 而不是将其当作玩具语言, 到处复制粘贴代码. 面试如果招聘前端, 如果原型都无法解释清楚, 肯定会被我淘汰, 因为这个玩意非常简单, 这个都搞不明白, 说明要么智力有问题, 要么根本没花心思在自己使用的工具上. 实际项目手动使用 prototype 非常少, 但它总是在起作用. 编写兼容库的时候, 会通过补全原型来模拟一些原生方法.
TWorldIsNButThis
    21
TWorldIsNButThis  
   2022-05-05 20:30:45 +08:00 via iPhone
纯纯的 bullshit 属于是
lmshl
    22
lmshl  
   2022-05-05 20:37:31 +08:00
随便看看 MDN 脑子里有个印象就行了,不值得深入学习。进化了几亿年才有的这宝贵的大脑空间,用来装原型链多少有点反进化论了。
hunter0122
    23
hunter0122  
   2022-05-05 20:38:02 +08:00
@ccyu220 这句真的是刚学 vue2 时候挠破头都没想通的东西。哈哈哈哈
wenwei1202k
    24
wenwei1202k  
   2022-05-05 20:46:24 +08:00
原型链是 js 的基础内容,现在都有 class 的语法糖了,常规业务代码里别用 prototype ,但是如果要写些抽象工具类库或者类似框架级别就非常有用,你的代码越抽象原型链就越有用,有需要再研究未尝不可,初学的时候不容易感受到这种奇淫巧技的乐趣,typescript 并不是不建议使用 prototype ,而且需要用到的情况太少了
cocong
    25
cocong  
   2022-05-05 21:47:28 +08:00
实际帮助就是你获得了一种实现面向对象的实现方式。像 Lua 没有 class ,但可以用 元表 实现,道理和 原型 差不多。所以说知识都是想通的。就不如数据库可以通过外键,关联其它表,再类比原型,就可以实现数据的继承,起到压缩数据,节省空间的效果。

其实这些基础知识什么的并不难,正所谓“会者不难、难者不会”,多学多动多思考,仅此而已。
Leviathann
    26
Leviathann  
   2022-05-05 22:08:19 +08:00   3
别说 prototype 了
我连 class 和 interface 都不用
只用 type 和函数 /lambda
Rocketer
    27
Rocketer  
   2022-05-05 22:37:24 +08:00 via iPhone   3
私以为,只有花了太多功夫在这些过时概念上的人才会说它有用,目的只是找回心中的那分平衡。

可能用原型链能让代码变得短一些,但这也会降低代码的可读性,在团队开发中会被视为奇技淫巧,不受欢迎。

更何况 Javascript 的奇技淫巧比 Java 少多了,Java 大神在团队里都不敢玩,Javascripter 还炫啥技呢?
irisdev
    28
irisdev  
   2022-05-05 22:46:44 +08:00
用不上,但是还是要知道的
hussar
    29
hussar  
   2022-05-05 23:05:00 +08:00 via iPad
js 继承是不是也用不到,除了 class extends 见到过,其他的…
dcsuibian
    30
dcsuibian  
   2022-05-05 23:19:43 +08:00
工作中根本不用,但你得会。
框架不懂原理也就算了,js 的基础还是得打牢啊。
wisetc
    31
wisetc  
   2022-05-05 23:26:41 +08:00 via iPhone
js 中类的继承底层是原型链,不要想得太复杂,不掌握也能开发,只是不理解 js 的怪异之处。
fstar
    32
fstar  
   2022-05-05 23:29:30 +08:00
有点用啊。掌握了不容易写出错误代码。
问:
const map = {}; 和 const map = Object.assign(null); 哪个是正确的哈希表写法。
AyaseEri
    33
AyaseEri  
   2022-05-05 23:32:22 +08:00
不要求熟练,但至少得知道是咋回事吧。免得碰上极端情况需要人肉 debug babel 后的代码。
vance123
    34
vance123  
   2022-05-05 23:32:23 +08:00 via Android   1
反序列化一个对象的时候,可以通过 setprototype 给它添加上方法。其它地方倒没用到过。
不过 prototype 是 js 的一个基石,你要知道再高级再诡异的用法,都逃不开这些东西。理解语言的边界在哪里还是有好处的
Pastsong
    35
Pastsong  
   2022-05-05 23:34:51 +08:00
原型链用不到但是要懂,是语言核心设计的一部分,属于看你愿不愿意了解 How it works.
Pastsong
    36
Pastsong  
   2022-05-05 23:35:42 +08:00
@fstar 抢答,是 const map = new Map();
ruoxie
    37
ruoxie  
   2022-05-05 23:37:35 +08:00
很久很久以前看 JQ ,EXT JS 等源码会有用
keithwhisper
    38
keithwhisper  
   2022-05-05 23:37:59 +08:00
工程化的项目一般用不上奇技淫巧, 但是需要有能看懂和填坑的能力, 自己组可以控制代码, 但是对第三方的依赖无法控制, 万一被坑到了不至于找不出原因.
adoal
    39
adoal  
   2022-05-06 00:01:27 +08:00 via iPhone   2
OO 大沙文主义终于在 JS 程序员圈也取得了胜利
aristotll
    40
aristotll  
   2022-05-06 00:07:20 +08:00
@Pastsong #36 hhh
jones2000
    41
jones2000  
   2022-05-06 00:16:11 +08:00
没什么用, 只用js基本的语法写, 这样起码下个接手的人能看懂。
agagega
    42
agagega  
   2022-05-06 01:16:50 +08:00 via iPhone
@ccyu220
典中典了属于是
xuanbg
    43
xuanbg  
   2022-05-06 06:59:39 +08:00   2
知道原型链能解决什么问题比掌握原型链更重要。一项语言的特性而已,平常根本用不到,以后能用到的机会无限趋向于 0 的知识,我的选择是:临时抱佛脚,不用坚决不学。
renhou
    44
renhou  
   2022-05-06 07:53:25 +08:00
一般场景用不到,原型链对于大多数人就是为了面试而存在
elboble
    45
elboble  
   2022-05-06 08:47:26 +08:00
个人觉得 ES6 出来后 class 基本可以取代原型链了,当然老人老办法,新人新办法。下面讲得很清楚了。https://es6.ruanyifeng.com/#docs/class-extends
AV1
    46
AV1  
   2022-05-06 09:41:34 +08:00
我写了这么多年 typescript ,除了偶尔写写 angular ,都没写过几个 class 。
至于原型链,我能想到的使用场景,就是偶尔 hack 别人的东西,给别人的 class 加一些方法、polyfill 。

比如在 string 原型上挂一个 encode 方法
const encode = Symbol('encode')
String.prototype[encode] = function(codeName){/*...*/}
然后就可以在字符串上使用 encode 方法
const gbkArrayBuffer = '测试'[encode]('gbk')
wu67
    47
wu67  
   2022-05-06 09:46:06 +08:00
最多就是往 vue 的原型上定义全局变量, 用来方便 this.*****这样全局调用. 如果封装公用库或者 sdk, 还是 class 方便.
charlie21
    48
charlie21  
   2022-05-06 10:27:28 +08:00
理解原理 但不使用
sampdoria
    49
sampdoria  
   2022-05-06 10:45:36 +08:00
说白了,那些不常用的 coding 知识的掌握程度,完全取决于程序员对自己的要求。
你可以选择去学,也可以选择远离它。人的精力有限,没人能面面俱到,这个很正常。选择取决于定位:这门语言,这门技术对你来说是饭碗,还是加菜;你是满足于做做 feature ,还是希望能深入进去,做点大事。
每个人都有自己的答案,你选择不学,没有问题,无非就是失去一些机会,看你能否接受呗

顺便提一句,面试的时候问一些不常用但是很基础的知识点,是非常正常的,跟什么八股无关。人家只是想看看你对自己的要求罢了。如果能选的求职者多,谁不愿意选一个对自己有要求的呢。
zhouyg
    50
zhouyg  
   2022-05-06 10:58:54 +08:00
知道,理解,但工作 100%不要使用
nomagick
    51
nomagick  
   2022-05-06 11:39:26 +08:00
对码农没用,对工程师有用。

如果你发现没用,不好意思老哥还在码农阶段。

咱这还有好多没写过 class 搞不懂 this 的,怎么还能沾沾自喜了,我都替你们捉鸡啊真的
marcong95
    52
marcong95  
   2022-05-06 11:59:54 +08:00   1
原型链确实不是什么很好用的东西,但是不太能理解的是,原型链这种概念真的给你们带来这么大的心智负担吗?似乎有缘还是要看看你们口中的八股到底把原型链这东西玩得多花。。。

建议直接手写 wasm ,本站似乎已经有位猛士已经这么操作了
Rwq8xlHrBAi0ct2w
    53
Rwq8xlHrBAi0ct2w  
   2022-05-06 12:52:53 +08:00 via Android
没有原型的 js 还叫 js 么
yedanten
    54
yedanten  
   2022-05-06 13:14:22 +08:00 via Android
个人见解,对于开发来说,没用,如果你搞安全,可能有那么点用,挖挖 babel 的漏洞,或者尝试修改破解一些 js 库有那么点帮助
wangtian2020
    55
wangtian2020  
   2022-05-06 13:20:04 +08:00
会了原型链就能解释在 vue 中
为什么我挂载在 Vue 对象上的工具属性 能在全局引用
就能理解原型链污染是怎么一回事

但是并没有卵用场景,知其然所以然好玩罢了
bojue
    56
bojue  
   2022-05-06 13:20:29 +08:00
可以用不到,但是你要知道
aguesuka
    57
aguesuka  
   2022-05-06 13:35:17 +08:00
其实标题对于任意语言的常见 trick, 答案都是一样的, 用这门语言, 就绕不开, 但是能别用就不要用, 一定要用的情况控制起来. 另外一些非工程的场景, 比如说 debug, hack 时很有用.
kamal
    58
kamal  
   2022-05-06 14:56:23 +08:00   1
KouShuiYu
    59
KouShuiYu  
   2022-05-06 15:02:38 +08:00
用处不是太大,JS 都模块化了基本上用函数就解决一切了
Lxxyx
    60
Lxxyx  
   2022-05-06 15:08:13 +08:00
日常开发用不着,了解概念有必要,基本上 Class 就能覆盖大部分场景了。

至于那些说不懂原型写不了代码的,是在扯淡。。
darkengine
    61
darkengine  
   2022-05-06 15:13:34 +08:00
撕逼的时候有用,你没掌握原型链骂不过人家
gzxworknb
    62
gzxworknb  
   2022-05-06 15:15:28 +08:00
@ccyu220 太真实啦, 哈哈哈, 我第一次看到这个代码整个人都不好了
anguiao
    63
anguiao  
   2022-05-06 15:48:39 +08:00
@fstar 正确写法是用内置的 Map 对象
vision1900
    64
vision1900  
   2022-05-06 16:19:51 +08:00   1
至少查 MDN 的时候,比如 `reduce`, 它显示的是 `Array.prototype.reduce` 你要知道是为什么

https://developer.mozilla.org/en-US/docs/Web/Javascript/Reference/Global_Objects/Array/reduce
qiumaoyuan
    65
qiumaoyuan  
   2022-05-06 16:28:24 +08:00
ECMAScript 6 有了 class 和 extends 之后比较用不着这玩意。这玩意主要是在 ECMAScript 6 之前用于实现“类继承”的功能。
lisongeee
    66
lisongeee  
   2022-05-06 17:26:59 +08:00
前端的 ui 构建这块其实不太应用”继承“的概念
panlatent
    67
panlatent  
   2022-05-06 17:54:01 +08:00
我觉得学习这个东西花不了太多时间,但不了解容易在你解决疑难杂症的时候花费数倍甚至数十倍的时间
coolzjy
    68
coolzjy  
   2022-05-06 18:14:59 +08:00
ES 2015+ 日常代码直接接触原型和原型链的机会确实越来越少了,面向对象有 class 语法,[].slice.call(arguments) 这种语法也都被 Rest / Spread 操作符替代了,加上 FP 趋势,写几年代码也接触不到原型也挺正常的。
AloneHero
    69
AloneHero  
   2022-05-06 22:11:55 +08:00 via Android
都怎么回事? class 的本质也是原型链啊,就日常开发确实很少用到,但是要想给团队做公共基础库(非工具类库),想把自己做的东西在公司级推广,肯定得考虑好既做好基础功能,又要给别人留够拓展的余地,这就需要非常明白你作为原型链上的一环会如何影响到你的子类实例,你的子类实例又会如何覆盖原型链。而且实际上这个机制挺简单的,没必要避开
yaphets666
    70
yaphets666  
   2022-05-06 23:44:16 +08:00
@ccyu220 小程序有时候会用到,不支持箭头函数的地方
codehz
    71
codehz  
   2022-05-07 06:43:35 +08:00
目前主要的作用是做 monkey patch 或者写 polyfill 原型链虽然说性能不好吧,但总比 Proxy 快
日常开发写的 class 其实在现行 es 标准下还是有些区别的,不仅仅只是一个“语法糖”,不用 class 语法的情况下有些特性是无法实现的最基础的,原型写法无法正确继承 Array, String, Date, Map 等内建类型,也无法继承 HTMLButtonElement 等 Dom 类型导致 CustomElement 无法实现从标准角度来说,它是对原本对象模型的一个完全改进,绝非能说一句语法糖即可概况而保留的原型只是为了维持以往的兼容性
waiaan
    72
waiaan  
   2022-05-07 09:11:47 +08:00
/div>
基本用不到但必须知道。
duan602728596
    73
duan602728596  
   2022-05-07 10:47:27 +08:00
项目里的原型链和面试时候的原型链是两种
devwolf
    74
devwolf  
   2022-05-07 11:08:07 +08:00
目前为止对我的工作没有帮助,但我室友的那边公司里确实有人(大佬)在用(有次我去帮忙改前端的时候瞥到过)。
ming159
    75
ming159  
   2022-05-07 11:29:46 +08:00
普通的写写逻辑你可以不关心原型链,无非就是声明个变量,if-else ,for 循环。
但是,如果你是处在核心研发团队,做框架,并且还提供个其他人用,如果你不懂原型链,那肯定不敢用你,鬼知道你把 “this” 给了谁。
ctrlcoder
    76
ctrlcoder  
   2022-05-07 19:06:15 +08:00
用不用是 一回事,懂不懂是一回事
关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     4849 人在线   最高记录 6679       Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 30ms UTC 09:46 PVG 17:46 LAX 02:46 JFK 05:46
Do have faith in what you're doing.
ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86