CoffeeScript - 類與繼承

上一頁
下一頁

JavaScript 沒有提供 class 關鍵字。我們可以使用物件及其原型在 JavaScript 中實現繼承。每個物件都有自己的原型，它們從其原型繼承函式和屬性。由於原型也是一個物件，因此它也有自己的原型。

儘管原型繼承比經典繼承強大得多，但對於新手使用者來說，它卻難以理解且令人困惑。

CoffeeScript 中的類

為了解決這個問題，CoffeeScript 提供了一個稱為 class 的基本結構，該結構是使用 JavaScript 的原型構建的。您可以使用 class 關鍵字在 CoffeeScript 中定義類，如下所示。

class Class_Name

示例

考慮以下示例，這裡我們使用關鍵字 class 建立了一個名為 Student 的類。

class Student

如果您編譯上述程式碼，它將生成以下 JavaScript 程式碼。

var Student;

Student = (function() {
  function Student() {}

  return Student;

})();

例項化類

我們可以像其他面向物件程式語言一樣，使用 new 運算子例項化類，如下所示。

new Class_Name

您可以使用 new 運算子例項化上面建立的 (Student) 類，如下所示。

class Student
new  Student

如果您編譯上述程式碼，它將生成以下 JavaScript 程式碼。

var Student;

Student = (function() {
  function Student() {}

  return Student;

})();

new Student;

定義建構函式

建構函式是在例項化類時呼叫的函式，其主要目的是初始化例項變數。在 CoffeeScript 中，您可以透過建立一個名為 constructor 的函式來定義建構函式，如下所示。

class Student
  constructor: (name)->
  @name = name

在這裡，我們定義了一個建構函式並將區域性變數 name 賦值給例項變數。

@ 運算子是 this 關鍵字的別名，它用於指向類的例項變數。

如果我們在建構函式的引數前放置 @，則它將自動設定為例項變數。因此，上述程式碼可以簡化為如下所示 -

class Student
  constructor: (@name)->

示例

這是一個 CoffeeScript 中建構函式的示例。將其儲存在名為 constructor_example.coffee 的檔案中。

#Defining a class
class Student
  constructor: (@name)->

#instantiating a class by passing a string to constructor
student = new Student("Mohammed");
console.log "the name of the student is :"+student.name

編譯程式碼

開啟命令提示符並編譯上述示例，如下所示。

c:\>coffee -c constructor_example.coffee

執行上述命令將生成以下 JavaScript 程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var Student, student;

  Student = (function() {
    function Student(name) {
      this.name = name;
    }

    return Student;

  })();

  student = new Student("Mohammed");

  console.log("The name of the student is :"+student.name);

}).call(this);

執行程式碼

透過在命令提示符上執行以下命令來執行上述示例。

coffee constructor_example.coffee

執行後，上述示例將為您提供以下輸出。

The name of the student is :Mohammed

例項屬性

與物件相同，我們也可以在類中擁有屬性。這些被稱為 例項屬性。

示例

考慮以下示例。在這裡，我們在類中建立了變數 (name, age) 和函式 (message())，並使用其物件訪問了它們。將此示例儲存在名為 instance_properties_example.coffee 的檔案中。

#Defining a class
class Student
  name="Ravi"
  age=24
  message: ->
    "Hello "+name+" how are you" 

#instantiating a class by passing a string to constructor
student = new Student();
console.log student.message()

編譯後，上述程式碼生成以下輸出。

// Generated by CoffeeScript 1.10.0
(function() {
  var Student, student;

  Student = (function() {
    var age, name;

    function Student() {}

    name = "Ravi";

    age = 24;

    Student.prototype.message = function() {
      return "Hello " + name + " how are you";
    };

    return Student;

  })();

  student = new Student();

  console.log(student.message());

}).call(this);

靜態屬性

我們可以在類中定義靜態屬性。靜態屬性的作用域僅限於類內，我們使用 this 關鍵字 或其別名 @ 符號建立靜態函式，並且必須使用類名作為 Class_Name.property 來訪問這些屬性。

示例

在以下示例中，我們建立了一個名為 message 的靜態函式。並訪問了它。將其儲存在名為 static_properties_example.coffee 的檔案中。

#Defining a class
class Student
  @message:(name) ->
    "Hello "+name+" how are you" 
console.log Student.message("Raju")

開啟命令提示符並使用以下命令編譯上述 CoffeeScript 檔案。

c:\>coffee -c  static_properties_example.coffee

編譯後，它將為您提供以下 JavaScript 程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var Student;

  Student = (function() {
    function Student() {}

    Student.message = function(name) {
      return "Hello " + name + " how are you";
    };

    return Student;

  })();

  console.log(Student.message("Raju"));

}).call(this);

在命令提示符中執行上述 CoffeeScript，如下所示。

c:\>coffee static_properties_example.coffee

執行後，上述示例將為您提供以下輸出。

Hello Raju how are you

繼承

在 CoffeeScript 中，我們可以使用 extends 關鍵字在一個類中繼承另一個類的屬性。

示例

以下是在 CoffeeScript 中繼承的示例。在這裡，我們有兩個類，即 Add 和 My_class。我們在 My_class 類中繼承了名為 Add 類的屬性，並使用 extends 關鍵字訪問了它們。

#Defining a class
class Add
   a=20;b=30
   
   addition:->
     console.log "Sum of the two numbers is :"+(a+b) 

class My_class extends Add

my_class = new My_class()
my_class.addition()

CoffeeScript 在幕後使用原型繼承。在 CoffeeScript 中，每當我們建立例項時，都會呼叫父類的建構函式，直到我們覆蓋它。

我們可以使用 super() 關鍵字從子類呼叫父類的建構函式，如下面的示例所示。

#Defining a class
class Add
   constructor:(@a,@b) ->
   
   addition:=>
     console.log "Sum of the two numbers is :"+(@a+@b) 

class Mul extends Add
   constructor:(@a,@b) ->
     super(@a,@b)
   
   multiplication:->
     console.log "Product of the two numbers is :"+(@a*@b)

mul = new Mul(10,20)
mul.addition()
mul.multiplication()

動態類

CoffeeScript 使用原型繼承自動繼承類的所有例項屬性。這確保了類是動態的；即使在建立子類後向父類新增屬性，該屬性仍將傳播到其所有繼承的子類。

class Animal
  constructor: (@name) ->

class Parrot extends Animal

Animal::rip = true

parrot = new Parrot("Macaw")
console.log "This parrot is no more" if parrot.rip

執行後，上述 CoffeeScript 將生成以下 JavaScript 程式碼。

// Generated by CoffeeScript 1.10.0
(function() {
  var Animal, Parrot, parrot,
    extend = function(child, parent) { for (var key in parent) {
      if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() {
      this.constructor = child; } ctor.prototype = parent.prototype;
      child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
    hasProp = {}.hasOwnProperty;

  Animal = (function() {
    function Animal(name) {
      this.name = name;
    }

    return Animal;

  })();

  Parrot = (function(superClass) {
    extend(Parrot, superClass);

    function Parrot() {
      return Parrot.__super__.constructor.apply(this, arguments);
    }

    return Parrot;

  })(Animal);

  Animal.prototype.rip = true;

  parrot = new Parrot("Macaw");

  if (parrot.rip) {
    console.log("This parrot is no more");
  }
  
}).call(this);
列印頁面
上一頁
下一頁
廣告