15 | 重剑无锋,大巧不工:JavaScript面向对象
该思维导图由 AI 生成,仅供参考
1. 封装
- 深入了解
- 翻译
- 解释
- 总结
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-242 - pyhhou1. 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-1621 - 杨越c语言不就是函数也能成为一等公民嘛,为啥说这种现象在静态语言中很难见到
作者回复: 你可以参见 https://en.wikipedia.org/wiki/First-class_function#Language_support ,另外,即便是同样号称“支持”,对于程序员来说的易用程度也大不相同。
2019-10-16 - 许童童老师你好,问个问题,对象继承是什么,有相关的资料可以看一下吗?
作者回复: 其实 JavaScript 本身一直以来就是基于对象的继承的,所谓的 class 关键字只是后来添加的语法糖而已。
2019-10-142 - 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-139
- Paradise丶朽木Javascript真是一门神奇的语言,🤐 https://stackoverflow.com/questions/7202157/why-does-return-the-string-102019-10-141
- 再见陛下那么extends关键字实现的是什么继承方式呢?原型链继承还是构造继承2020-09-23
- 靠人品去赢这个关于封装的例子,是不是可以认为是顺序执行的锅,都实例化结果你修改prototype,破坏了原型链,结果弄得谁都不认识?2019-10-14
- tt“因为 Child 的原型在 c 生成之后发生了破坏并重建,因此无论 Base 还是 Child,都已经和 c 没有关联了。” 我对这句话的理解是:因为JavaScript的继承是继续对象的,那么当原型引用的对象或者说原型对象重建后,Base或Child引用的对象已经无效了,形成了一个类似于dangling指针的东西。2019-10-14