国产日韩精品一区二区三区在线,欧美女孩性生活视频,久久精品国产91精品亚洲

詳解 javascript 的類

2016-11-3 藍(lán)藍(lán)設(shè)計(jì)的小編

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

前言

生活有度，人生添壽。

Javascript從當(dāng)初的一個(gè)“彈窗語(yǔ)言”，一步步發(fā)展成為現(xiàn)在前后端通吃的龐然大物。javascript的受歡迎程度也是與日俱增，今年編程語(yǔ)言又是花落javascript，這實(shí)在是一個(gè)充滿了活力的語(yǔ)言。如今，隨隨便一個(gè)網(wǎng)頁(yè)javascript代碼量都不下數(shù)千行，要是node后端那更不止幾千行了。（WTF）代碼量的增加給編程帶來(lái)的首要的問(wèn)題就是如何去編寫和維護(hù)如此龐大的代碼呢？答案就是模塊化思想，其實(shí)就是面向?qū)ο螅∣OP）編程，如今比較流行的三大前端框架（angular,react,vue）基本都實(shí)現(xiàn)了組件化編程，但組件化和我們所說(shuō)的模塊化又有所不同，應(yīng)該可以這么理解，組件化是模塊化的升級(jí)版，模塊化是組件化的基礎(chǔ)。那么，問(wèn)題來(lái)了，javascript怎么面向?qū)ο缶幊棠兀课蚁脒@很多老鳥(niǎo)也不定說(shuō)的清楚吧，前端雜而活躍的各種社區(qū)，很多前端er一度依賴各種插件，根本不需要去了解這些深層的東西卻照樣能完成任務(wù)。但我想作為一個(gè)有追求的前端er還是很有必要去學(xué)習(xí)這些看似用不著的東西的，別的不說(shuō)，就單單因?yàn)槲覀兪乔岸薳r,只會(huì)用jquery一個(gè)稍微厲害的后端都能代替你。好吧，廢話不多說(shuō)，到底如何面向?qū)ο骳oding呢…..

很不幸，es5中并沒(méi)有給出明確的定義‘類’的概念，所以傳統(tǒng)的面向?qū)ο缶幊趟坪跏切胁煌ǖ模敲从衷撃[么辦呢？值得慶幸的是，前輩們通過(guò)不斷探索總結(jié)，成功的用javascript模擬出了“類”。那么，javascript的類又該怎么定義呢？

在面向?qū)ο缶幊讨校悾╟lass）是對(duì)象（object）的模板，定義了同一組對(duì)象（又稱”實(shí)例”）共有的屬性和方法。

正文

說(shuō)到j(luò)avascript中的“類”就不得不說(shuō)原型鏈和繼承了，因?yàn)閖avascript是沒(méi)有真正意義上的類的，所謂的類就是基于原型鏈和繼承來(lái)實(shí)現(xiàn)的，即使ES6中加入了class,extends關(guān)鍵字實(shí)現(xiàn)類和繼承，但實(shí)際上還是基于原型鏈和繼承， ES6 類（class）是 JavaScript 現(xiàn)有的原型繼承的語(yǔ)法糖。

1. 原型鏈和繼承

“ 在 javaScript 中，每個(gè)對(duì)象都有一個(gè)指向它的原型（prototype）對(duì)象的內(nèi)部鏈接。這個(gè)原型對(duì)象又有自己的原型，直到某個(gè)對(duì)象的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最后一環(huán)。這種一級(jí)一級(jí)的鏈結(jié)構(gòu)就稱為原型鏈（prototype chain）。 ”

原型鏈

實(shí)際上在定義一個(gè)對(duì)象的時(shí)候原型鏈本身就已經(jīng)生成了，javascript處處皆對(duì)象的思想放在這里理解起來(lái)就很容易了，看完后你會(huì)發(fā)現(xiàn)萬(wàn)物始于Object.prototype。那么我們都是如何定義一個(gè)對(duì)象的呢，博主總結(jié)的方法如下幾個(gè)：

先初步來(lái)個(gè)demo具體解釋下原型鏈?zhǔn)钦厥掳桑?

    //someObject.[[Prototype]] 符號(hào)是用于指派 someObject 的原型。這個(gè)等同于 JavaScript 的 __proto__  屬性（現(xiàn)已棄用）。。從 ES6 開(kāi)始, [[Prototype]] 可以用Object.getPrototypeOf()和Object.setPrototypeOf()訪問(wèn)器來(lái)訪問(wèn)。這個(gè)方法可以放心使用博主親測(cè)，主流瀏覽器已經(jīng)支持了  

    // 假定有一個(gè)對(duì)象 o, 其自身的屬性（own properties）有 a 和 b：  

    // {a: 1, b: 2}  

    // o 的原型 o.[[Prototype]]有屬性 b 和 c：  

    // {b: 3, c: 4}  

    // 最后, o.[[Prototype]].[[Prototype]] 是 null.  

    // 這就是原型鏈的末尾，即 null，  

    // 根據(jù)定義，null 沒(méi)有[[Prototype]].  

    // 綜上，整個(gè)原型鏈如下:  

    // {a:1, b:2}---> {b:3, c:4} ---> null  

來(lái)來(lái)來(lái)，擼袖子搞出個(gè)對(duì)象！！！（馬上狗節(jié)，單身狗請(qǐng)自覺(jué)閱讀完此篇博客）

使用普通方法來(lái)創(chuàng)建一個(gè)對(duì)象

demo如下:

    var o={ 

        a:0, 

        b:function(){ 

            console.log(this.a) 

}

}

    //創(chuàng)建一個(gè)對(duì)象 

    //原型鏈如下： 

    //o--->Object.prototype--->null 

    var a = ["yo", "whadup", "?"]; 

    //創(chuàng)建一個(gè)數(shù)組對(duì)象 

    //(indexOf, forEach等方法都是從它繼承而來(lái)). 

    //原型鏈如下： 

    //a--->Array.prototype ---> Object.prototype ---> null 

    function f(){ 

      return 1; 

}

    //創(chuàng)建一個(gè)函數(shù)對(duì)象 

    //(call, bind等方法都是從它繼承而來(lái)): 

    //原型鏈如下： 

    //f ---> Function.prototype ---> Object.prototype ---> null 

    var date=new Date(); 

    //創(chuàng)建一個(gè)日期對(duì)象 

    //原型鏈如下： 

    //date--->Date.prototype--->Object.pprototype--->null 

使用構(gòu)造函數(shù)的方法

在 JavaScript 中，構(gòu)造器其實(shí)就是一個(gè)普通的函數(shù)。當(dāng)使用 new 操作符來(lái)作用這個(gè)函數(shù)時(shí)，它就可以被稱為構(gòu)造方法（構(gòu)造函數(shù)）。——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是生成的對(duì)象,他的自身屬性有'propA'和'propB'. 

    // 在o被實(shí)例化時(shí),o.[[Prototype]]指向了fun.prototype. 

使用Object.create創(chuàng)建對(duì)象

ECMAScript 5 中引入了一個(gè)新方法：Object.create()。可以調(diào)用這個(gè)方法來(lái)創(chuàng)建一個(gè)新對(duì)象。新對(duì)象的原型就是調(diào)用 create 方法時(shí)傳入的第一個(gè)參數(shù)：

var a = {a: 1};

// a ---> Object.prototype ---> null

var b = Object.create(a);

// b ---> a ---> Object.prototype ---> null

console.log(b.a); // 1 (繼承而來(lái))繼承概念下面會(huì)講

var c = Object.create(b);

// c ---> b ---> a ---> Object.prototype ---> null

var d = Object.create(null);

// d ---> null

console.log(d.hasOwnProperty); // undefined, 因?yàn)閐沒(méi)有繼承Object.prototype

使用 class 關(guān)鍵字

ECMAScript6 引入了一套新的關(guān)鍵字用來(lái)實(shí)現(xiàn) class。使用基于類語(yǔ)言的開(kāi)發(fā)人員會(huì)對(duì)這些結(jié)構(gòu)感到熟悉，但它們是不一樣的。 JavaScript 仍然是基于原型的。這些新的關(guān)鍵字包括 class, constructor, static, extends, 和 super.

"use strict";

class Polygon {

  constructor(height, width) {

    this.height = height;

    this.width = width;

  }

}

//定義一個(gè)類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);//實(shí)例對(duì)象

//此時(shí)的原型鏈為：

//square--->Square.prototype--->Polygon.prototype--->Object.prototype--->null

//如果不理解為什么是這樣，不要緊接著往下看類的說(shuō)明

繼承

其實(shí)在上面講原型鏈的時(shí)候難以避免的也提到了繼承，比如來(lái)自MDN的這個(gè)實(shí)例：

    // 假定有一個(gè)對(duì)象 o, 其自身的屬性（own properties）有 a 和 b：  

    // {a: 1, b: 2}  

    // o 的原型 o.[[Prototype]]有屬性 b 和 c：（someObject.[[Prototype]] 符號(hào)是用于指派 someObject 的原型。這個(gè)等同于 JavaScript 的 __proto__  屬性（現(xiàn)已棄用）。。從 ES6 開(kāi)始, [[Prototype]] 可以用Object.getPrototypeOf()和Object.setPrototypeOf()訪問(wèn)器來(lái)訪問(wèn)。）  

    // {b: 3, c: 4}  

    // 最后, o.[[Prototype]].[[Prototype]] 是 null.  

    // 這就是原型鏈的末尾，即 null，  

    // 根據(jù)定義，null 沒(méi)有[[Prototype]].  

    // 綜上，整個(gè)原型鏈如下:  

    // {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]]上還有一個(gè)'b'屬性,但是它不會(huì)被訪問(wèn)到.這種情況稱為"屬性遮蔽 (property shadowing)".  

    console.log(o.c); // 4  

    // c是o的自身屬性嗎？不是，那看看o.[[Prototype]]上有沒(méi)有.  

    // c是o.[[Prototype]]的自身屬性嗎？是的,該屬性的值為4  

    console.log(o.d); // undefined  

    // d是o的自身屬性嗎？不是,那看看o.[[Prototype]]上有沒(méi)有.  

    // d是o.[[Prototype]]的自身屬性嗎？不是，那看看o.[[Prototype]].[[Prototype]]上有沒(méi)有.  

    // o.[[Prototype]].[[Prototype]]為null，停止搜索，  

    // 沒(méi)有d屬性，返回undefined  

—-以上內(nèi)容來(lái)自MDN繼承與原型鏈

我想看到這里還是有些似懂非懂吧，那么來(lái)個(gè)例子吧：

    var object1={ 

        a:1, 

        b:function(){ 

            console.log(this.a+1); 

}

}

    //定義一個(gè)對(duì)象 

    var object2=Object.create(object1); 

    //調(diào)用Object.create來(lái)創(chuàng)建一個(gè)新對(duì)象,新對(duì)象的原型就是調(diào)用 create 方法時(shí)傳入的第一個(gè)參數(shù),現(xiàn)在的原型鏈?zhǔn)牵?/span> 

    //object2--->object1--->object1.prototype--->null 

    object2.d=4; 

    object2.a; 

//1

    //繼承了object1的屬性a 

    object2.b(); 

//2

    //繼承了object1的方法b 

    Object.getPrototypeOf(object2); 

    //object1得到object2的原型object1 

我想現(xiàn)在應(yīng)該是明白了吧，再不明白博主也是無(wú)能為力了，表達(dá)能力實(shí)在有限。

2. 類

總算說(shuō)到類了，由于javascript的類基于原型鏈和繼承，因此在上面的內(nèi)容中就已經(jīng)定義了很多的類。咱們javascript的類同樣能實(shí)現(xiàn)傳統(tǒng)類的多態(tài)，封裝，繼承等特性，這里主要講解了繼承這個(gè)概念，但實(shí)際上很多時(shí)候不經(jīng)意可能就用了這三個(gè)特性。很好玩不是么

首先，我們先看下在ES5中定義一個(gè)類的形式：

function Animal(name) {

this.name = name;

this.sleep = function() {

console.log(this.name+'正在睡覺(jué)');

}

}//定義Animal類

Animal.prototype = {

eat: function(food) {

console.log(this.name+"正在吃"+food);

}

function Cat() {

}

Cat.prototype = new Animal('Tom');

var Tom = new Cat('Tom');/Cat實(shí)例對(duì)象

Tom.eat('貓糧');

//Tom正在吃貓糧

//繼承Animal方法

Tom.sleep();

//Tom正在睡覺(jué)

//繼承Animal方法

//現(xiàn)在的原型鏈：

//Tom(Cat實(shí)例對(duì)象)--->Cat.prototype(Animal實(shí)例對(duì)象)--->Animal.prototype--->Object.prototype--->null

好的，然后我們看下在ES6中改寫上面的類：

        
class Animal { 

  constructor(name) { 

    this.name = name; 

  } 

  sleep() { 

    console.log(this.name + ' 正在睡覺(jué)'); 

  } 

  eat(food){ 

    console.log(this.name+'正在吃'+food)   

  } 

} 

class Cat extends Animal { 

} 

const Tom = new Cat('Tom'); 

Tom.eat('貓糧'); 

//Tom正在吃貓糧 

//繼承Animal方法 

Tom.sleep(); 

//Tom正在睡覺(jué) 

//繼承Animal方法 

//現(xiàn)在的原型鏈： 

//Tom(Cat實(shí)例對(duì)象)--->Cat.prototype(Animal實(shí)例對(duì)象)--->Animal.prototype--->Object.prototype--->null

定義一個(gè)類的方法實(shí)際上也是上面所說(shuō)的定義一個(gè)對(duì)象的方法，類本身就是一個(gè)對(duì)象，只不過(guò)這個(gè)對(duì)象里面的方法和屬性可以供許多實(shí)例對(duì)象調(diào)用而已。

后記

總的來(lái)說(shuō)對(duì)于類的理解還是需要不斷探索的，路漫漫其修遠(yuǎn)兮，吾將上下而求索。

藍(lán)藍(lán)設(shè)計(jì)( m.ocunn.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

« 軟件界面設(shè)計(jì)守則之美觀與協(xié)調(diào)性的詳細(xì)細(xì)則 PM 可以從谷歌 Sprint 學(xué)到的設(shè)計(jì)工作法 »

詳解 javascript 的類

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

前言

正文

1. 原型鏈和繼承

原型鏈

2. 類

后記

分類

日歷

鏈接

個(gè)人資料

存檔

詳解 javascript 的類

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

前言

正文

1. 原型鏈和繼承

原型鏈

2. 類

后記

分類

日歷

鏈接

個(gè)人資料

存檔

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里