V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
WangLiCha
V2EX  ›  程序员

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

  •  1
     
  •   WangLiCha · 2022-05-05 18:05:09 +08:00 · 5692 次点击
    这是一个创建于 924 天前的主题,其中的信息可能已经有所发展或是发生改变。
    自学的前端做了些东西,现在比较习惯用更接近传统面向对象语言一点的 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
    如果是 前端框架开发、工具链开发,这个还是挺有用的。

    如果是普通业务开发,应该用不上。
    shuimugan
        16
    shuimugan  
       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
    DOLLOR
        46
    DOLLOR  
       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 ,本站似乎已经有位猛士已经这么操作了
    shanejix
        53
    shanejix  
       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
    基本用不到但必须知道。
    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   ·   实用小工具   ·   1269 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 18:12 · PVG 02:12 · LAX 10:12 · JFK 13:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.