重学前端
程劭非（winter）
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后，你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起，重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一：JavaScript (15讲)
JavaScript类型：关于类型，有哪些你不知道的细节？
JavaScript对象：面向对象还是基于对象？
JavaScript对象：我们真的需要模拟类吗？
JavaScript对象：你知道全部的对象分类吗？
JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？
JavaScript执行（二）：闭包和执行上下文到底是怎么回事？
JavaScript执行（三）：你知道现在有多少种函数吗？
JavaScript执行（四）：try里面放return，finally还会执行吗？
JavaScript词法：为什么12.toString会报错？
（小实验）理解编译原理：一个四则运算的解释器
JavaScript语法（预备篇）：到底要不要写分号呢？
JavaScript语法（一）：在script标签写export为什么会抛错？
JavaScript语法（二）：你知道哪些JavaScript语句？
JavaScript语法（三）：什么是表达式语句？
JavaScript语法（四）：新加入的**运算符，哪里有些不一样呢？
模块二：HTML和CSS (16讲)
HTML语义：div和span不是够用了吗？
HTML语义：如何运用语义类标签来呈现Wiki网页？
CSS语法：除了属性和选择器，你还需要知道这些带@的规则
HTML元信息类标签：你知道head里一共能写哪几种标签吗？
CSS 选择器：如何选中svg里的a元素？
CSS选择器：伪元素是怎么回事儿？
HTML链接：除了a标签，还有哪些标签叫链接？
CSS排版：从毕升开始，我们就开始用正常流了
HTML替换型元素：为什么link一个CSS要用href，而引入js要用src呢？
HTML小实验：用代码分析HTML标准
CSS Flex排版：为什么垂直居中这么难？
CSS动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？
HTML语言：DTD到底是什么？
CSS渲染：CSS是如何绘制颜色的？
CSS小实验：动手做，用代码挖掘CSS属性
HTML·ARIA：可访问性是只给盲人用的特性么？
模块三：浏览器实现原理与API (9讲)
浏览器：一个浏览器是如何工作的？（阶段一）
浏览器：一个浏览器是如何工作的？（阶段二）
浏览器：一个浏览器是如何工作的（阶段三）
浏览器：一个浏览器是如何工作的？（阶段四）
浏览器：一个浏览器是如何工作的？（阶段五）
浏览器DOM：你知道HTML的节点有哪几种吗？
浏览器CSSOM：如何获取一个元素的准确位置
浏览器事件：为什么会有捕获过程和冒泡过程？
浏览器API（小实验）：动手整理全部API
模块四：前端综合应用 (5讲)
性能：前端的性能到底对业务数据有多大的影响？
工具链：什么样的工具链才能提升团队效率？
持续集成：几十个前端一起工作，如何保证工作质量？
搭建系统：大量的低价值需求应该如何应对？
前端架构：前端架构有哪些核心问题？
特别加餐 (9讲)
新年彩蛋 | 2019，有哪些前端技术值得关注？
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {}，两种写法有什么区别吗？
答疑加餐 | 学了这么多前端的“小众”知识，到底对我有什么帮助？
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑（一）：前端代码单元测试怎么做？
期末答疑（二）：前端架构中，每个逻辑页面如何可以做到独立发布呢？
加餐 | 一个前端工程师到底需要掌握哪些技能？
尾声 (1讲)
尾声 | 长风破浪会有时，直挂云帆济沧海
重学前端
登录|注册

JavaScript对象：我们真的需要模拟类吗？

winter 2019-01-31
早期的 JavaScript 程序员一般都有过使用 JavaScript“模拟面向对象”的经历。
在上一篇文章我们已经讲到，JavaScript 本身就是面向对象的，它并不需要模拟，只是它实现面向对象的方式和主流的流派不太一样，所以才让很多人产生了误会。
那么，随着我们理解的思路继续深入，这些“模拟面向对象”，实际上做的事情就是“模拟基于类的面向对象”。
尽管我认为，“类”并非面向对象的全部，但我们不应该责备社区出现这样的方案，事实上，因为一些公司的政治原因，JavaScript 推出之时，管理层就要求它去模仿 Java。
所以，JavaScript 创始人 Brendan Eich 在“原型运行时”的基础上引入了 new、this 等语言特性，使之“看起来语法更像 Java”，而 Java 正是基于类的面向对象的代表语言之一。
但是 JavaScript 这样的半吊子模拟，缺少了继承等关键特性，导致大家试图对它进行修补，进而产生了种种互不相容的解决方案。
庆幸的是，从 ES6 开始，JavaScript 提供了 class 关键字来定义类，尽管，这样的方案仍然是基于原型运行时系统的模拟，但是它修正了之前的一些常见的“坑”，统一了社区的方案，这对语言的发展有着非常大的好处。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》，如需阅读全部文章，
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(89)

  • 浩明啦 置顶
    这些知识真的不止这个价格了， 感谢老师
    2019-01-31
    1
    92
  • Youngwell
    感觉是像在听天书，前端工作快三年了，悲催了
    2019-01-31
    1
    105
  • ashen1129
    本篇厘清了一些我对面向对象的理解误区，说明了“基于类”和“基于原型”作为两种编程范式的区别，感谢。

    不过感觉本篇在写的时候有一些地方讲的不够严谨：

    1. [[class]]和Symbol.toStringTag实质上是控制的“ the creation of the default string description of an object”，但举例中使用了一个o.toString()来讲述，感觉容易造成误解。

    2.在讲解ES6中的类时，文中指出“类中定义的方法和属性则会被写在原型对象之上”，事实上一般数据属性写在对象上，而访问器属性和方法才是写在原型对象之上的。

    3.class和extends实质上是作为语法糖，统一了JS程序员对基于类的面向对象的模拟，但感觉文中讲的不是很清楚。

    以上是一些个人看法，如有不对的地方欢迎winter老师指正。
    2019-02-01
    63
  • 简单
    老师，我听了几遍为什么觉得什么都不懂，越听越复杂，不理解也记不住😂
    2019-02-14
    27
  • 乐亦栗
    有像我一样平常根本不用面向对象写代码的吗……
    2019-02-27
    4
    24
  • 来碗绿豆汤
    如果说运行时还是基于prototype的，那是不是可以理解为class其实是个语法糖，它最终还是被翻译成功prototype形式来执行？或者说prototype形式写的代码执行起来更高效。
    2019-02-01
    22
  • Nina.
    winter的文章很适合反复去听，每次都有新的领悟。
    今年毕业啦，选择了前端，去实习时有接触到winter所说的知识，但是我只能略懂，单词我懂，哈哈。
    虽然现在还是前端渣渣，但是我相信，通过自己的努力，一定可以成为大神级的程序媛，相信我嘛~哈哈哈
    2019-05-17
    14
  • ttys000
    老师对贺老反对'class fileds'持什么看法？虽然听了两次贺老的演讲，仍然还是有点没搞明白。链接：https://github.com/hax/js-class-fields-chinese-discussion
    2019-01-31
    11
  • 胡永
    这篇文章读一遍有一遍新的体会，厉害了
    2019-02-19
    6
  • Rickyshin
    平时用react的话，class还是比较多的，那么想问一下，现在的react不推荐写constructer，而是推荐使用箭头函数直接写方法，是不是constructer会在未来变的不是那么重要呢
    2019-01-31
    3
    5
  • 阿成
    讲得很好，今天是不是因为放假了，人好像有点少...平时写代码，基本上没写过class，都是function，体积大了就拆成小的...可能还是没遇到复杂的场景吧...而且vue等框架本身就解决了一定的复杂度
    2019-01-31
    5
  • 羲
    winter老师，有一些浏览器对es6语法部分不兼容，一般开发中依旧用新的es6语法，然后找插件转换成浏览器支持的语法，想问下，你对这种做法怎么看？这样做是不是有点兜圈子了，直接用旧语法也可以写，但又有些想尝试用新的语法

    作者回复: 我比较支持这个做法，尽早使用新语法，可以享受它们带来的好处，也可以让团队始终保持技术领先。

    当然了，少数情况下，没法完美翻译，我就不建议急着用了。

    2019-02-13
    4
  • Jasmin
    java工程师转过来的前端 很容易理解class extends 相反 基于原型的继承 function神马的 一直不能很好的理解....
    2019-04-25
    1
    3
  • 王小宏music
    有些东西，真的是，工作好几年可能都摸不透的，高手跟大牛之间，差距就是在于理解的通透性！
    2019-03-20
    3
  • 辉子
    所以为什么typescript火起来了，是ES6的超集，也对Java后端开发者更友好了。
    2019-02-02
    3
  • dearfat
    感谢winter，总之就是通透，这个境界太难了
    2019-02-02
    3
  • 37°C^boy
    mvvm，class
    utils ， function
    2019-01-31
    3
  • 石
    let和var的应用场景区分，老师可以提炼下本质吗，各位朋友平时let用的多吗
    2019-01-31
    1
    3
  • 让时间说真话
    在es6里面使用class，extends关键字实现面向对象编程，使开发者更容易理解类的继承。本篇从es5之前版本讲起过度到es6总体逻辑很清楚。
    2019-02-11
    2
  • 莲
    写class多，抽象化以后，用class 看着更规整得多，易读性也更好

    给微信小程序写的第一个拖拽排序的插件就是class写的，new Sortable就完事了
    2019-02-01
    2
收起评论
89
下载
客户端
返回
顶部