JS面向对象，__proto__和prototype详解

一、类，对象和原型

类是具体事物的抽象，而对象是类的实例。举个例子，学生类可以有nama属性，grade属性，study方法等等，而对于学生类的实例就具体到某一个学生上去了，如name:小红 grade：高二等等
理解了类和对象我们再来说说原型，在JS中不区分类和实例的概念，而是通过原型来实现面向对象编程
比如我们要实现小红这个对象，我们可以通过下面在这个小明的对象实现

 var xiaoming = {name: '小明',height: '高一',study: function() {console.log(this.name + '正在学习');}};var xiaohong = {name: '小红'};xiaohong.__proto__ = xiaoming;//让xiaohong对象的原型指向xiaomingxiaohong.study(); //小红正在学习

你可以理解对小红这个对象是以小明为原型创造，或是先将小明这个对象抽象成类，再根据这个类创造小红这个对象。

proto：隐式原型，JS每个对象中内置的属性，用于指向对象的原型对象
由此，可以得出一条原型链，根据对象的__proto__属性一直找，就会得到一条原型链，如定义一个数组 var arr = [1, 2, 3];就会有原型链
arr ----> Array.prototype ----> Object.prototype ----> null
instanceof就是通过__proto__属性，顺着原型链一直寻找来判断的，而xiaohong.proto = xiaoming;就是构建了一条xiaohong->xiaoming的原型链。原型链左端，继承原型链右端的方法。故可以给原型链右端增加公用的方法，使原型链左端都拥有此方法而且省内存。

二、prototype与constructor

JS中函数也是一个对象，故JS可以用构造函数的方法来创建对象

function Student(name) {this.name = name;this.hello = function () {alert('Hello, ' + this.name + '!');}
}var xiaoming = new Student('小明');// 使用new 关键字调用一个函数返回一个对象
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

用new Student()创建的对象还从原型上获得了一个constructor属性，它指向函数Student本身
prototype：显示原型，JS每个函数中内置的属性，用于指向函数的原型对象

console.log(Student.prototype.constructor===Student)//true

class

ES6引入了class，使得JS可以定义一个类，与Java相似

class Student {constructor(name) {this.name = name;}hello() {alert('Hello, ' + this.name + '!');}
}//支持用extends关键词进行类的继承class PrimaryStudent extends Student {constructor(name, grade) {super(name); // 记得用super调用父类的构造方法!this.grade = grade;}myGrade() {alert('I am at grade ' + this.grade);}
}