全栈工程师修炼指南
熊燚(四火)
Oracle首席软件工程师
立即订阅
2286 人已学习
课程目录
已更新 43 讲 / 共 40 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 从成长角度看,为什么你应该成为全栈工程师?
免费
学习路径 | 怎样成为一名优秀的全栈工程师?
导读 | 如何学习这个专栏?
第一章 网络协议和 Web 接口 (6讲)
01 | 网络互联的昨天、今天和明天:HTTP 协议的演化
02 | 为HTTP穿上盔甲:HTTPS
03 | 换个角度解决问题:服务端推送技术
04 | 工整与自由的风格之争:SOAP和REST
05 | 权衡的艺术:漫谈Web API的设计
06 | 特别放送:北美大厂如何招聘全栈工程师?
第二章 欢迎来到 MVC 的世界 (7讲)
07 | 解耦是永恒的主题:MVC框架的发展
08 | MVC架构解析:模型(Model)篇
09 | MVC架构解析:视图(View)篇
10 | MVC架构解析:控制器(Controller)篇
11 | 剑走偏锋:面向切面编程
12 | 唯有套路得人心:谈谈Java EE的那些模式
13 | 特别放送:选择比努力更重要
第三章 从后端到前端 (7讲)
14 | 别有洞天:从后端到前端
15 | 重剑无锋,大巧不工:JavaScript面向对象
16 | 百花齐放,百家争鸣:前端MVC框架
17 | 不一样的体验:交互设计和页面布局
18 | 千言万语不及一幅画:谈谈数据可视化
19 | 打开潘多拉盒子:JavaScript异步编程
20 | 特别放送:全栈团队的角色构成
第四章 数据持久化 (7讲)
21 | 赫赫有名的双刃剑:缓存(上)
22 | 赫赫有名的双刃剑:缓存(下)
23 | 知其然,知其所以然:数据的持久化和一致性
24 | 尺有所短,寸有所长:CAP和数据存储技术选择
25 | 设计数据持久层(上):理论分析
26 | 设计数据持久层(下):案例介绍
27 | 特别放送:聊一聊代码审查
第五章 寻找最佳实践 (6讲)
28 | Ops三部曲之一:配置管理
29 | Ops三部曲之二:集群部署
30 | Ops三部曲之三:测试和发布
31 | 防人之心不可无:网站安全问题窥视
32 | 和搜索引擎的对话:SEO的原理和基础
33 | 特别放送:聊一聊程序员学英语
第六章 专题 (7讲)
34 | 网站性能优化(上)
35 | 网站性能优化(下)
36 | 全栈开发中的算法(上)
37 | 全栈开发中的算法(下)
38 | 分页的那些事儿
39 | XML、JSON、YAML比较
40 | 全栈衍化:让全栈意味着更多
全栈工程师修炼指南
登录|注册

15 | 重剑无锋,大巧不工:JavaScript面向对象

四火 2019-10-14
你好,我是四火。
JavaScript 的设计和编程能力可以说是前端工程师的修养之一,而 JavaScript 面向对象就是其中的一个重要组成部分。
我相信对于后端开发来说,面向对象的编程能力是一个程序员必须要熟练掌握的基本技能;而对于前端开发,很多项目,甚至在很多知名互联网公司的项目中,很遗憾,这部分都是缺失的,于是我们看到大量的一个一个散落的方法,以及一堆一堆难以理解的全局变量,这对系统的扩展和维护简直是噩梦。
“好的软件质量是设计出来的”,这个设计既包括宏观的架构和组件设计,也包括微观的代码层面的设计。在这一讲中,我们将学习 JavaScript 面向对象的基本知识和技巧,提升代码层面的面向对象设计和编码能力。
首先,我们将通过面向对象的三大特征,结合实例,介绍 JavaScript 面向对象的知识:封装、继承以及多态。

1. 封装

在面向对象编程中,封装(Encapsulation)说的是一种通过接口抽象将具体实现包装并隐藏起来的方法。具体来说,封装的机制包括两大部分:
限制对对象内部组件直接访问的机制;
将数据和方法绑定起来,对外提供方法,从而改变对象状态的机制。
在 Java 中,在类中通过 private 或 public 这样的修饰符,能够实现对对象属性或方法不同级别的访问权限控制。但是,在 JavaScript 中并没有这样的关键字,但是,通过一点小的技巧,就能让 JavaScript 代码支持封装。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《全栈工程师修炼指南》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(9)

  • 咕叽咕叽
    1,维护过基于backbone框架的项目,该框架提供了很多类,比如Backbone.Model,Backbone.Controller,Backbone.View -(MVC)。基于这些类创建对象,采用面向对象的开发方式。好处是:a,复用。 b,把状态封装起来,由方法进行修改,避免多处修改,导致数据状态和UI不一致。
    2,还可以把 原型链继承 和 构造继承组合 起来。
    function Base(name) {
    this.name = name;
    }
    function Child(name) {
    Base.call(this, name); // 第一次调用父类构造函数
    }

    Child.prototype = new Base(); // 第二次调用父类构造函数

    var c = new Child('Life');
    console.log(c.name); // "Life"
    console.log(c instanceof Base); // true

    好处是结合了 原型链继承 和 构造继承 的优点。
    坏处是需要调用两次父类构造函数。如果继承链很长,则开销很大,以2的n次方增长(n是继承链的深度)

    作者回复: 👍

    2019-10-24
    1
  • Paradise丶朽木
    Javascript真是一门神奇的语言,🤐
    https://stackoverflow.com/questions/7202157/why-does-return-the-string-10
    2019-10-14
    1
  • 没带就是没写
    c语言不就是函数也能成为一等公民嘛,为啥说这种现象在静态语言中很难见到

    作者回复: 你可以参见 https://en.wikipedia.org/wiki/First-class_function#Language_support ,另外,即便是同样号称“支持”,对于程序员来说的易用程度也大不相同。

    2019-10-16
  • pyhhou
    1. ES6 以后 JavaScript 提供了 class,因此前端面向对象实现的一些功能都是基于 class 了,有 class 的代码相比于没有 class 的代码会更加直观、易懂

    2. 更为常用的继承方式是组合继承(原型链+构造函数)以及 寄生组合继承

    之所以有组合继承,是因为原型链继承的方式和构造函数继承的方式都会存在一些问题,这里提一个文章当中没详细讲的内容,就是对象寻找某个成员的过程,比如我们要在一个 Book 对象中寻找 name 这个属性,首先会在当前 Book 对象中寻找 name,没找到就会去到 Book 的 prototype,也就是原型中寻找 name,如果还没有,会继续在 Book 的基类对象中寻找 name,然后没有的话会去到 Book 的基类对象的原型中寻找,以此类推。原型其实也是对象,一般多个同类对象会指向同一个原型,在原型链继承的模式中,基类原型里面的属性都是被所有对象共同 shared 的,这里,你可以把原型里的成员对比理解成是 Java 类中的 static 成员:),但是我们并不想这样,我们希望每个对象能有自己唯一的成员,于是有了构造函数继承的方式,这里等同于,对于任意派生类对象,都完完整整 copy 一份基类对象,完全不用原型来继承,但是你又会发现这里其实是有资源浪费的,对于一些 getName() 这样的函数成员,没有必要 copy 多份,因此我们可以将原型链继承的方式和构造函数的方式结合起来,将需要 share 的部分用原型链的方式继承,需要独有的部分用构造函数的方式继承,这也就是组合继承的方式,另外寄生组合继承也是基于组合继承进行一个小小的优化,本质还是一样的


    最后提一个细节的问题,文章中第二个代码块中的 setName 函数中的 name 定义前并没有加 var 或者是其他变量定义符修饰,在正常的函数中,name 会成为全局变量,为什么在这却不是这样的?

    谢谢老师

    作者回复: 因为这个 name 是 Book 的入参:function Book(name),它的优先级更高。如果你在 setName 里面赋值给一个 Book 入参中没有定义的变量,比如 name2,那么它就会成为window.name2,也就是你说的“全局变量”。

    2019-10-16
    1
  • 靠人品去赢
    这个关于封装的例子,是不是可以认为是顺序执行的锅,都实例化结果你修改prototype,破坏了原型链,结果弄得谁都不认识?
    2019-10-14
  • tt
    “因为 Child 的原型在 c 生成之后发生了破坏并重建,因此无论 Base 还是 Child,都已经和 c 没有关联了。”

    我对这句话的理解是:因为JavaScript的继承是继续对象的,那么当原型引用的对象或者说原型对象重建后,Base或Child引用的对象已经无效了,形成了一个类似于dangling指针的东西。
    2019-10-14
  • tt
    记笔记。

    为什么第一个实现了私有变量的代码说是利用了闭包呢?
    请注意,这里的代码并没有使用class关键字,而是使用最原始的function实现了类。

    1、getName和setName任然是函数中的函数。
    虽然这里它们没有被显式地返回,但被挂在了this上,可以通过对象调用它们,和普通函数中直接返回函数是一样的。

    2、挂在this上就是成员函数了。它们记住了外围函数的变量name的值。

    以上两点证明了它们就是闭包。
    2019-10-14
  • 许童童
    老师你好,问个问题,对象继承是什么,有相关的资料可以看一下吗?

    作者回复: 其实 JavaScript 本身一直以来就是基于对象的继承的,所谓的 class 关键字只是后来添加的语法糖而已。

    2019-10-14
    1
  • joker
    面试有问原型链的,老师您能给讲一下不

    作者回复: 可以参阅 MDN 教程 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

    2019-10-14
收起评论
9
返回
顶部