媒介
生涯有度，人生添寿。
原文地点：详解javascript的类
博主博客地点：Damonare的个人博客
Javascript从当初的一个“弹窗言语”，一步步生长成为现在前后端通吃的庞然大物。javascript的受迎接水平也是日积月累，本年最受迎接编程言语又是花落javascript，这着实是一个充满了生机的言语。现在，随随意一个网页javascript代码量都不下数千行，假如node后端那更不止几千行了。（WTF）代码量的增加给编程带来的重要的题目就是怎样去编写和保护云云巨大的代码呢？答案就是模块化头脑，着实就是面向对象（OOP）编程，现在比较盛行的三大前端框架（angular,react,vue）基本都完成了组件化编程，但组件化和我们所说的模块化又有所不同，应当能够这么邃晓，组件化是模块化的升级版，模块化是组件化的基本。那末，题目来了，javascript怎样面向对象编程呢？我想这很多老鸟也不定说的清晰吧，前端杂而活泼的种种社区，很多前端er一度依靠种种插件，基础不须要去相识这些深层的东西却照样能完成任务。但我想作为一个有寻求的前端er照样很有必要去进修这些看似用不着的东西的，别的不说，就单单因为我们是前端er,只会用jquery一个轻微凶猛的后端都能替代你。好吧，空话不多说，究竟怎样面向对象coding呢…..
很不幸，es5中并没有给出邃晓的定义‘类’的观点，所以传统的面向对象编程似乎是行不通的，那末又该肿么办呢？值得光荣的是，先辈们经由过程不停探究总结，胜利的用javascript模仿出了“类”。那末，javascript的类又该怎样定义呢？
在面向对象编程中，类（class）是对象（object）的模板，定义了统一组对象（又称”实例”）共有的属性和要领。
正文
说到javascript中的“类”就不得不说原型链和继续了，因为javascript是没有真正意义上的类的，所谓的类就是基于原型链和继续来完成的，纵然ES6中加入了class,extends关键字完成类和继续，但实际上照样基于原型链和继续， ES6 类（class）是 JavaScript 现有的原型继续的语法糖。
1. 原型链和继续
“
在 javaScript 中，每一个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有本身的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），构成这条链的末了一环。这类一级一级的链组织就称为原型链（prototype chain）。”
原型链
实际上在定义一个对象的时刻原型链本身就已天生了，javascript到处皆对象的头脑放在这里邃晓起来就很轻易了，看完后你会发明万物始于Object.prototype。那末我们都是怎样定义一个对象的呢，博主总结的要领以下几个：
先开端来个demo详细诠释下原型链是咋回事吧：
//someObject.[[Prototype]] 标记是用于指派 someObject 的原型。这个等同于 JavaScript 的 __proto__ 属性（现已弃用）。。从 ES6 最先, [[Prototype]] 能够用Object.getPrototypeOf()和Object.setPrototypeOf()接见器来接见。这个要领能够放心运用博主亲测，主流浏览器已支撑了
// 假定有一个对象 o, 其本身的属性（own properties）有 a 和 b：
// {a: 1, b: 2}
// o 的原型 o.[[Prototype]]有属性 b 和 c：
// {b: 3, c: 4}
// 末了, o.[[Prototype]].[[Prototype]] 是 null.
// 这就是原型链的末端，即 null，
// 依据定义，null 没有[[Prototype]].
// 综上，全部原型链以下:
// {a:1, b:2}---> {b:3, c:4} ---> null来来来，撸袖子搞出个对象！！！（立时狗节，只身狗请自发阅读完此篇博客）
运用一般要领来建立一个对象
demo以下:
var o={
a:0,
b:function(){
console.log(this.a)
}
}
//建立一个对象
//原型链以下：
//o--->Object.prototype--->null
var a = ["yo", "whadup", "?"];
//建立一个数组对象
//(indexOf, forEach等要领都是从它继续而来).
//原型链以下：
//a--->Array.prototype ---> Object.prototype ---> null
function f(){
return 1;
}
//建立一个函数对象
//(call, bind等要领都是从它继续而来):
//原型链以下：
//f ---> Function.prototype ---> Object.prototype ---> null
var date=new Date();
//建立一个日期对象
//原型链以下：
//date--->Date.prototype--->Object.pprototype--->null运用组织函数的要领
在 JavaScript 中，组织器着实就是一个一般的函数。当运用 new 操作符 来作用这个函数时，它就能够被称为组织要领（组织函数）。——MDN
demo以下：
function fun(){
this.propA='prop';
this.propB=3;
}
fun.prototype={
methodA:function(){
console.log(this.propA)
}
}
var o=new fun();
o.methodA();//prop
// o是天生的对象,他的本身属性有'propA'和'propB'.
// 在o被实例化时,o.[[Prototype]]指向了fun.prototype.运用Object.create建立对象
ECMAScript 5 中引入了一个新要领：Object.create()。能够挪用这个要领来建立一个新对象。新对象的原型就是挪用 create 要领时传入的第一个参数：
var a = {a: 1};
// a ---> Object.prototype ---> null
var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (继续而来)继续观点下面会讲
var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null
var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined, 因为d没有继续Object.prototype运用 class 关键字
ECMAScript6 引入了一套新的关键字用来完成 class。运用基于类言语的开发人员会对这些组织觉得熟习，但它们是不一样的。 JavaScript 仍然是基于原型的。这些新的关键字包含 class, constructor, static, extends, 和 super.
"use strict";
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
//定义一个类Polygon
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
}//运用super援用父类
get area() {
return this.height * this.width;
}
set sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
//运用extends定义Squeare继续父类Polygon
var square = new Square(2);//实例对象
//此时的原型链为：
//square--->Square.prototype--->Polygon.prototype--->Object.prototype--->null
//假如不邃晓为何是如许，不要紧接着往下看类的申明继续
着实在上面讲原型链的时刻难以避免的也提到了继续，比方来自MDN的这个实例：
// 假定有一个对象 o, 其本身的属性（own properties）有 a 和 b：
// {a: 1, b: 2}
// o 的原型 o.[[Prototype]]有属性 b 和 c：（someObject.[[Prototype]] 标记是用于指派 someObject 的原型。这个等同于 JavaScript 的 __proto__ 属性（现已弃用）。。从 ES6 最先, [[Prototype]] 能够用Object.getPrototypeOf()和Object.setPrototypeOf()接见器来接见。）
// {b: 3, c: 4}
// 末了, o.[[Prototype]].[[Prototype]] 是 null.
// 这就是原型链的末端，即 null，
// 依据定义，null 没有[[Prototype]].
// 综上，全部原型链以下:
// {a:1, b:2} ---> {b:3, c:4} ---> null
console.log(o.a); // 1
// a是o的本身属性吗？是的，该属性的值为1
console.log(o.b); // 2
// b是o的本身属性吗？是的，该属性的值为2
// o.[[Prototype]]上另有一个'b'属性,然则它不会被接见到.这类状况称为"属性遮盖 (property shadowing)".
console.log(o.c); // 4
// c是o的本身属性吗？不是，那看看o.[[Prototype]]上有没有.
// c是o.[[Prototype]]的本身属性吗？是的,该属性的值为4
console.log(o.d); // undefined
// d是o的本身属性吗？不是,那看看o.[[Prototype]]上有没有.
// d是o.[[Prototype]]的本身属性吗？不是，那看看o.[[Prototype]].[[Prototype]]上有没有.
// o.[[Prototype]].[[Prototype]]为null，住手搜刮，
// 没有d属性，返回undefined—-以上内容来自MDN继续与原型链
我想看到这里照样有些似懂非懂吧，那末来个例子吧：
var object1={
a:1,
b:function(){
console.log(this.a+1);
}
}
//定义一个对象
var object2=Object.create(object1);
//挪用Object.create来建立一个新对象,新对象的原型就是挪用 create 要领时传入的第一个参数,现在的原型链是：
//object2--->object1--->object1.prototype--->null
object2.d=4;
object2.a;
//1
//继续了object1的属性a
object2.b();
//2
//继续了object1的要领b
Object.getPrototypeOf(object2);
//object1获得object2的原型object1我想现在应当是邃晓了吧，再不邃晓博主也是无计可施了，表达能力着实有限。
2. 类
总算说到类了，因为javascript的类基于原型链和继续，因而在上面的内容中就已定义了很多的类。我们javascript的类一样能完成传统类的多态，封装，继续等特征，这里重要讲解了继续这个观点，但实际上很多时刻不经意能够就用了这三个特征。很好玩不是么
起首，我们先看下在ES5中定义一个类的情势：
function Animal(name) {
this.name = name;
this.sleep = function() {
console.log(this.name+'正在睡觉');
}
}//定义Animal类
Animal.prototype = {
eat: function(food) {
console.log(this.name+"正在吃"+food);
}
}
function Cat() {
}
Cat.prototype = new Animal('Tom');
var Tom = new Cat('Tom');/Cat实例对象
Tom.eat('猫粮');
//Tom正在吃猫粮
//继续Animal要领
Tom.sleep();
//Tom正在睡觉
//继续Animal要领
//现在的原型链：
//Tom(Cat实例对象)--->Cat.prototype(Animal实例对象)--->Animal.prototype--->Object.prototype--->null好的，然后我们看下在ES6中改写上面的类：
class Animal {
constructor(name) {
this.name = name;
}
sleep() {
console.log(this.name + ' 正在睡觉');
}
eat(food){
console.log(this.name+'正在吃'+food)
}
}
class Cat extends Animal {
}
const Tom = new Cat('Tom');
Tom.eat('猫粮');
//Tom正在吃猫粮
//继续Animal要领
Tom.sleep();
//Tom正在睡觉
//继续Animal要领
//现在的原型链：
//Tom(Cat实例对象)--->Cat.prototype(Animal实例对象)--->Animal.prototype--->Object.prototype--->null定义一个类的要领实际上也是上面所说的定义一个对象的要领，类本身就是一个对象，只不过这个对象内里的要领和属性能够供很多实例对象挪用罢了。
跋文
总的来说关于类的邃晓照样须要不停探究的，路漫漫其修远兮，吾将高低而求索。
