全栈工程师修炼指南
熊燚(四火)
Oracle 首席软件工程师
32206 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 46 讲
全栈回顾 (1讲)
加餐 (1讲)
全栈工程师修炼指南
15
15
1.0x
00:00/00:00
登录|注册

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

在JavaScript中通过在不同实现类中定义同名的方法实现多态
同样的接口有着不同的实现
构造继承
原型链继承
一个对象或类能够自动保持另一个对象或类的实现的一种机制
将数据和方法绑定起来,对外提供方法,改变对象状态的机制
限制对对象内部组件直接访问的机制
通过接口抽象将具体实现包装并隐藏起来的方法
instanceof运算符的实现和对象原型的关系
静态语言和动态语言的介绍
严格模式(Strict Mode)
ES6的系统学习
函数成为一等公民
使用new关键字创建对象
JavaScript中对象创建的特点
多态
继承
封装
面向对象编程能力对于后端开发和前端开发都很重要
面向对象是前端工程师的修养之一
JavaScript的设计和编程能力
扩展阅读
对象创建
面向对象的三大特征
重剑无锋,大巧不工
JavaScript面向对象

该思维导图由 AI 生成,仅供参考

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

1. 封装

在面向对象编程中,封装(Encapsulation)说的是一种通过接口抽象将具体实现包装并隐藏起来的方法。具体来说,封装的机制包括两大部分:
限制对对象内部组件直接访问的机制;
将数据和方法绑定起来,对外提供方法,从而改变对象状态的机制。
在 Java 中,在类中通过 private 或 public 这样的修饰符,能够实现对对象属性或方法不同级别的访问权限控制。但是,在 JavaScript 中并没有这样的关键字,但是,通过一点小的技巧,就能让 JavaScript 代码支持封装。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

JavaScript面向对象编程是前端工程师必备的技能之一。本文从封装、继承和多态三个方面介绍了JavaScript面向对象的基本知识和技巧。在封装方面,通过闭包实现了私有属性的封装,并对闭包和纯函数进行了比较。在继承方面,介绍了原型链继承和构造继承的实现方式,并指出了它们的优缺点。在多态方面,强调了JavaScript的灵活性,通过在不同实现类中定义同名方法实现了多态的效果。文章通过实例和代码演示,深入浅出地介绍了JavaScript面向对象编程的相关知识,对于提升读者的编码能力和设计能力具有一定的指导意义。 文章还介绍了JavaScript中对象的创建方式,强调了JavaScript与静态语言在对象创建上的不同之处,以及函数成为一等公民的特性。通过对JavaScript中函数的独立存在、作为参数、变量或返回值在程序中传递的解释,展示了JavaScript中函数的灵活性和独特之处。此外,文章还提到了严格模式的使用和对静态语言和动态语言的对比,为读者提供了扩展阅读的建议。 总之,本文全面介绍了JavaScript面向对象编程的基本知识和技巧,以及JavaScript中函数成为一等公民的特性,对于读者快速了解JavaScript的核心概念和特点具有重要意义。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《全栈工程师修炼指南》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(11)

  • 最新
  • 精选
  • 咕叽咕叽
    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
    2
  • 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
    2
    1
  • 杨越
    c语言不就是函数也能成为一等公民嘛,为啥说这种现象在静态语言中很难见到

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

    2019-10-16
  • 许童童
    老师你好,问个问题,对象继承是什么,有相关的资料可以看一下吗?

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

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

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

    2019-10-14
  • Geek_74d3ac
    说实话当 es6 支持 class 关键字之后,我觉得没有必要要求每个人都去理解以前那些奇奇怪怪的实现。 这有种茴字有多少写法的意思。 正如老师在其他章节所说,我们应该理解面向对象设计和思想的本质,而不是以知道,用原本残缺的js语法有多少种方式模拟继承实现而沾沾自喜。
    2020-09-13
    9
  • Paradise丶朽木
    Javascript真是一门神奇的语言,🤐 https://stackoverflow.com/questions/7202157/why-does-return-the-string-10
    2019-10-14
    1
  • 再见陛下
    那么extends关键字实现的是什么继承方式呢?原型链继承还是构造继承
    2020-09-23
  • 靠人品去赢
    这个关于封装的例子,是不是可以认为是顺序执行的锅,都实例化结果你修改prototype,破坏了原型链,结果弄得谁都不认识?
    2019-10-14
  • tt
    “因为 Child 的原型在 c 生成之后发生了破坏并重建,因此无论 Base 还是 Child,都已经和 c 没有关联了。” 我对这句话的理解是:因为JavaScript的继承是继续对象的,那么当原型引用的对象或者说原型对象重建后,Base或Child引用的对象已经无效了,形成了一个类似于dangling指针的东西。
    2019-10-14
收起评论
显示
设置
留言
11
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部