生活有度,人生添壽。javascript
原文地址:詳解javascript的類前端
博主博客地址:Damonare的我的博客vue
Javascript從當初的一個「彈窗語言」,一步步發展成爲如今先後端通吃的龐然大物。javascript的受歡迎程度也是與日俱增,今年最受歡迎編程語言又是花落javascript,這實在是一個充滿了活力的語言。現在,隨隨便一個網頁javascript代碼量都不下數千行,要是node後端那更不止幾千行了。(WTF)代碼量的增長給編程帶來的首要的問題就是如何去編寫和維護如此龐大的代碼呢?答案就是模塊化思想,其實就是面向對象(OOP)編程,現在比較流行的三大前端框架(angular,react,vue)基本都實現了組件化編程,但組件化和咱們所說的模塊化又有所不一樣,應該能夠這麼理解,組件化是模塊化的升級版,模塊化是組件化的基礎。那麼,問題來了,javascript怎麼面向對象編程呢?我想這不少老鳥也不定說的清楚吧,前端雜而活躍的各類社區,不少前端er一度依賴各類插件,根本不須要去了解這些深層的東西卻照樣能完成任務。但我想做爲一個有追求的前端er仍是頗有必要去學習這些看似用不着的東西的,別的不說,就單單由於咱們是前端er,只會用jquery一個稍微厲害的後端都能代替你。好吧,廢話很少說,到底如何面向對象coding呢.....
很不幸,es5中並無給出明確的定義‘類’的概念,因此傳統的面向對象編程彷佛是行不通的,那麼又該腫麼辦呢?值得慶幸的是,前輩們經過不斷探索總結,成功的用javascript模擬出了「類」。那麼,javascript的類又該怎麼定義呢?
java
在面向對象編程中,類(class)是對象(object)的模板,定義了同一組對象(又稱"實例")共有的屬性和方法。node
說到javascript中的「類」就不得不說原型鏈和繼承了,由於javascript是沒有真正意義上的類的,所謂的類就是基於原型鏈和繼承來實現的,即便ES6中加入了class,extends關鍵字實現類和繼承,但實際上仍是基於原型鏈和繼承, ES6 類(class)是 JavaScript 現有的原型繼承的語法糖。react
「
在 javaScript 中,每一個對象都有一個指向它的原型(prototype)對象的內部連接。這個原型對象又有本身的原型,直到某個對象的原型爲 null 爲止(也就是再也不有原型指向),組成這條鏈的最後一環。這種一級一級的鏈結構就稱爲原型鏈(prototype chain)。
」
jquery
實際上在定義一個對象的時候原型鏈自己就已經生成了,javascript到處皆對象的思想放在這裏理解起來就很容易了,看完後你會發現萬物始於Object.prototype。那麼咱們都是如何定義一個對象的呢,博主總結的方法以下幾個:git
先初步來個demo具體解釋下原型鏈是咋回事吧:github
//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.複製代碼
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複製代碼
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複製代碼
我想如今應該是明白了吧,再不明白博主也是無能爲力了,表達能力實在有限。
總算說到類了,因爲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複製代碼
定義一個類的方法實際上也是上面所說的定義一個對象的方法,類自己就是一個對象,只不過這個對象裏面的方法和屬性能夠供許多實例對象調用而已。
總的來講對於類的理解仍是須要不斷探索的,路漫漫其修遠兮,吾將上下而求索。