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

2019年9月1日 139次阅读 来源: 凯小默

笔记申明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时候开的一个专栏，
天天10分钟，重构你的前端学问体系，笔者重要整顿进修历程的一些要点笔记以及感悟，完全的能够到场winter的专栏进修【原文有winter的语音】，若有侵权请联络我，邮箱：kaimo313@foxmail.com。

一、什么是原型？

1.0、定义

原型是指一个词语或一个范例意义的一切典范模子或原笼统，是一个范例的组典范特性

1.1、基于类的编程言语

诸如 C++、Java 等盛行的编程言语是运用类的体式格局来形貌对象，
基于类的编程首倡运用一个关注分类和类之间关联开辟模子。

1.2、基于原型的编程言语

如 JavaScript 编程言语是应用原型来形貌对象，
基于原型的编程看起来更加首倡程序员去关注一系列对象实例的行动，然后才去体贴如何将这些对象，划分到近来的运用体式格局类似的原型对象，而不是将它们分红类。

1.3、原型体系的“复制支配”有两种完成思绪

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

javaScript挑选了第一种体式格局。

二、JavaScript 的原型

2.0、原型体系的两条归纳综合

  • 假如一切对象都有私有字段 [[prototype]]，就是对象的原型
  • 读一个属性，假如对象自身没有，则会继续接见对象的原型，直到原型为空或许找到为止。

2.1、三个内置函数

能够应用下面三个要领，更直接地接见支配原型，来完成笼统和复用。

  • 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.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.1、[[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.2、new运算做了什么？

  • 1、以组织器的 prototype 属性（注重与私有字段 [[prototype]] 的辨别）为原型，建立新对象
  • 2、将 this 和挪用参数传给组织器，实行
  • 3、假如组织器返回的是对象，则返回，不然返回第一步建立的对象。

用组织器模仿类的两种要领:

// 1、在组织器中修正 this，给 this 增加属性

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

// 2、修正组织器的 prototype 属性指向的对象，它是从这个组织器组织出来的一切对象的原型。

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

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

四、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.1、类的继续才能

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的重学前端至心不错，对我来讲举行查漏补缺，看清本身的程度很有协助，路还很长，还要加油呀！！！

    原文作者：凯小默
    原文地址: https://segmentfault.com/a/1190000019090335
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞