重学前端
程劭非(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-29
你好,我是 winter。
与其它的语言相比,JavaScript 中的“对象”总是显得不那么合群。
一些新人在学习 JavaScript 面向对象时,往往也会有疑惑:
为什么 JavaScript(直到 ES6)有对象的概念,但是却没有像其他的语言那样,有类的概念呢;
为什么在 JavaScript 对象里可以自由添加属性,而其他的语言却不能呢?
甚至,在一些争论中,有人强调:JavaScript 并非“面向对象的语言”,而是“基于对象的语言”。这个说法一度流传甚广,而事实上,我至今遇到的持有这一说法的人中,无一能够回答“如何定义面向对象和基于对象”这个问题。
实际上,基于对象和面向对象两个形容词都出现在了 JavaScript 标准的各个版本当中。
我们可以先看看 JavaScript 标准对基于对象的定义,这个定义的具体内容是:“语言和宿主的基础设施由对象来提供,并且 JavaScript 程序即是一系列互相通讯的对象集合”。
这里的意思根本不是表达弱化的面向对象的意思,反而是表达对象对于语言的重要性。
那么,在本篇文章中,我会尝试让你去理解面向对象和 JavaScript 中的面向对象究竟是什么。

什么是面向对象?

我们先来说说什么是对象,因为翻译的原因,中文语境下我们很难理解“对象”的真正含义。事实上,Object(对象)在英文中,是一切事物的总称,这和面向对象编程的抽象思维有互通之处。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(61)

  • 风清不扬
    php 是世界上最好的編程語言
    2019-01-29
    1
    73
  • 37°C^boy
    这篇讲的思路太好了,追本溯源,娓娓道来。在这里不光能学到知识活着重温知识,还有关于学习和讲授的方法lun
    2019-01-29
    57
  • 好像winter老师没有回答过同学的提问,是我没看见吗?
    2019-01-30
    1
    35
  • hhk
    关键点在于是否可以在运行时动态改变对象

    结合文章通篇看下来,觉得 JS 的 OO 和他基于类的 OO 不同之处,在于 JS 可以在运行时修改对象,而 class based 的类只能预先全部定义好,我们并不能在运行时动态修改类。在我理解来说,条条大路通罗马,面向对象是罗马,class based 是一条路,prototype based 是另一条路。而且 Symbol 的出现,暴露出了许多内置接口,让 JS 又在这条路上走了更远一些。(以前上学背面向对象的三个特征,封装,继承,多态,现在看一下突然觉得很对。。。

    像我这种年轻一点的前端,很可能就只是相对熟悉 JS 而已,对于其他语言更多都是道听途说,计算机基础也比较薄弱,所以用来比较其实比较难。
    只知道 class based 的大概有 Java,C++, C#, Python

    另外,好奇 Symbol 是怎么实现的,希望老师以后能大概讲讲啦。暂时只想到这些,其他的还在消化
    2019-01-30
    26
  • 张汉桂-东莞
    var o = { get a() { return 1 } };
        console.log(o.a); // 1

    看到这段我就感到值了。我目前在用layui框架,根据layui文档的描述,只有执行var form = layui.form;这一句时才会下载form.js这个文件,我一直没能理解。这篇文章解除了我的疑惑,原来调用getter时可以不写括号()。谢谢老师!
    2019-01-31
    3
    23
  • bitmxy
    JS的設計者原本是個Lisp程序員而且不怎麼喜歡Java面向對象,所以採用了原型。在當時基於原型比基於類的做法要靈活很多。
    2019-01-29
    1
    19
  • 王小宏music
    var o = { get a() { return 1 } }
    console.log(o.a); // 1
    肯定有同学对这里有疑问,解释一下吧, 这里边应用到了ES6的getter,setter属性, 为啥o.a,没写小括号呢? 因为每次访问get,函数返回为1,作为一个value返回的,而非Obj中,调用某个方法,所以才没写成Obj.fun()的方式, 另外 老师下边有一句总结,很容易遗漏 ,每次访问,访问器属性,都会执行get,set方法
    2019-03-19
    12
  • _(:з」∠)_
    太难了(눈_눈)
    完全没看懂面向对象,有没有更加数学一点更加精确一点的定义啊。
    ( •̥́ ˍ •̀ू )
    2019-02-02
    12
  • mone
    请问“运行时”是指什么?一开始我以为是指“程序执行的时候”这一时间状态,但是在正文倒数第三段又有“但是 JavaScript 提供了完全运行时的对象系统,这使得它可以模仿多数面向对象编程范式”这一句,这里的“完全运行时”是什么意思?我上网查了一下,好像没有比较符合的解析。
    2019-02-12
    2
    10
  • 庖丁
    我们应该在理解其设计思想的基础上充分挖掘它的能力,而不是机械地模仿其它语言。
    2019-01-29
    9
  • 如斯
    有个疑惑哈,讲道理symbolObj对象也是对象。也可以调用symbolObj.toString方法( symbolObj.toString() // "Symbol(a)" )。
    但为什么会 symbolObj+'' 会报错呢。
    Uncaught TypeError: Cannot convert a Symbol value to a string at <anonymous>:1:10

    作者回复: 这个问题问的很好,是这个东西在作怪:

    typeof Object(Symbol("a"))[Symbol.toPrimitive]()

    2019-02-13
    2
    8
  • 无羡
    这才理解数值属性和访问器属性!赞
    2019-02-01
    6
  • Error
    老师是否按照犀牛书的顺序讲解😁
    2019-01-30
    5
  • Smallfly
    基于类的面向对象使用的是继承,而 Javascript 更像是组合。
    2019-01-29
    5
  • CC
    我暂时接触的编程有限,JavaScript 是我接触的第一个面向对象语言。

    由于缺少对其他语言的了解,winter 老师在文中的横向对比,感觉能让我更容易理解 JavaScript 的设计思路,以及 Object 这么设计的原因。

    关于ECMAScript 2015 加入的 “类”,其实它并不是 JavaScript 新增的面向对象模式,它主要是语法糖的作用,只是一种特殊的函数,背后仍然是基于原型的设计思路。
    2019-01-29
    5
  • 朋友
    getter setter实际应用的例子有哪些? vue的数据,视图双向绑定算吗?

    作者回复: vue2.0确实用到了这个。

    2019-02-22
    1
    4
  • next_one
    我理解的,重学前端专栏的意义是,从语言使用者的角度,转到语言实现者的角度,来看待语言的发展,通过对比其他语言,来阐述js语言本身的特性。重学的意义在于,多数开发者是语言使用者,而没有从语言实现者的角度,对语言本身有思考。有一种“不识庐山真面目,只缘身在此山中”的感觉。简单说,就是大多数人就是用用,没有想过(或者没有能力)去了解语言本身的来龙去脉。
    2019-10-09
    2
  • cnzhujie
    个人理解:面向对象就是万物皆为类,离开了类就活不了;比如Java里面,就算只写个main函数也要用class包裹起来。而基于对象说的是这门语言可以使用类和对象,但不使用类和对象也照样玩的转,比如c++、php、js。

    作者回复: 不是的,基于类的面相对象只是一个派系。

    2019-04-04
    2
  • 桂马
    js是一个具有动态性的面向对象的语言,ES2015前主要以“prototype”面向对象编程,ES2015问世后主要以“class”实现面向对象编程,我想super也是借鉴Java的,以后js可能还会有interface,那就更灵活了
    2019-03-09
    2
  • 快乐奔跑
    个人感觉JavaScript基于原型的面向对象设计比Java基于类的面向对象设计灵活
    2019-02-14
    2
收起评论
61
返回
顶部