重学前端学习笔记（八）--JavaScript中的原型和类

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏， 天天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的能够加入winter的专栏学习【原文有winter的语音】，若有侵权请联系我，邮箱：kaimo313@foxmail.com。

1、什么是原型？

1.0、定义

原型是指一个词语或一个类型意义的全部典型模型或原形象，是一个类型的组典型特征

1.一、基于类的编程语言

诸如 C++、Java 等流行的编程语言是使用类的方式来描述对象， 基于类的编程提倡使用一个关注分类和类之间关系开发模型。

1.二、基于原型的编程语言

如 JavaScript 编程语言是利用原型来描述对象， 基于原型的编程看起来更为提倡程序员去关注一系列对象实例的行为，然后才去关心如何将这些对象，划分到最近的使用方式类似的原型对象，而不是将它们分红类。

1.三、原型系统的“复制操做”有两种实现思路

• 一个是并不真的去复制一个原型对象，而是使得新对象持有一个原型的引用
• 另外一个是切实地复制对象，今后两个对象再无关联。

javaScript选择了第一种方式。

2、JavaScript 的原型

2.0、原型系统的两条归纳

• 若是全部对象都有私有字段 [[prototype]]，就是对象的原型
• 读一个属性，若是对象自己没有，则会继续访问对象的原型，直到原型为空或者找到为止。

2.一、三个内置函数

能够利用下面三个方法，更直接地访问操纵原型，来实现抽象和复用。

• Object.create 根据指定的原型建立新对象，原型能够是 null
• Object.getPrototypeOf 得到一个对象的原型
• Object.setPrototypeOf 设置一个对象的原型

winter举了用原型来抽象猫和虎的例子：

var cat = {
    say() {
        console.log("meow~");
    },
    jump() {
        console.log("jump");
    }
}

var tiger = Object.create(cat,  {
    say: {
        writable: true,
        configurable: true,
        enumerable: true,
        value: function(){
            console.log("roar!");
        }
    }
})


var anotherCat = Object.create(cat);

anotherCat.say(); // meow~

var anotherTiger = Object.create(tiger);

anotherTiger.say(); // roar!

3、早期版本中的类与原型

3.0、“类”的定义是一个私有属性 [[class]]

全部具备内置 class 属性的对象:（ES3和以前版本）

var o = new Object;
var n = new Number;
var s = new String;
var b = new Boolean;
var d = new Date;
var arg = function(){ return arguments }();
var r = new RegExp;
var f = new Function;
var arr = new Array;
var e = new Error;
console.log(
    [o, n, s, b, d, arg, r, f, arr, e].map(v =>   Object.prototype.toString.call(v)
  )
)

语言使用者惟一能够访问 [[class]] 属性的方式是 Object.prototype.toString。

3.一、[[class]] 私有属性被 Symbol.toStringTag 代替

能够查看MDN文档Symbol.toStringTag以及Object.prototype.toString的介绍：（ES5开始）

var o = { [Symbol.toStringTag]: "MyObject" }
console.log(o + ""); // [object MyObject]

上面这段代码建立了一个新对象，而且给它惟一的一个属性 Symbol.toStringTag，用字符串加法触发了Object.prototype.toString 的调用，发现这个属性最终对 Object.prototype.toString 的结果产生了影响。

3.二、new运算作了什么？

• 一、以构造器的 prototype 属性（注意与私有字段 [[prototype]] 的区分）为原型，建立新对象
• 二、将 this 和调用参数传给构造器，执行
• 三、若是构造器返回的是对象，则返回，不然返回第一步建立的对象。

用构造器模拟类的两种方法:

// 一、在构造器中修改 this，给 this 添加属性

function c1() {
    this.p1 = 1;
    this.p2 = function(){
        console.log(this.p1);
    }
}
var o1 = new c1;
o1.p2(); // 1

// 二、修改构造器的 prototype 属性指向的对象，它是从这个构造器构造出来的全部对象的原型。

function c2() {
}
c2.prototype.p1 = 1;
c2.prototype.p2 = function() {
    console.log(this.p1);
}

var o2 = new c2;
o2.p2(); // 1

4、ES6 中的类

4.0、类的基本写法

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

4.一、类的继承能力

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

上面代码调用子类的 speak 方法获取了父类的 name。若是对于class还想了解更多，能够查看MDN文档Classes部分。

我的总结

其实对于这一部分非常不明白，也不清楚，对于这些js基础性的东西仍是要多下下功夫才行，毕竟winter的重学前端真心不错，对我来讲进行查漏补缺，看清本身的水平颇有帮助，路还很长，还要加油呀！！！