JavaScript继承指迷

以下是 廖雪峰老师 JavaScript 教程的笔记 ，这个章节有点大雾，这里记录一下

先硬广 安利一下

小A和小B都是应届毕业生，一起进入了一家互联网公司做前端。半年过去了，小A进步神速，他写的JavaScript代码在组里挑剔的的老员工看来都挺不错：

可读性好，模块化程度高，而且有大量的测试。反观小B，他的代码总是一团糟，还经常搞出莫名其妙的bug。每次做code review时，大家对小B的代码都特别头疼。

年底考核的时候，组长让小A分享一下他入职以来是怎么学习前端并快速成长的，小A不好意思地给大家分享了自己的一点学习心得：

首先，前端工程师必须得熟练掌握HTML、CSS和JavaScript。只懂其中一个或两个不行，必须对这三个都很熟悉，尤其是JS。

很多前端工程师还把对JS的认识停留在用jQuery做网页动画的时代，这个认识早就落后了，现在JS不仅负责前端的所有页面逻辑，还能利用Node开发后端服务。

而JS并没有看上去那么简单，它入门容易精通难，尤其是自己摸索，或者在网上随便搜索一些代码片断，很容易被带进沟里。学JavaScript应该学到精髓，还应该知道JS不好的设计，并且有意识地只用JS优秀的设计。

由于JS最近随着HTML5的兴起有了很大的更新，网上很多教程或者资料都过时了，现在应该用ES 6标准来写代码。即使不做后端，也要对Node非常熟悉，因为前端的自动化也是基于Node和npm实现的。

小A说了这么多，组长觉得很惊讶，说，“我看你平时也没怎么与老员工探讨前端技术问题，怎么懂得这么多？知识体系还挺丰富！”

小A不好意思地说，“其实我刚进公司的时候也是啥也不会，纯小白一个，偶然听一个朋友推荐看到了廖雪峰老师的网站，里面有非常系统的JavaScript全栈教程，讲的重点都是JS的精髓，还特别指出容易出错的坑。廖老师的教程更新很快，我每天都花半个小时上去学一点，几个月下来也积累了不少。”

组长用自己的笔记本搜索了小A说的廖雪峰老师的网站，看了几页，说：“小A啊，这么好的JS教程，你怎么藏着掖着，不早点分享给大家呢？你这个做法不厚道，今晚团队聚餐的费用必须你出。”

小A一脸懵逼……

友情提示：小A提到的神奇的JavaScript全栈教程哪里找？猛戳这里**有惊喜！

创建对象

构造函数

为了区分普通函数和构造函数，按照约定，构造函数首字母应当大写，而普通函数首字母应当小写

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}

搭配 new 使用默认 自动返回 this

var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

var xiaohong = new Student('小红');
xiaohong.name; // '小明'
xiaohong.hello(); // Hello, 小明!

比较两个Student

这里new 出来的 Student 的 Hello 方法不是复用！ 用其他语言的角度来看同一个类new出来的对象居然各自持有方法，真的是 泥垢了

xiaoming.hello === xiaohong.hello;//false

重写Student的构造函数

function Student(name) {
    this.name = name;
}

Student.prototype.bioName = "智人";

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

var xiaoming = new Student('小明');
var xiaohong = new Student('小红');

//这里可以看出复用方法了 公用的东西应该放到 prototype 里面
xiaoming.hello === xiaohong.hello;// true  
xiaoming.bioName === xiaohong.bioName; //true



xiaoming.bioName; //"智人"
xiaohong.bioName; //"智人"

xiaoming.bioName = "尼安德特人"
xiaoming.bioName; //"尼安德特人"
xiaohong.bioName; //"智人"  震惊了 这个bioName 不是共享的 按照道理来说应该是共用 prototype 的一个属性的那?

xiaoming.bioName === xiaohong.bioName; //false 这里居然显示出来结果

xiaoming.hasOwnProperty("name")// true
xiaoming.hasOwnProperty("bioName")// true  !!! 看来是 小名赋值之后给自己天降了个 bioName  

xiaoming;
Student.prototype;
//果然可以看出 prototype 里面的 bioName 依然是"智人",而xiaoming是新增bioName属性

原型继承

function Student(props) {
    this.name = props.name || 'Unnamed';
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

//首先在构造函数中相互调用
function PrimaryStudent(props) {
    // 调用Student构造函数，绑定this变量:
    Student.call(this, props);
    this.grade = props.grade || 1;
}

这个时候对于PrimaryStudent 原型链条是,看上去和Student没啥关系

var Reimu = new PrimaryStudent({name :"Reimu"});

QQ20161028-0.png

new PrimaryStudent() ----> PrimaryStudent.prototype ----> Object.prototype ----> null

 Student.prototype

QQ20161028-4.png

PrimaryStudent.prototype

QQ20161028-5.png

这个两个家伙各自指向自家

---

接下来就像是链表插值这类东西的

QQ20161028-6.png

来一个空函数F 桥接用 我们最终想实现下面这样的效果

大象塞冰箱分三步 我们狸猫换太子 也走三步 搭四根线

function F() {
}

QQ20161028-1.png

// 把F的原型指向Student.prototype:  这里看上去是一步实际上搭上了两根线
// F ->  原型对象
// F ->  原型对象
F.prototype = Student.prototype;

QQ20161028-2.png

// 把PrimaryStudent的原型指向一个新的F对象，F对象的原型正好指向Student.prototype:
搭一根线   PrimaryStudent -> new F()
PrimaryStudent.prototype = new F();

QQ20161028-3.png

// 把PrimaryStudent原型的构造函数修复为PrimaryStudent:
搭上最后一根线
new F() -> PrimaryStudent
PrimaryStudent.prototype.constructor = PrimaryStudent;

四根线搭上 原来 PrimaryStudent.prototype 指向的 无名原型对象已经被彻底的抛弃了 new F() 已经上位了，取代了无名 原型对象

function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

就这样JavaScript终于打肿脸充胖子一样的实现了继承