[Javascript]Class該怎么用？

douzifly 發布于2019-08-23 18:34 / 2986人閱讀

class

類這個東西原來只在我練習面試題和學習canvas的時候做一些小游戲時才會用到。直到一天要去讀到同事寫的代碼，發現他大量地用到類。后來又在自學java的時候，終于明白。為什么在es6 Class終于要被提上進程了。

更好地組織代碼

像我們在用Vue寫頁面的時候，我們會把數據存在data中，然后當中存放一些對象數據來代表我們頁面中的組件內容。組件來操作這些數據。但當我們的頁面內容越來越豐富之后，data會變得很龐大。當然為了操作這些data我們還需要有對應的methods來操作。慢慢的這個vue文件就會變得越來越難掌握。
這時候假如用class的思路想一下，一個組件或者一個局部的頁面塊。我們用class來處理，數據和操作方法存在實例本身。這樣不僅減少了代碼量。整體項目看起來，把握項目內容的難度也會減少。（其實就是vue文件與Vue的關系一樣）

ES6 class

class這個其實是語法糖，在我們學習構造函數的時候，我們知道想要做出一樣效果，我們需要

function People(name,age){
 this.name = name;
 this.age = age; 
}
// 假如需要添加函數還要
People.prototype.say=function（）{
    console.log("hello)
}

而class為我們提過了一個很簡單的寫法

    class People{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        say(){
            console.log("hello)
        }
    }
    // 創造實例
    let a = new People("tom",23);

注意：class沒有聲明提升，聲明必須寫在前。而構造函數有聲明提示。

constructor

constructor用來創建和初始化一個由class創建的對象。一個類只能擁有一個名為 “constructor”的特殊方法。他用來接受class在被創建的時候傳入的參。并且他本身負責構建屬于他的數據結構。

static

static是class的靜態方法。寫法是：

 class Animal { 
  speak() {
    return this;
  }
  // 與其他方法同層
  static eat() {
    return this;
  }
}

class里的一般方法，一般用于調用或者修改操作實例里的數據。而靜態方法一般與數據關系不大，是一個類的通用方法。調用方法也是直接在類中調用。

    //一般方法
    let obj = new Animal();
    obj.speak(); // Animal {}
    let speak = obj.speak;
    speak(); // undefined

    //靜態方法
    Animal.eat() // class Animal
    let eat = Animal.eat;
    eat(); // undefined

extends

class可以繼承class,就是所謂的大類小類。

// 先創建動物類
class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + " makes a noise.");
  }
}

// 再創建狗類，它繼承動物類
class Dog extends Animal {
    constructor(){
        super();
    }
  speak() {
    console.log(this.name + " barks.");
  }
}

var d = new Dog("Mitzie");
d.speak();// "Mitzie barks."

super

首先，ES6 要求，子類的構造函數必須執行一次super函數。而super有兩種用法。1，做函數。2，做對象。
1.super雖然代表了父類A的構造函數，但是返回的是子類B的實例，即super內部的this指的是B，因此super()在這里相當于A.prototype.constructor.call(this)。

class A {}

class B extends A {
  constructor() {
    super();
  }
}

2.做對象。做對象時它指向父類的構造函數，可以調用它的靜態方法，方法等。

class Human {
  constructor() {}
  static ping() {
    return "ping";
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + " pong";
  }
}
Computer.pingpong(); // "ping pong"

GPU云服務器云服務器 javascript該怎么學 javascript怎么用用js找class javascript腳本怎么用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105467.html

和少婦白潔一起學JavaScript

摘要：我們已經回答了的構造函數和原型都是誰的問題，現在牽扯出來一個，我們繼續檢查的構造函數是全局對象上屬性叫的對象的原型是個匿名函數，按照關于構造函數的約定，它應該是構造函數的屬性我們給這個對象起個名字，叫。我不確定JavaScript語言是否應該被稱為Object-Oriented，因為Object Oriented是一組語言特性、編程模式、和設計與工程方法的籠統稱謂，沒有一個詳盡和大家...

DevTTL 2019-08-20 14:29 評論0 收藏0
Javascript中call的使用

摘要：中的使用自己感覺蠻糾結的，根據文檔很好理解，其實很難確定你是否真正的理解。將被用作當前對象的對象。方法可將一個函數的對象上下文從初始的上下文改變為由指定的新對象。最基本的理解自定義一個類，該類有一個方法，用來顯示當前對象的值。 Javascript中call的使用自己感覺蠻糾結的，根據文檔很好理解，其實很難確定你是否真正的理解。 call 方法應用于：Function 對象調用一個...

Snailclimb 2019-08-19 17:28 評論0 收藏0
js溫故而知新7(面向對象編程)——學習廖雪峰的js教程

摘要：不區分類和實例的概念，而是通過原型來實現面向對象編程。新創建的的原型鏈是也就是說，的原型指向函數的原型。最后，創建一個對象代碼和前面章節完全一樣小明繼承用定義對象的另一個巨大的好處是繼承更方便了。 JavaScript不區分類和實例的概念，而是通過原型（prototype）來實現面向對象編程。原型是指當我們想要創建xiaoming這個具體的學生時，我們并沒有一個Student類型可用...

Jaden 2019-08-21 11:38 評論0 收藏0
詳解javascript的類

摘要：原文地址詳解的類博主博客地址的個人博客從當初的一個彈窗語言，一步步發展成為現在前后端通吃的龐然大物。那么，的類又該怎么定義呢在面向對象編程中，類是對象的模板，定義了同一組對象又稱實例共有的屬性和方法。這個等同于的屬性現已棄用。。前言生活有度，人生添壽。原文地址：詳解javascript的類博主博客地址：Damonare的個人博客 ??Javascript從當初的一個彈窗語言，一...

hufeng 2019-08-29 11:30 評論0 收藏0