重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄, 天天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的能夠加入winter的專欄學習【原文有winter的語音】,若有侵權請聯繫我,郵箱:kaimo313@foxmail.com。
原型是指一個詞語或一個類型意義的全部典型模型或原形象,是一個類型的組典型特徵
諸如 C++、Java 等流行的編程語言是使用類的方式來描述對象,
基於類
的編程提倡使用一個關注分類和類之間關係開發模型。
如 JavaScript 編程語言是利用原型來描述對象,
基於原型
的編程看起來更爲提倡程序員去關注一系列對象實例的行爲,然後纔去關心如何將這些對象,劃分到最近的使用方式類似的原型對象,而不是將它們分紅類。
javaScript選擇了第一種方式。前端
[[prototype]]
,就是對象的原型能夠利用下面三個方法,更直接地訪問操縱原型,來實現抽象和複用。java
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!
全部具備內置 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
。編程語言
[[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
的結果產生了影響。學習
prototype
屬性(注意與私有字段 [[prototype]]
的區分)爲原型,建立新對象this
和調用參數傳給構造器,執行用構造器模擬類的兩種方法: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
class Rectangle { constructor(height, width) { this.height = height; this.width = width; } // Getter get area() { return this.calcArea(); } // Method calcArea() { return this.height * this.width; } }
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部分。prototype
其實對於這一部分非常不明白,也不清楚,對於這些js基礎性的東西仍是要多下下功夫才行,畢竟winter的重學前端真心不錯,對我來講進行查漏補缺,看清本身的水平頗有幫助,路還很長,還要加油呀!!!code