多数人在学习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,讲解这些特性在其中的应用。