it-swarm-ja.tech

JavaScriptのクラスキーワード

この記事 によると、それはクラスを定義するJavascript 2.0の方法でなければなりません。しかし、実際にはそれを見たことがありません。したがって質問。 classキーワードの使用方法と、JavaScript 1.xの方法の違いは何ですか?

39

実際に使用されているclassキーワードを見たことがない理由は JavaScriptの現在の実装はすべて1.xです

JavaScript 2.0はECMAScript 4にマージされましたが、あまり人気がありませんでした であり、現実の世界には決して含まれていません。

では、質問に答えるために、classキーワードをどのように使用しますか?できません。

46
Dave Webb

私はこれが古い投稿であることを知っていますが、今日(つまりECMAScript 6)の登場により、JavaScriptクラスを宣言できるようになりました。

構文は次のとおりです。

class Person{
  constructor(name){
    this.name = name;
  }
  printName(){
    console.log('Name is '+this.name);
  }
}
var john = new Person('John Doe');
john.printName(); // This prints 'Name is John Doe'

これに関する完全なガイドは this post にあります

54
Akhil Arjun

概要

ES6classキーワードが導入されました。 classキーワードは、既存のプロトタイプの継承パターンに加えて、単なる構文上の砂糖にすぎません。 JavaScriptのクラスは、基本的に、newキーワードを使用して新しいオブジェクトを作成するために使用できるコンストラクター関数を作成するもう1つの方法です。

class Person {

  constructor(name) {
    this.name = name;
  }
  talk() { console.log('hi'); }
}

const me = new Person('Willem');

console.log(typeof Person) 
// logs function, Person class is just another constructor function under the hood

console.log(me.__proto__ === Person.prototype) 
// logs true, classes just use the same prototypal inheritance pattern which is used by constructor functions. 
// An object created with the new keyword gets a __proto__ property on it which is a reference to the prototype property on a constructor function.

上記のサンプルでは、​​最初のログで、クラスがclassキーワードから実際に作成する関数であることがわかります。

console.log(typeof Person) // logs 'function'

es6クラスは、コンストラクター関数で使用されるのと同じプロトタイプの継承パターンを使用します。この動作を示す別の例を次に示します。

class Dog {

  constructor (name) {
      this.name = name;
  }
  
  bark () { console.log('bark') };

}

let doggie = new Dog('fluffy');

doggie.bark(); // logs bark


Dog.prototype.bark = () => console.log('woof');  
// changing the prototype of Dog, doggie refers to this with its __proto__ property. 
//Therefore doggie bark method has also changed.


doggie.bark(); // logs woof

上記の例の要点は、任意のdogインスタンスのbarkメソッドを実行時に変更できることです。これは、Dogクラスで作成されたオブジェクトのbarkメソッドがこの関数を参照しているだけだからです。

6

実際にはJavaScript 2.0をサポートするものはほとんどないため、実際にそれを見たことはありません。そのドラフトは、ドラフト以外になる前に廃止された仕様からのものです。

5
Quentin

クラス作成のECMA5方法を追加するだけです。

この方法にはコンストラクター関数がないことに注意してください(ただし、必要に応じてinit関数をトリガーできます)。

var Class = {
      el: null,
      socket: null,

      init: function (params) {

        if (!(this.el instanceof HTMLElement)) {
          throw new Error('Chat room has no DOM element to attach on.');
        }

        return this.doStuff();

      },
      doStuff: function (params) {
        return this;
      }
};

var instanceofClass = Object.create(Class, {
  el: {
    value: document.body.querySelector('.what ever')
  },
  someMoreData: {
    value: [0,5,7,3]
  }
}).init();
0
Kewin

もちろん、プロトタイプを使用して、JSでクラスを構築することもできます。

var foo = function() {
  this.hurrah = "yay!";
  return this;
}

foo.prototype.doit() {
  alert(this.hurrah);
}
0
casey

JavaまたはC#のバックグラウンドがある場合、JavaScriptでクラスを定義する方法は次のとおりです

var MyClass = function (f, l){//constructor 
    //private members
    var firstName = f,
        lastName = l,
        fullName = function () { //fullName is a private function
            return firstName + " " + lastName;
        };
    return {
        //public members
        getFullName: fullName 
    };
}

var output = document.getElementById('Output'); //<div id="Output"></div>
var myName = new MyClass("First", "Last");
output.innerHTML = myName.getFullName();
0
MAlshehri