javascript 01_继承和原型链

JavaScript的继承通过原型链实现，不同于Java等语言，继承基于一个Class生成一个subClass。
任意一个构造函数都有其原型对象，通过new关键字生成一个实例对象，该实例对象指向原型对象，三者的关系如下图

原型：每一个构造函数都有一个prototype属性，该属性指向一个对象即原型对象，原型对象中拥有通过构造函数创建的实例对象的共享的属性和方法。
原型链：原型对象也是一个对象，也有__proto__属性指向自己的原型,这样就形成了一个链式结构，称之为原型链。
有兴趣可以在浏览器的开发者模式查看一个构造函数的prototype属性。

// obj是构造函数Function的一个实例对象,Function是构造函数
console.log(obj.__proto__ === Function.prototype) // true
// 指向了原型的原型
console.log(obj.__proto__.__proto__)

对象访问规则：采用就近原则，首先在当前对象上查找，找不到到原型对象上查找，然后是原型的原型，直到null，就会返回undefined，如果查找的是一个方法对象并且调用了，那么就会报错TypeError: xxx is not a function。

继承的实现

给原型对象增加属性是一件很简单的事，Function.prototype.xxx就可以做到了。每一个实例对象都可以使用原型对象的属性和方法。
下面的例子取之于廖雪峰的原型继承，读的时候发现例子的相关概念没有清晰的定义，读起来不免让人困惑，上述内容对相关概念做了明确的说明。以下通过实例来说明并解析如何打破默认的原型链。

// Student构造函数
function Student(props){
	this.name = props.name || 'unamed';
}
Student.prototype.hello = function(){
	console.log(`${this.name}早上好`);
}

// 定义一个PrimaryStudent构造函数
function PrimaryStudent(props){
	Student.call(this,props);
	this.grade = props.grade || 1;
}
PrimaryStudent.prototype.showGrade = function(){
	console.log(`得分是${this.grade}!`)
}

调用Student的构造函数却并不意味着就继承了Student，此时PrimaryStudent的原型链是new PrimaryStudent() --> PrimaryStudent.prototype --> Object.prototype --> null。目标是打破默认的继承关系，使PrimaryStudent继承Student，原型链就变成了new PrimaryStudent() --> PrimaryStudent.prototype --> Student.prototype -->Object.prototype --> null。

1. 首先考虑将PrimaryStudent.prototype = Student.prototype,然而这样做PrimaryStudent的原型就被Student的原型替代了，同时，PrimaryStudent.prototype.showGrade方法也就不能调用了，同样的还有PrimaryStudent原型的其他属性和方法。
2. 虽然此路不通，但从中却可以得到启发，我们可以用一个空的构造函数F作为桥接，使空函数的原型指向Student.prototype，PrimaryStudent的原型指向空函数。

// 定义一个空函数
function F(){}
// 空函数的原型对象指向Student的原型对象
F.prototype = Student.protoype;
// 改变PrimaryStudent的原型指向
PrimaryStudent.prototype = new F();
PrimaryStudent.prototype.constructor = PrimaryStudent;
PrimaryStudent.prototype.showGrade = function(){
	console.log(`得分是${this.grade}!`)
}
var p1 = new PrimaryStudent({name:'xiaoming',grade:92});

改变后原型链的关系描述如下图

原型链从new PrimaryStudent() --> PrimaryStudent.prototype --> Object.prototype --> null到new PrimaryStudent() --> PrimaryStudent.prototype --> Student.prototype -->Object.prototype --> null的转化实质上就是f0=new PrimaryStudent() --> f1=PrimaryStudent.prototype --> f2=Student.prototype，即f0.__proto__=f1;f1.__proto__=f2。