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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容