JavaScript必知的特性(继承)

多数人在学习JavaScript的时候,都是做Web的时候,需要表单验证,或者是一些简单的DOM操作,如同我上篇所讲,处在一个“辅助”的地位。

处在“辅助”地位的JavaScript,我们总是抱着解决问题就行的态度,自然不会关注其过多的特性。那么,今天我们就来聊聊在开发中有哪些特性是我们必须要了解的!

JavaScript的结构

JavaScript分为三个部分

ECMAScript  JavaScript本身的语法

DOM  全称Document Object Model ,针对HTML Document操作的API,例如document.getElementByID

BOM  全称Browser Object Model,针对浏览器Window操作的API,例如window.location

在一般的项目中,多数人会关注DOM操作,所以忽略了JavaScript语法本身的精髓。我们今天重点关注的就是:JavaScript本身语法。

请注意:我们在前端使用JavaScript时,多数是以操作DOM为目的,学习JavaScript语言的精髓,本身就是为了让我们更优雅的“操作DOM”!

由于JS的每一个特性都包含太多内容,所以我们只能分多篇来讲,今日我们先讲继承!我对于继承的讲解方法会和百度的帖子迥异,但更通俗一些,希望大家看过之后可以秒懂“继承”。

面向对象的三大原则:封装,继承,多态。我们不能脱离其他法则单讲继承,封装是继承的先决条件,多态是继承要达到的目的,三者是纠合在一起的!

1. 封装

封装是对象的表现形式。比如Java中,封装的表现形式是JavaBean,在JavaScript就是Object,通俗点就是{}

我们来看JavaScript的一个简单对象


对象的两个要点:属性和行为, name作为属性,work作为行为,已经满足封装的基本要素,所以我们认定student是一个对象。它的对象就是如此简单。

我们这里多插一个知识点:对象和我们平时讲的JSON,有什么不同呢?

JSON是JavaScript对象标记语言,JSON的作用是数据传输,“数据”具有不可变性,所以JSON只能包含属性,不能有行为。即:JSON中没有任何JavaScript方法!它们的区别就在于有没有包含方法。


要记住JSON和对象的区别,只要我们记住一句绕口令即可:JSON一定是JavaScript对象,JavaScript对象不一定是JSON!

2. 继承

所有的JavaScript的对象,在其生成的时候,编译器都会附加给对象一个特殊的属性:prototype,即大家常说的原型。理解原型是理解JavaScript继承的重点。

原型有一个最最最重要的特点: 强单例 。同一类型的对象拥有的原型是一个,比如Array,所有的Array实例的原型只有一个!

下面的代码中,arr1和arr2的prototype指向的是同一个,如果设置arr1的为null,arr2的也就为null了。


我们在看JavaScript的API时,经常看到Array的方法有:push shift slice splice等等,这些方法都是存在Array的prototype中。

我们再来看看,当我们调用一个JavaScript对象方法的时候,它的解析器是如何工作的?

例如调用arr1.push 方法,

1. 解析器会首先遍历“对象本身”的方法,如果找到,则直接调用,否则,继续第二步骤

2. 解析器会查看对象的Prototype对象中是否存在该方法,存在则调用,不存在就抛出Exception

讲到这里,大家应该秒懂“Prototype”是个什么东西了吧! 其实就是给对象附加一个内部对象而已,这个内部对象又是一个单例的。作为单例,相对于对象本身肯定高效率的! 但是也是危险的!!

比如刚才我贱贱的设置arr1的prototype为null,那完蛋了!!整个页面的Array都要出错!如果我这样修改,估计有些不明所以的程序员都要哭了,尼玛浏览器会骂人!


看过以上,请大家记住:每个JavaScript对象都分为两个部分:“本身”和prototype。那么对象的继承也是针对这两个部分展开的。继承的目的是为了扩展,说更通俗点就是,为了给某个对象附加更多的方法。

这时候问题就回归为,如何给JavaScrit对象附加方法?

针对本身附加

上面的student,这时候又来了小明同学,但是小明同学比Aric多了一项技能,会撸呀撸! 要如何实现呢?


jquery的extend的原理就是把一个对象的所有属性和方法附加到另外一个上面!

针对prototype附加

如果上面代码修改为:小明.prototype.lol = func...这样也实现了同样的功能,但是这时候Aric也有了LOL这个功能!

百度上多数讲继承的帖子,都会有如下这样的伪代码, 我们看过以上文章,是不是就明白了为什么! 我曾经看过无数的继承的帖子,一直也不懂prototype是个什么玩意!!

关于继承的使用,这里基本落幕,大家心中都应该有一个初步的印象了。当你懂的事物的原理后,再学习起来应该就更加得心应手了。

3. 多态

面向对象的三大原则之一:多态。多态分为对象多态和方法多态! 这是两个不同的概念。

对象多态

就是我们时常看到的猫狗都属于动物,猫叫是喵喵,狗却是汪汪,这是多态的最直接体现。至于更多实现细节,请大家自行百度。

方法多态

方法多态,就是方法名字相同,但是传入的参数列表不同!这个在Java或者C#中都被我们玩烂了! 在JavaScript中由于没有参数列表,一般都用方法的内部函数Arguments来表述!Arguments是伪Array,里面放的就是当前方法的参数列表!

具体使用过程中,即可通过Arguments中元素的个数来实现方法多态。

很多人都说JavaScript不是面向对象的编程语言,其实是对JavaScript的误解!面向对象的三大原则,JavaScript都能实现!只是实现的方式有些不同,却有异曲同工之妙。


说在最后的话:

JavaScript的继承不像Java那样有明确的语法规则,它是灵活多变的。所以写惯Java这种类型的人员,非常讨厌其语法,我在刚入门时,也是如此。但是在当你掌握了它,它的灵活多变会变成编程中的利器,剑之所指,所向披靡!

希望每一位有心学习JavaScript的程序员,都能理解其继承原理!

接下来,我们会继续讲解JavaScript的其他特性!在讲解这些特性的同时,我会结合其一些知名类库,比如jQuery,讲解这些特性在其中的应用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容