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多了一项技能,会撸呀撸! 要如何实现呢?

16214027_SJXi.jpg

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


针对prototype附加

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


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


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



3. 多态

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

对象多态

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

方法多态

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

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



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

16214027_Wx41.jpg


说在最后的话:

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



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


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

16214027_ssAj.jpg















转载于:https://my.oschina.net/aricchen/blog/546386

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值