重學前端-學習筆記-JavaScript對象-類

說明

重學前端是程劭非（winter）在極客時間開的一個專欄，在此主要整理個人學習筆記。若有侵權，請聯繫我，謝謝。

js的原型

• 若是全部對象都有私有字段[[prototype]]，就是對象的原型
• 讀一個屬性，在該對象上找不到，就會去它的原型上查找，直到原型爲空或者找到爲止

js提供內置函數，來訪問和操縱原型

• Object.create：根據指定的原型來建立新對象，原型能夠是null
• Object.getPropertyOf：獲取對象的原型
• Object.setPropertyOf：設置對象的原型

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();

var anotherTiger = Object.create(tiger);

anotherTiger.say();

複製代碼

早期版本中的類與原型

(待補充)

new操做

new運算一個構造器和一組參數，實際作了這三件事

• 以構造器的prototype屬性爲原型，建立新對象
• 講this和參數傳給構造器，執行
• 若是構造器返回的是對象，則返回，如無，就返回第一步建立的對象

new操做讓函數對象在語法上跟類類似，可是，它提供了兩種方式，一種是在構造器添加屬性，一種是經過構造器的prototype屬性添加屬性

// 經過構造器
function c1(){
    this.p1 = 1;
    this.p2 = function(){
        console.log(this.p1);
    }
} 
var o1 = new c1;
o1.p2();


// 經過構造器的原型
function c2(){
}
c2.prototype.p1 = 1;
c2.prototype.p2 = function(){
    console.log(this.p1);
}

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

複製代碼

用new來實現一個Object。create的不完整polyfill

Object.create = function(prototype){
    var cls = function(){}
    cls.prototype = prototype;
    return new cls;
}
複製代碼

這段代碼建立了一個空函數做爲類，並把傳入的原型掛在了它的prototype，最後建立了一個它的實例，根據 new 的的行爲，這將產生一個以傳入的第一個參數爲原型的對象。

ES6中的類

類的基本寫法

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

複製代碼

經過get/set來建立getter，經過括號和大括號來建立方法，數據型成員寫在構造器裏。

類提供了繼承能力

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.

複製代碼

比起早期的原型模擬方式，使用 extends 關鍵字自動設置了 constructor，而且會自動調用父類的構造函數，這是一種更少坑的設計。