class
類這個東西原來只在我練習(xí)面試題和學(xué)習(xí)canvas的時候做一些小游戲時才會用到。直到一天要去讀到同事寫的代碼,發(fā)現(xiàn)他大量地用到類。后來又在自學(xué)java的時候,終于明白。為什么在es6 Class終于要被提上進程了。
更好地組織代碼像我們在用Vue寫頁面的時候,我們會把數(shù)據(jù)存在data中,然后當(dāng)中存放一些對象數(shù)據(jù)來代表我們頁面中的組件內(nèi)容。組件來操作這些數(shù)據(jù)。但當(dāng)我們的頁面內(nèi)容越來越豐富之后,data會變得很龐大。當(dāng)然為了操作這些data我們還需要有對應(yīng)的methods來操作。慢慢的這個vue文件就會變得越來越難掌握。
這時候假如用class的思路想一下,一個組件或者一個局部的頁面塊。我們用class來處理,數(shù)據(jù)和操作方法存在實例本身。這樣不僅減少了代碼量。整體項目看起來,把握項目內(nèi)容的難度也會減少。(其實就是vue文件與Vue的關(guān)系一樣)
class這個其實是語法糖,在我們學(xué)習(xí)構(gòu)造函數(shù)的時候,我們知道想要做出一樣效果,我們需要
function People(name,age){ this.name = name; this.age = age; } // 假如需要添加函數(shù)還要 People.prototype.say=function(){ console.log("hello) }
而class為我們提過了一個很簡單的寫法
class People{ constructor(name,age){ this.name = name; this.age = age; } say(){ console.log("hello) } } // 創(chuàng)造實例 let a = new People("tom",23);
注意:class沒有聲明提升,聲明必須寫在前。而構(gòu)造函數(shù)有聲明提示。
constructorconstructor用來創(chuàng)建和初始化一個由class創(chuàng)建的對象。一個類只能擁有一個名為 “constructor”的特殊方法。他用來接受class在被創(chuàng)建的時候傳入的參。并且他本身負責(zé)構(gòu)建屬于他的數(shù)據(jù)結(jié)構(gòu)。
staticstatic是class的靜態(tài)方法。寫法是:
class Animal { speak() { return this; } // 與其他方法同層 static eat() { return this; } }
class里的一般方法,一般用于調(diào)用或者修改操作實例里的數(shù)據(jù)。而靜態(tài)方法一般與數(shù)據(jù)關(guān)系不大,是一個類的通用方法。調(diào)用方法也是直接在類中調(diào)用。
//一般方法 let obj = new Animal(); obj.speak(); // Animal {} let speak = obj.speak; speak(); // undefined //靜態(tài)方法 Animal.eat() // class Animal let eat = Animal.eat; eat(); // undefinedextends
class可以繼承class,就是所謂的大類小類。
// 先創(chuàng)建動物類 class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + " makes a noise."); } } // 再創(chuàng)建狗類,它繼承動物類 class Dog extends Animal { constructor(){ super(); } speak() { console.log(this.name + " barks."); } } var d = new Dog("Mitzie"); d.speak();// "Mitzie barks."super
首先,ES6 要求,子類的構(gòu)造函數(shù)必須執(zhí)行一次super函數(shù)。而super有兩種用法。1,做函數(shù)。2,做對象。
1.super雖然代表了父類A的構(gòu)造函數(shù),但是返回的是子類B的實例,即super內(nèi)部的this指的是B,因此super()在這里相當(dāng)于A.prototype.constructor.call(this)。
class A {} class B extends A { constructor() { super(); } }
2.做對象。做對象時它指向父類的構(gòu)造函數(shù),可以調(diào)用它的靜態(tài)方法,方法等。
class Human { constructor() {} static ping() { return "ping"; } } class Computer extends Human { constructor() {} static pingpong() { return super.ping() + " pong"; } } Computer.pingpong(); // "ping pong"
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/105467.html
摘要:我們已經(jīng)回答了的構(gòu)造函數(shù)和原型都是誰的問題,現(xiàn)在牽扯出來一個,我們繼續(xù)檢查的構(gòu)造函數(shù)是全局對象上屬性叫的對象的原型是個匿名函數(shù),按照關(guān)于構(gòu)造函數(shù)的約定,它應(yīng)該是構(gòu)造函數(shù)的屬性我們給這個對象起個名字,叫。 我不確定JavaScript語言是否應(yīng)該被稱為Object-Oriented,因為Object Oriented是一組語言特性、編程模式、和設(shè)計與工程方法的籠統(tǒng)稱謂,沒有一個詳盡和大家...
摘要:中的使用自己感覺蠻糾結(jié)的,根據(jù)文檔很好理解,其實很難確定你是否真正的理解。將被用作當(dāng)前對象的對象。方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛芍付ǖ男聦ο蟆W罨镜睦斫庾远x一個類,該類有一個方法,用來顯示當(dāng)前對象的值。 Javascript中call的使用自己感覺蠻糾結(jié)的,根據(jù)文檔很好理解,其實很難確定你是否真正的理解。 call 方法 應(yīng)用于:Function 對象 調(diào)用一個...
摘要:不區(qū)分類和實例的概念,而是通過原型來實現(xiàn)面向?qū)ο缶幊獭P聞?chuàng)建的的原型鏈?zhǔn)且簿褪钦f,的原型指向函數(shù)的原型。最后,創(chuàng)建一個對象代碼和前面章節(jié)完全一樣小明繼承用定義對象的另一個巨大的好處是繼承更方便了。 JavaScript不區(qū)分類和實例的概念,而是通過原型(prototype)來實現(xiàn)面向?qū)ο缶幊獭?原型是指當(dāng)我們想要創(chuàng)建xiaoming這個具體的學(xué)生時,我們并沒有一個Student類型可用...
摘要:原文地址詳解的類博主博客地址的個人博客從當(dāng)初的一個彈窗語言,一步步發(fā)展成為現(xiàn)在前后端通吃的龐然大物。那么,的類又該怎么定義呢在面向?qū)ο缶幊讨?,類是對象的模板,定義了同一組對象又稱實例共有的屬性和方法。這個等同于的屬性現(xiàn)已棄用。。 前言 生活有度,人生添壽。 原文地址:詳解javascript的類 博主博客地址:Damonare的個人博客 ??Javascript從當(dāng)初的一個彈窗語言,一...
閱讀 1605·2021-09-23 11:21
閱讀 2365·2021-09-07 10:13
閱讀 847·2021-09-02 10:19
閱讀 1143·2019-08-30 15:44
閱讀 1735·2019-08-30 13:18
閱讀 1921·2019-08-30 11:15
閱讀 1118·2019-08-29 17:17
閱讀 2026·2019-08-29 15:31