媒介
起首迎接人人关注我的Github博客，也算是对我的一点勉励，毕竟写东西没法取得变现，能对峙下去也是靠的是自身的热忱和人人的勉励。
好久已没有写东西了，由于杂七杂八的缘由近来一向没有抽出时刻来把写作对峙下来，以为和跑步一样，一旦松懈下来就很难再次捡起来。近来一向想从新静下心来写点什么，选题又成为一个让我头疼的题目，近来事情中偶然会对JavaScript继续的题目有时刻会以为模糊，意想到许多学问纵然是很基本，也须要常常的回忆和演习，不然纵然再熟习的东西也会常常让你以为生疏，所以就挑选这么一篇异常基本的文章作为本年的最先吧。
类
JavaScript不像Java言语自身就具有类的观点，JavaScript作为一门基于原型(ProtoType)的言语，(引荐我之前写的我所熟悉的JavaScript作用域链和原型链)，时至今日，依然有许多人不发起在JavaScript中大批运用面临对象的特征。但就如今而言，许多前端框架，比方React都有基于类的观点。起首明白一点，类存在的目的就是为了天生对象，而在JavaScript天生对象的历程并不不像其他言语那末烦琐，我们能够经由过程对象字面量语法轻松的建立一个对象:
var person = {
name: "MrErHu",
sayName: function(){
alert(this.name);
}
}; 统统看起来是如许的圆满，然则当我们愿望建立无数个类似的对象时，我们就会发明对象字面量的要领就不能满足了，固然智慧的你肯定会想到采纳工场形式去建立一系列的对象:
function createObject(name){
return {
"name": name,
"sayName": function(){
alert(this.name);
}
}
} 然则如许体式格局有一个明显的题目，我们经由过程工场形式天生的各个对象之间并没有联络，没法辨认对象的范例，这时刻就涌现了组织函数。在JavaScript中组织函数和一般的函数没有任何的区分，仅仅是组织函数是经由过程new操纵符挪用的。
function Person(name, age, job){
this.name = name;
this.sayName = function(){
alert(this.name);
};
}
var obj = new Person();
obj.sayName(); 我们晓得new操纵符会做以下四个步骤的操纵:
- 建立一个全新的对象
- 新对象内部属性
[[Prototype]](非正式属性__proto__)连接到组织函数的原型 - 组织函数的
this会绑定新的对象 - 假如函数没有返回其他对象，那末
new表达式中的函数挪用会自动返回这个新对象
如许我们经由过程组织函数的体式格局天生的对象就能够举行范例推断。然则纯真的组织函数形式会存在一个题目，就是每一个对象的要领都是互相自力的，而函数本质上就是一种对象，因而就会形成大批的内存糟蹋。回忆new操纵符的第三个步骤，我们新天生对象的内部属性[[Prototype]]会连接到组织函数的原型上，因而应用这个特征，我们能够夹杂组织函数形式和原型形式，处置惩罚上面的题目。
function Person(name, age, job){
this.name = name;
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var obj = new Person();
obj.sayName(); 我们经由过程将sayName函数放到组织函数的原型中，如许天生的对象在运用sayName函数经由过程查找原型链就能够找到对应的要领，一切对象共用一个要领就处置惩罚了上述题目，纵然你能够以为原型链查找能够会延误一点时刻，实际上关于如今的JavaScript引擎这类题目能够疏忽。关于组织函数的原型修正，处置惩罚上述的体式格局，能够还存在:
Person.prototype.sayName = function(){
alert(this.name);
} 我们晓得函数的原型中的constructor属性是实行函数自身，假如你是将原本的原型替换成新的对象而且constructor对你又比较主要记得手动增加，因而第一种并不正确，由于constructor是不可枚举的，因而更正确的写法应当是:
Object.defineProperty(Person, "constructor", {
configurable: false,
enumerable: false,
writable: true,
value: Person
}); 到如今为止，我们会以为在JavaScript中建立个类也太麻烦了，实在远远不止云云，比方我们建立的类能够会被直接挪用，形成全局环境的污染，比方:
Person('MrErHu');
console.log(window.name); //MrErHu 不过我们迎来了ES6的时期，事变正在其变化，ES6为我们在JavaScript中完成了类的观点，上面的的代码都能够用简介的类(class)完成。
class Person {
constructor(name){
this.name = name;
}
sayName(){
alert(this.name);
}
} 经由过程上面我们就定义了一个类，运用的时刻同之前一样:
let person = new Person('MrErHu');
person.sayName(); //MrErHu 我们能够看到，类中的constructor函数累赘起了之前的组织函数的功用，类中的实例属性都能够在这里初始化。类的要领sayName相当于之前我们定义在组织函数的原型上。实在在ES6中类仅仅只是函数的语法糖:
typeof Person //"function" 比拟于上面自身建立的类体式格局，ES6中的类有几个方面是与我们自定义的类不雷同的。起首类是不存在变量提拔的，因而不能先运用后定义:
let person = new Person('MrErHu')
class Person { //...... } 上面的运用体式格局是毛病的。因而类更像一个函数表达式。
其次，类声明中的一切代码都是自动运行在严厉形式下，而且不能让类离开严厉形式。相当于类声明中的一切代码都运行在”use strict”中。
再者，类中的一切要领都是都是不可枚举的。
末了，类是不能直接挪用的，必需经由过程new操纵符挪用。实在关于函数有内部属性[[Constructor]]和[[Call]],固然这两个要领我们在外部是没法访问到的，仅存在于JavaScript引擎。当我们直接挪用函数时，实在就是挪用了内部属性[[Call]]，所做的就是直接实行了函数体。当我们经由过程new操纵符挪用时，实在就是挪用了内部属性[[Constructor]],所做的就是建立新的实例对象，并在实例对象上实行函数(绑定this)，末了返回新的实例对象。由于类中不含有内部属性[[Call]],因而是没法直接挪用的。趁便能够提一句ES6中的元属性 new.target
所谓的元属性指的就是非对象的属性，能够提供给我们一些补充信息。new.target就是个中一个元属性，当挪用的是[[Constructor]]属性时，new.target就是new操纵符的目的，假如挪用的是[[Call]]属性，new.target就是undefined。实在这个属性是异常有效的，比方我们能够定义一个仅能够经由过程new操纵符挪用的函数：
function Person(){
if(new.target === undefined){
throw('该函数必需经由过程new操纵符挪用');
}
}或许我们能够用JavaScript建立一个类似于C++中的虚函数的函数:
class Person {
constructor() {
if (new.target === Person) {
throw new Error('本类不能实例化');
}
}
}
继续
在没有ES6的时期，想要完成继续是一个不小的事情。一方面我们要在派生类中建立父类的属性，另一方面我们须要继续父类的要领，比方下面的完成要领:
function Rectangle(width, height){
this.width = width;
this.height = height;
}
Rectangle.prototype.getArea = function(){
return this.width * this.height;
}
function Square(length){
Rectangle.call(this, length, length);
}
Square.prototype = Object.create(Rectangle.prototype, {
constructor: {
value: Square,
enumerable: false,
writable: false,
configurable: false
}
});
var square = new Square(3);
console.log(square.getArea());
console.log(square instanceof Square);
console.log(square instanceof Rectangle); 起首子类Square为了建立父类Rectangle的属性，我们在Square函数中以Rectangle.call(this, length, length)的体式格局举行了挪用，其目的就是在子类中建立父类的属性，为了继续父类的要领，我们给Square赋值了新的原型。除了经由过程Object.create体式格局，你应当也见过以下体式格局:
Square.prototype = new Rectangle();
Object.defineProperty(Square.prototype, "constructor", {
value: Square,
enumerable: false,
writable: false,
configurable: false
}); Object.create是ES5新增的要领，用于建立一个新对象。被建立的对象会继续另一个对象的原型，在建立新对象时还能够指定一些属性。Object.create指定属性的体式格局与Object.defineProperty雷同，都是采纳属性描述符的体式格局。因而能够看出，经由过程Object.create与new体式格局完成的继续其本质上并没有什么区分。
然则ES6能够大大简化继续的步骤:
class Rectangle{
constructor(width, height){
this.width = width;
this.height = height;
}
getArea(){
return this.width * this.height;
}
}
class Square extends Rectangle{
construct(length){
super(length, length);
}
} 我们能够看到经由过程ES6的体式格局完成类的继续是异常轻易的。Square的组织函数中挪用super其目的就是挪用父类的组织函数。固然挪用super函数并非必需的，假如你默许缺省了组织函数，则会自动挪用super函数，并传入一切的参数。
不仅云云，ES6的类继续给予了更多新的特征，起首extends能够继续任何范例的表达式，只需该表达式终究返回的是一个可继续的函数(也就是讲extends能够继续具有[[Constructor]]的内部属性的函数，比方null和天生器函数、箭头函数都不具有该属性，因而不能够被继续)。比方:
class A{}
class B{}
function getParentClass(type){
if(//...){
return A;
}
if(//...){
return B;
}
}
class C extends getParentClass(//...){
} 能够看到我们经由过程上面的代码完成了动态继续，能够依据差别的推断前提继续差别的类。
ES6的继续与ES5完成的类继续，另有一点差别。ES5是先建立子类的实例，然后在子类实例的基本上建立父类的属性。而ES6正好是相反的，是先建立父类的实例，然后在父类实例的基本上扩大子类属性。应用这个属性我们能够做到一些ES5没法完成的功用:继续原生对象。
function MyArray() {
Array.apply(this, arguments);
}
MyArray.prototype = Object.create(Array.prototype, {
constructor: {
value: MyArray,
writable: true,
configurable: true,
enumerable: true
}
});
var colors = new MyArray();
colors[0] = "red";
colors.length // 0
colors.length = 0;
colors[0] // "red" 能够看到，继续自原生对象Array的MyArray的实例中的length并不能犹如原生Array类的实例
一样能够动态回响反映数组中元素数目或许经由过程转变length属性从而转变数组中的数据。究其缘由就是由于传统体式格局完成的数组继续是先建立子类，然后在子类基本上扩大父类的属性和要领，所以并没有继续的相干要领，但ES6却能够轻松完成这一点:
class MyArray extends Array {
constructor(...args) {
super(...args);
}
}
var arr = new MyArray();
arr[0] = 12;
arr.length // 1
arr.length = 0;
arr[0] // undefined 我们能够瞥见经由过程extends完成的MyArray类建立的数组就能够同原生数组一样，运用length属性回响反映数组变化和转变数组元素。不仅云云，在ES6中，我们能够运用Symbol.species属性使得当我们继续原生对象时，转变继续自原生对象的要领的返回实例范例。比方,Array.prototype.slice原本返回的是Array范例的实例，经由过程设置Symbol.species属性，我们能够让其返回自定义的对象范例:
class MyArray extends Array {
static get [Symbol.species](){
return MyArray;
}
constructor(...args) {
super(...args);
}
}
let items = new MyArray(1,2,3,4);
subitems = items.slice(1,3);
subitems instanceof MyArray; // true 末了须要注重的一点，extends完成的继续体式格局能够继续父类的静态成员函数，比方:
class Rectangle{
// ......
static create(width, height){
return new Rectangle(width, height);
}
}
class Square extends Rectangle{
//......
}
let rect = Square.create(3,4);
rect instanceof Square; // true
