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了。

wx_fmt=png" alt="" style="margin:0px; padding:0px; max-width:100%; height:auto!important">

我们在看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多了一项技能，会撸呀撸！ 要怎样实现呢？

wx_fmt=png" alt="" style="margin:0px; padding:0px; max-width:100%; height:auto!important">

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

针对prototype附加

假设上面代码改动为：小明.prototype.lol = func...这样也实现了相同的功能。可是这时候Aric也有了LOL这个功能。

百度上多数讲继承的帖子。都会有例如以下这种伪代码。 我们看过以上文章。是不是就明确了为什么！ 我以前看过无数的继承的帖子，一直也不懂prototype是个什么玩意！

！

关于继承的使用，这里基本落幕，大家心中都应该有一个初步的印象了。

当你懂的事物的原理后。再学习起来应该就更加得心应手了。

---

3. 多态

面向对象的三大原则之中的一个：多态。多态分为对象多态和方法多态！

这是两个不同的概念。

对象多态

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

方法多态

方法多态，就是方法名字同样，可是传入的參数列表不同。这个在Java或者C#中都被我们玩烂了！ 在JavaScript中因为没有參数列表，一般都用方法的内部函数Arguments来表述！Arguments是伪Array。里面放的就是当前方法的參数列表！

详细使用过程中，就可以通过Arguments中元素的个数来实现方法多态。

---

非常多人都说JavaScript不是面向对象的编程语言。事实上是对JavaScript的误解。面向对象的三大原则，JavaScript都能实现！仅仅是实现的方式有些不同，却有异曲同工之妙。

wx_fmt=png" alt="" style="margin:0px; padding:0px; max-width:100%; height:auto!important">

说在最后的话：

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

---

希望每一位有心学习JavaScript的程序猿，都能理解其继承原理！

接下来，我们会继续解说JavaScript的其它特性！在解说这些特性的同一时候。我会结合其一些知名类库，比方jQuery，解说这些特性在当中的应用。

wxfmt=jpeg" alt="" style="margin:0px; padding:0px; max-width:100%; height:auto!important">