Δημιουργία Κλάσεων ή Οντοτήτων της ECMAScript

Η χρήση προκαθορισμένων αντικειμένων είναι μόνο μια από τις δυνατότητες της οδηγικής γλώσσας, η πραγματική ισχύς της βρίσκεται στην ικανότητα δημιουργίας εξειδικευμένων κλάσεων και αντικειμένων.

Το ECMAScript έχει πολλά μέθοδους δημιουργίας αντικειμένων ή κλάσεων.

Μέθοδος εργοστασίου

Αρχική μέθοδος

Γιατί οι ιδιότητες του αντικειμένου μπορούν να οριστούν δυναμικά μετά τη δημιουργία του αντικειμένου, πολλοί προγραμματιστές έγραψαν κώδικα όπως ο παρακάτω κατά την αρχική εισαγωγή του JavaScript:

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
  alert(this.color);
}

TIY

Στο παραπάνω κώδικα, δημιουργείται το αντικείμενο car. Στη συνέχεια, του προστίθενται μερικές ιδιότητες: το χρώμα του είναι μπλε, έχει τέσσερα πόρτα και μπορεί να διανύσει 25 μίλια ανά γαλόνι. Η τελευταία ιδιότητα είναι ένας δείκτης σε συνάρτηση, που σημαίνει ότι η ιδιότητα αυτή είναι μια μέθοδος. Μετά την εκτέλεση αυτού του κώδικα, μπορεί να χρησιμοποιηθεί το αντικείμενο car.

Ωστόσο, υπάρχει ένα πρόβλημα εδώ, που είναι η ανάγκη για τη δημιουργία πολλαπλών παραδειγμάτων του car.

Λύση: Μέθοδος εργοστασίου

Για να λύσουμε αυτό το πρόβλημα, οι προγραμματιστές δημιουργούν εργοστασιακές συναρτήσεις που μπορούν να δημιουργήσουν και να επιστρέψουν αντικείμενα συγκεκριμένου τύπου.

Για παράδειγμα, η συνάρτηση createCar() μπορεί να χρησιμοποιηθεί για να συνοψίσει τις ενέργειες δημιουργίας του αντικειμένου car που αναφέρονται παραπάνω:

function createCar() {
  var oTempCar = new Object;
  oTempCar.color = "blue";
  oTempCar.doors = 4;
  oTempCar.mpg = 25;
  oTempCar.showColor = function() {
    alert(this.color);
  }
  return oTempCar;
}
var oCar1 = createCar();
var oCar2 = createCar();

TIY

Εδώ, όλο το κώδικα του πρώτου παραδείγματος περιλαμβάνεται μέσα στη συνάρτηση createCar(). Επιπλέον, υπάρχει μια επιπλέον γραμμή κώδικα που επιστρέφει το αντικείμενο car (oTempCar) ως τιμή της συνάρτησης. Η κλήση αυτής της συνάρτησης δημιουργεί νέο αντικείμενο και του δίνει όλες τις απαραίτητες ιδιότητες, αντιγράφοντας ένα αντικείμενο car που έχουμε αναφέρει προηγουμένως. Με αυτόν τον τρόπο, μπορούμε εύκολα να δημιουργήσουμε δύο εκδόσεις του αντικειμένου car (oCar1 και oCar2), που έχουν ίδιες ιδιότητες.

Μεταφορά παραμέτρων στη συνάρτηση

Μπορούμε επίσης να τροποποιήσουμε τη συνάρτηση createCar(), ώστε να της παρέχουμε προεπιλεγμένες τιμές για τις ιδιότητες, αντί να απλώς δίνουμε προεπιλεγμένες τιμές στις ιδιότητες:

function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = function() {
    alert(this.color);
  }
  return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();		//输出 "red"
oCar2.showColor();		//输出 "blue"

TIY

Με την προσθήκη παραμέτρων στη συνάρτηση createCar(), μπορεί να δοθούν τιμές στις ιδιότητες color, doors και mpg του αντικειμένου car που δημιουργείται. Αυτός ο τρόπος επιτρέπει σε δύο αντικείμενα να έχουν τις ίδιες ιδιότητες, αλλά διαφορετικές τιμές.

Δημιουργία μεθόδων αντικειμένων εκτός της συνάρτησης εργοστασίου

Η ECMAScript γίνεται όλο και πιο επίσημη, αλλά οι τρόποι δημιουργίας αντικειμένων αγνοούνται και η τυποποίησή τους συνεχίζει να αντιτίθεται. Μέρος είναι λόγος σημασιολογίας (δεν φαίνεται τόσο επίσημος όπως η χρήση του υπολογιστή new), και μέρος είναι λόγος λειτουργικότητας. Ο λόγος λειτουργικότητας βρίσκεται στο γεγονός ότι με αυτόν τον τρόπο πρέπει να δημιουργηθούν οι μέθοδοι των αντικειμένων. Στο παραπάνω παράδειγμα, κάθε φορά που καλείται η συνάρτηση createCar(), δημιουργείται νέα συνάρτηση showColor(), που σημαίνει ότι κάθε αντικείμενο έχει τη δική του έκδοση showColor(). Πράγματι, όλα τα αντικείμενα μοιράζονται την ίδια συνάρτηση.

有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避免这个问题:

function showColor() {
  alert(this.color);
}
function createCar(sColor,iDoors,iMpg) {
  var oTempCar = new Object;
  oTempCar.color = sColor;
  oTempCar.doors = iDoors;
  oTempCar.mpg = iMpg;
  oTempCar.showColor = showColor;
  return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor();		//输出 "red"
oCar2.showColor();		//输出 "blue"

TIY

Σε αυτό το αναθεωρημένο κείμενο, η συνάρτηση showColor() ορίζεται πριν από τη συνάρτηση createCar(). Στην εσωτερική περιοχή της createCar(), δίνεται ένας δείκτης προς τη συνάρτηση showColor() που ήδη υπάρχει. Από λειτουργική άποψη, αυτό λύνει το πρόβλημα της επαναληπτικής δημιουργίας αντικειμένων συναρτήσεων; αλλά από语义ική άποψη, η συνάρτηση δεν φαίνεται πολύ σαν μέθοδος αντικειμένου.

όλες αυτές οι ερωτήσεις προκαλούνο προγραμματιστής ορίζειη εμφάνιση του κατασκευαστή.

Μέθοδος κατασκευαστή

Η δημιουργία κατασκευαστών είναι τόσο εύκολη όσο και η δημιουργία εργοστασίων λειτουργιών. Η πρώτη στάση είναι η επιλογή του ονόματος της κλάσης, δηλαδή του ονόματος του κατασκευαστή. Κατ' αρχήν, η πρώτη λέξη του ονόματος είναι κεφαλαία, ώστε να διαχωρίζεται από τα ονόματα των μεταβλητών που είναι συνήθως πεζά. Εκτός από αυτό, ο κατασκευαστής φαίνεται πολύ παρόμοιος με την εργοστασιακή λειτουργία. Σκεφτείτε τον παρακάτω παράδειγμα:

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.showColor = function() {
    alert(this.color);
  }
}
var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

TIY

Ακολουθεί η εξήγηση των διαφορών μεταξύ του κώδικα και της μεθόδου εργοστασίου. Πρώτα απ' όλα, μέσα στον κατασκευαστή δεν δημιουργείται αντικείμενο, αλλά χρησιμοποιείται η λέξη-κλειδί this. Όταν χρησιμοποιείται ο οπτικοποιητής new για τον κατασκευαστή, δημιουργείται ένα αντικείμενο πριν από την εκτέλεση της πρώτης γραμμής κώδικα, και μόνο με τη χρήση του this μπορεί να προσφερθεί στο αντικείμενο. Στη συνέχεια, μπορεί να αποδοθεί στο this το χαρακτηριστικό, με προεπιλογή είναι η επιστροφή του κατασκευαστή (δεν απαιτείται να χρησιμοποιηθεί η έκφραση return).

Τώρα, η δημιουργία αντικειμένων με τον οπέρτη new και το όνομα της κλάσης Car είναι πιο όπως η δημιουργία γενικών αντικειμένων ECMAScript.

Μπορείτε να ρωτήσετε αν υπάρχει το ίδιο πρόβλημα διαχείρισης λειτουργιών με τον προηγούμενο τρόπο; Ναι.

Κατά τα ίδια, όπως οι λειτουργίες εργοστασίου, οι συνάρτησεις κατασκευής δημιουργούν συνεχώς λειτουργίες, δημιουργώντας ανεξάρτητες εκδόσεις λειτουργιών για κάθε αντικείμενο. Ωστόσο, όπως οι λειτουργίες εργοστασίου, μπορεί να επανγραφείται η συνάρτηση κατασκευής με εξωτερική συνάρτηση, κάτι που δεν έχει σημασία semantic. Αυτό είναι το πλεονέκτημα του τρόπου του πρωτοτύπου που θα μιλήσουμε.

Ο τρόπος του πρωτοτύπου

Αυτός ο τρόπος χρησιμοποιεί την ιδιότητα prototype του αντικειμένου, και μπορεί να θεωρηθεί ως το πρωτότυπο που εξαρτάται η δημιουργία του νέου αντικειμένου.

Εδώ, πρώτα χρησιμοποιείται ένας κενός συνάρτηση κατασκευής για να ρυθμίσει το όνομα της κλάσης. Στη συνέχεια, όλες οι ιδιότητες και τα μεθόδους αποδίδονται απευθείας στην ιδιότητα prototype. Αναθεωρούμε τον παρακάτω παράδειγμα, όπως ακολουθεί:

function Car() {
}
Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.showColor = function() {
  alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();

TIY

Σε αυτό το κομμάτι του κώδικα, πρώτα ορίζεται η συνάρτηση κατασκευής (Car), χωρίς καμία κώδικας. Στις επόμενες γραμμές, τα στοιχεία του πρωτοτύπου προστίθενται στην ιδιότητα prototype του Car για να ορίσουν τις ιδιότητες του αντικειμένου Car. Όταν καλείται το new Car(), όλες οι ιδιότητες του πρωτοτύπου παραδίδονται αμέσως στο αντικείμενο που δημιουργείται, που σημαίνει ότι όλες οι στιγμές Car αποθηκεύουν ποντήρες στην συνάρτηση showColor(). ΣταSemantic, όλες οι ιδιότητες φαίνονται να ανήκουν σε ένα αντικείμενο, και έτσι λύνονται τα προβλήματα των δύο προηγούμενων μεθόδων.

Επιπλέον, με αυτόν τον τρόπο, μπορεί να χρησιμοποιηθεί ο μοναδικός οπέρτης instanceof για να ελέγξει τον τύπο του αντικειμένου που δείχνει η μεταβλητή. Επομένως, το παρακάτω κώδικας θα εμφανίσει TRUE:

alert(oCar1 instanceof Car);	// Έξοδος "true"

Το πρόβλημα του τρόπου του πρωτοτύπου

Ο τρόπος του πρωτοτύπου φαίνεται να είναι μια καλή λύση. Ωστόσο, δεν είναι εξίσου ικανοποιητική.

Πρώτα απ' όλα, αυτή η συνάρτηση κατασκευής δεν έχει παραμέτρους. Με τον τρόπο του πρωτοτύπου, δεν μπορεί να χρησιμοποιηθεί η παράμετρος της συνάρτησης κατασκευής για να�始化 την τιμή της ιδιότητας, επειδή οι ιδιότητες color του Car1 και Car2 είναι ισότιμες με "blue", οι ιδιότητες doors είναι ισότιμες με 4, και οι ιδιότητες mpg είναι ισότιμες με 25. Αυτό σημαίνει ότι οι τιμές των ιδιοτήτων πρέπει να αλλάξουν μετά τη δημιουργία του αντικειμένου, κάτι που είναι πολύ ενοχλητικό, αλλά δεν είναι ακόμα το τέλος. Η πραγματική πρόβλημα εμφανίζεται όταν οι ιδιότητες δείχνουν σε αντικείμενα, όχι σε συναρτήσεις. Η κοινή χρήση των συναρτήσεων δεν προκαλεί προβλήματα, αλλά τα αντικείμενα είναι σπάνια που μοιράζονται μεταξύ πολλών στιγμών. Πιστέψτε μου, να σκεφτείτε τον παρακάτω παράδειγμα:

function Car() {
}
Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.drivers = new Array("Mike","John");
Car.prototype.showColor = function() {
  alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();
oCar1.drivers.push("Bill");
alert(oCar1.drivers);	//Εμφάνιση "Mike,John,Bill"
alert(oCar2.drivers);	//Εμφάνιση "Mike,John,Bill"

TIY

Στον παραπάνω κώδικα, η ιδιότητα drivers είναι ένας δείκτης προς το αντικείμενο Array, το οποίο περιέχει τους δύο ονόματα "Mike" και "John". Επειδή η drivers είναι μια τιμή αναφοράς, και οι δύο περιπτώσεις του Car παραπέμπουν στον ίδιο πίνακα. Αυτό σημαίνει ότι η προσθήκη της τιμής "Bill" στην oCar1.drivers θα εμφανιστεί και στην oCar2.drivers. Η εμφάνιση οποιουδήποτε από αυτών των δείκτες θα δείξει τη αλφαβητική ακολουθία "Mike,John,Bill".

Επειδή υπάρχουν τόσα πολλά προβλήματα στη δημιουργία αντικειμένων, σίγουρα θα ήθελα να ρωτήσεις αν υπάρχει μια λογική μέθοδος δημιουργίας αντικειμένων. Η απάντηση είναι ναι, απαιτείται η συνδυασμένη χρήση κατασκευαστών και πρωτοτύπων.

Μίξη κατασκευαστών/προτύπων

Η συνδυασμένη χρήση κατασκευαστών και πρωτοτύπων επιτρέπει τη δημιουργία αντικειμένων όπως με άλλες γλώσσες προγραμματισμού. Η έννοια αυτή είναι πολύ απλή, δηλαδή η χρήση κατασκευαστών για τη διάκριση όλων των μη συνάρτητων ιδιοτήτων του αντικειμένου, και η χρήση πρωτοτύπων για τη διάκριση των συνάρτητων ιδιοτήτων (μεθόδων) του αντικειμένου. Το αποτέλεσμα είναι ότι όλες οι συναρτήσεις δημιουργούνται μόνο μια φορά, ενώ κάθε αντικείμενο έχει την δική του σύνθεση ιδιοτήτων.

Αναθεωρήσαμε τον προηγούμενο παράδειγμα, ο κώδικας είναι ως εξής:

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
}
Car.prototype.showColor = function() {
  alert(this.color);
}
var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);
oCar1.drivers.push("Bill");
alert(oCar1.drivers);	//Εμφάνιση "Mike,John,Bill"
alert(oCar2.drivers);	//Εμφάνιση "Mike,John"

TIY

Τώρα είναι πιο πολύ όπως δημιουργία γενικών αντικειμένων. Όλες οι μη συνάρτηση ιδιότητες δημιουργούνται στο κατασκευαστή, που σημαίνει ότι μπορούν να δοθούν προεπιλεγμένες τιμές στις ιδιότητες μέσω των παραμέτρων του κατασκευαστή. Επειδή δημιουργείται μόνο μια εικόνα της συνάρτησης showColor(), δεν υπάρχει σπατάλη μνήμης. Επιπλέον, η προσθήκη της τιμής "Bill" στην λίστα οδηγών του oCar1 δεν επηρεάζει τη λίστα του oCar2, οπότε όταν εμφανίζονται οι τιμές αυτών των λιστών, το oCar1.drivers εμφανίζει "Mike,John,Bill", ενώ το oCar2.drivers εμφανίζει "Mike,John". Επειδή χρησιμοποιείται η μέθοδος του πρωτοτύπου, εξακολουθεί να μπορεί να χρησιμοποιηθεί ο ρυθμιστής instanceof για να διαγνωστεί ο τύπος του αντικειμένου.

This is the main approach adopted by ECMAScript, which has the characteristics of other approaches without their side effects. However, some developers still think that this method is not perfect.

Dynamic Prototype Method

For developers accustomed to using other languages, using the mixed constructor/protoype approach may not feel as harmonious. After all, when defining a class, most object-oriented languages visually encapsulate properties and methods. Consider the following Java class:

class Car {
  public String color = "blue";
  public int doors = 4;
  public int mpg = 25;
  public Car(String color, int doors, int mpg) {
    this.color = color;
    this.doors = doors;
    this.mpg = mpg;
  }
  public void showColor() {
    System.out.println(color);
  }
}

Java packages all properties and methods of the Car class well, so seeing this code knows what it is supposed to do, it defines the information of an object. Critics of the mixed constructor/protoype approach argue that it is illogical to find properties within the constructor and methods outside of it. Therefore, they designed the dynamic prototype method to provide a more friendly coding style.

The basic idea of dynamic prototype methods is similar to the mixed constructor/protoype approach, that is, non-function properties are defined within the constructor, while function properties are defined using prototype properties. The only difference is the position of the method assignment to the object. Below is the Car class rewritten using dynamic prototype methods:

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
  if (typeof Car._initialized == "undefined"}) {
    Car.prototype.showColor = function() {
      alert(this.color);
    }
    Car._initialized = true;
  }
}

TIY

直到检查 typeof Car._initialized 是否等于 "undefined" 之前,这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义,构造函数将用原型方式继续定义对象的方法,然后把 Car._initialized 设置为 true。如果这个值定义了(它的值为 true 时,typeof 的值为 Boolean),那么就不再创建该方法。简而言之,该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次,传统的 OOP 开发者会高兴地发现,这段代码看起来更像其他语言中的类定义了。

Μέθοδος μείξης εργοστασιακής συνάρτησης

Αυτός ο τρόπος είναι συνήθως μια εναλλακτική λύση όταν δεν μπορεί να εφαρμοστεί ο προηγούμενος τρόπος. Σκοπός του είναι να δημιουργήσει ψευδείς κατασκευαστές, που επιστρέφουν νέες στιγμές αντικειμένων.

Αυτός ο κώδικας μοιάζει πολύ με μια εργοστασιακή συνάρτηση:

function Car() {
  var oTempCar = new Object;
  oTempCar.color = "blue";
  oTempCar.doors = 4;
  oTempCar.mpg = 25;
  oTempCar.showColor = function() {
    alert(this.color);
  }
  return oTempCar;
}

TIY

Διαφορετικά από τον κλασικό τρόπο, αυτός ο τρόπος χρησιμοποιεί τον τελεστή new, κάνοντας τον να μοιάζει με πραγματικό κατασκευαστή:

var car = new Car();

Επειδή ο κατασκευαστής Car() καλεί τον τελεστή new, θα αγνοηθεί ο δεύτερος τελεστής new (τοποθετημένος εκτός κατασκευαστή), και το αντικείμενο που δημιουργείται εντός του κατασκευαστή θα μεταφερθεί πίσω στη μεταβλητή car.

Αυτή η μέθοδος έχει τα ίδια προβλήματα με την κλασική μέθοδο στην διαχείριση των μεθόδων του αντικειμένου. Σταθερά προτείνουμε να αποφεύγετε αυτή τη μέθοδο, εκτός αν είναι απολύτως απαραίτητο.

Ποια μέθοδος να χρησιμοποιήσετε

Ως αναφέρθηκε προηγουμένως, η πιο ευρέως χρησιμοποιούμενη μέθοδος είναι η μείξη κατασκευαστών/προτύπων. Επιπλέον, οι δυναμικοί πρωτοτύποι είναι επίσης δημοφιλείς, και είναι λειτουργικά ισοδύναμοι με τους κατασκευαστές/προτύπους. Μπορείτε να χρησιμοποιήσετε οποιαδήποτε από αυτές τις δύο μεθόδους. Ωστόσο, μην χρησιμοποιείτε μόνο τον κλασικό κατασκευαστή ή τον τρόπο προτύπων, καθώς αυτό μπορεί να προκαλέσει προβλήματα στον κώδικα.

Παράδειγμα

Η ενδιαφέρουσα πτυχή των αντικειμένων είναι ο τρόπος με τον οποίο λύνουν προβλήματα. Ένα από τα πιο συχνά προβλήματα στην ECMAScript είναι η απόδοση της συνένωση字符串. Ωστόσο, όπως και σε άλλες γλώσσες, οι字符串 στην ECMAScript είναι αμετάβλητες, δηλαδή οι τιμές τους δεν μπορούν να αλλάξουν. Ας δούμε τον παρακάτω κώδικα:

var str = "hello ";
str += "world";

Θα πρέπει να ξέρετε ότι αυτή η διαδικασία εκτελείται στο παρασκήνιο ως εξής:

  1. Δημιουργήστε μια αλφαβητική που θα αποθηκεύσει το "hello ";
  2. Δημιουργήστε μια αλφαβητική που θα αποθηκεύσει το "world".
  3. Δημιουργήστε μια αλφαβητική που θα αποθηκεύσει το αποτέλεσμα της συνδεσμολογίας.
  4. Αντιγράψτε το τρέχον περιεχόμενο του str στο αποτέλεσμα.
  5. Αντιγράψτε το "world" στο αποτέλεσμα.
  6. Ενημερώστε το str, ώστε να δείχνει στο αποτέλεσμα.

Κάθε φορά που ολοκληρώνεται η συνδυασμός αλφαβητικών εκτελείται τα βήματα 2 έως 6, κάτι που κάνει αυτή τη λειτουργία πολύ πόνητη. Αν επαναλάβουμε αυτό το πρόβλημα几百次, ακόμα και χιλιάδες φορές, μπορεί να προκαλέσει προβλήματα απόδοσης. Η λύση είναι να αποθηκεύσουμε τα αλφαβητικά σε ένα πίνακα και στη συνέχεια να δημιουργήσουμε το τελικό αλφαβητικό χρησιμοποιώντας τη μέθοδο join() (παράμετρος είναι το κενό). Ας φανταστούμε ότι αντικαταστήσουμε τον προηγούμενο κώδικα με τον παρακάτω:

var arr = new Array();
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("...");

Επομένως, δεν υπάρχει πρόβλημα με την εισαγωγή οποιουδήποτε αλφαβητικού στην λίστα, επειδή η συνδεσμολογία συμβαίνει μόνο όταν καλείται η μέθοδος join(). Σε αυτή την περίπτωση, τα βήματα που εκτελούνται είναι τα εξής:

  1. Δημιουργήστε μια αλφαβητική που θα αποθηκεύσει το αποτέλεσμα
  2. Αντιγράψτε κάθε αλφαβητικό στην κατάλληλη θέση του αποτελέσματος

Αν και αυτή η λύση είναι καλή, υπάρχει μια καλύτερη μέθοδος. Το πρόβλημα είναι ότι αυτός ο κώδικας δεν αντικατοπτρίζει ακριβώς την πρόθεσή του. Για να γίνει πιο κατανοητή, μπορούμε να πακέταζουμε αυτή τη λειτουργία με τη χρήση της κλάσης StringBuffer:

function StringBuffer () {
  this._strings_ = new Array();
}
StringBuffer.prototype.append = function(str) {
  this._strings_.push(str);
}
StringBuffer.prototype.toString = function() {
  
}

Το πρώτο που πρέπει να δώσουμε προσοχή είναι η ιδιωτική ιδιότητα strings, η οποία έχει μόνο δύο μεθόδους, δηλαδή τις μεθόδους append() και toString(). Η μέθοδος append() έχει ένα παράμετρο, η οποία προσθέτει τον παράμετρο σε μια λίστα αλφαβητικών, ενώ η μέθοδος toString() καλεί τη μέθοδο join του πίνακα, επιστρέφοντας το πραγματικά συνδεδεμένο αλφαβητικό. Για να συνδέσουμε μια ομάδα αλφαβητικών χρησιμοποιώντας αντικείμενο StringBuffer, μπορούμε να χρησιμοποιήσουμε τον παρακάτω κώδικα:

var buffer = new StringBuffer();
buffer.append("hello ");
buffer.append("world");
var result = buffer.toString();

TIY

Μπορείτε να δοκιμάσετε την απόδοση του αντικειμένου StringBuffer και της παραδοσιακής μεθόδου συνδυασμού字符串 με τον παρακάτω κώδικα:

var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
    str += "text";
}
var d2 = new Date();
document.write("Concatenation with plus: ")
 + (d2.getTime() - d1.getTime()) + " milliseconds");
var buffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 10000; i++) {
    buffer.append("text");
}
var result = buffer.toString();
d2 = new Date();
document.write("<br />Concatenation with StringBuffer: ")
 + (d2.getTime() - d1.getTime()) + " milliseconds");

TIY

Αυτό το κείμενο κάνει δύο δοκιμές συνδυασμού字符串, την πρώτη με την προσθήκη και τη δεύτερη με την κλάση StringBuffer. Κάθε ενέργεια συνδυάζει 10000 strings. Οι τιμές ημερομηνίας d1 και d2 χρησιμοποιούνται για την κρίση του χρόνου που απαιτείται για την ολοκλήρωση της ενέργειας. Σημειώστε ότι όταν δημιουργείτε αντικείμενα Date χωρίς παραμέτρους, το αντικείμενο αποδίδεται η τρέχουσα ημερομηνία και ώρα. Για να υπολογίσετε τον χρόνο που απαιτείται για την ενέργεια συνδυασμού, αρκεί να αφαιρέσετε την εκδήλωση της χιλιάδων της ημερομηνίας (την επιστροφή του μεθόδου getTime()). Αυτό είναι ένα συχνό μέθοδο για την μέτρηση της απόδοσης του JavaScript. Τα αποτελέσματα της δοκιμής μπορούν να σας βοηθήσουν να συγκρίνετε την απόδοση της κλάσης StringBuffer με την προσθήκη.