【JavaScript入門】コンストラクタのの使用方法

JavaScriptは、オブジェクトを作成するための複数の方法を提供します。これらの方法には、オブジェクトリテラル、、Object()クラス、およびコンストラクター関数が含まれます。このチュートリアルでは、3番目のオプションを示します。コンストラクター関数とは何か、それらがどのように機能するか、およびそれらを使用してオブジェクトを作成する方法について学習します。
 

オブジェクト、青写真、コンストラクター

JavaScriptでは、オブジェクトの作成に使用できる方法が複数あります。使用できる最も簡単なツールは、オブジェクトリテラル、new Object()またはObject.create()です。しかし、もっと違うものが必要な場合はどうでしょうか。他の同様のオブジェクトを作成するための青写真またはレシピとして使用できるオブジェクトを作成するとどうなりますか？

すべて同じプロパティを持つオブジェクトをいくつか作成したいとします。おそらくメソッドも作成します。あなたは間違いなくこのオブジェクトをリテラルにすることができます。ただし、多くのコードをコピーする必要があります。または、オブジェクトの不要なクローンを作成する必要がありますが、これは予測できない場合があります。

もう1つのオプションは、「コンストラクター」と呼ばれるものを作成することです。このコンストラクターには、さまざまなプロパティとメソッドを含めることができ、それを使用して新しいオブジェクトを作成できます。このコンストラクターで作成する各オブジェクトには、コンストラクターで定義されたすべてのプロパティとメソッドもあります。これにより、時間とコードを大幅に節約できます。

このコンストラクターを作成する1つの方法は、ES6で導入されたJavaScriptクラスを使用することです。もう1つのオプションは、「コンストラクター関数」と呼ばれるものを使用することです。このコンストラクター関数とは何か、それらがどのように機能するか、そしてそれらを使用してオブジェクトを作成する方法を見てみましょう。

コンストラクター関数の基本

コンストラクター関数の構文は単純で単純です。これは、JavaScript関数を知っている場合に特に当てはまります。これら2つの構文はほとんど同じです。すべてのコンストラクター関数はfunctionキーワードで始まります。以下は、コンストラクター関数の名前の名前です。

コンストラクター関数の名前は大文字で始める必要があります。これは必須ではありませんが、一般的な規則であり、優れた方法です。ただし、小文字を使用すると機能します。次はパラメータ付きの括弧です。パラメータを指定したくない場合でも、とにかく括弧を含める必要があります。

最後は、パラメーター付きの括弧の後に続く関数本体です。この本体は、コンストラクターのプロパティとメソッドを指定する場所です。このコンストラクターを使用して新しいオブジェクトを作成すると、すべてのオブジェクトにこれらのプロパティとメソッドが含まれます。

// Syntax of a constructor function:
// - function keyword
// - name of the constructor function
// - parameters for constructor function
// - body of the constructor function
function MyConstructorFunc(param) {
  // Function constructor body.
}

コンストラクター関数を使用したオブジェクトの作成

コンストラクター関数を作成することは1つのことです。それらを使用して新しいオブジェクトを作成することも別の方法です。幸いなことに、これを行う方法は1つしかありません。コンストラクター関数を使用して新しいオブジェクトを作成する場合は、newキーワードを使用します。このキーワードの後に​​は、コンストラクター名と括弧のセットが続きます。

コンストラクターがパラメーターを受け入れる場合は、括弧内に必要な引数を渡します。それ以外の場合は、空のままにします。通常、これは、新しいオブジェクトを変数に割り当てるとともに行います。コンストラクター関数を使用して、必要な数のオブジェクトを作成できることを忘れないでください。

// Create constructor function:
function Person() {}

// Create object with Person constructor:
const personOne = new Person()

// Create another object with Person constructor:
const personTwo = new Person()

プロパティ、メソッドの定義

コンストラクター関数でのプロパティとメソッドの定義は簡単です。とはいえ、覚えておかなければならないことが1つあります。プロパティまたはメソッドを定義する場合は、thisキーワードを使用する必要があります。let、constまたはvarを使用しないでください。変数ではなく、プロパティを定義しようとしています。

したがって、左側で、thisキーワードから始めて、プロパティの名前を指定します。.これら2つの間にドット（）を追加します。右側で、プロパティの値を定義すると完了です。メソッドを定義する場合、プロセスはほとんど同じです。また、thisキーワードに続けてメソッド名を使用する必要があります。

唯一の違いは右側にあります。ここでは、functionキーワードを使用する必要があります。これにより、関数を定義することがJavaScriptに通知されます。通常の関数の代わりに矢印関数を使用することもできます。コンストラクターメソッドを定義すると、コンストラクター内に既に存在する任意のプロパティにアクセスできます。

プロパティにアクセスし、正しく参照するには、thisキーワードを使用する必要があります。thisこの場合には、コンストラクタ関数自体の基準となります。だから、this基本的にはのようconstructorFunctionItselfです。

// Create constructor function:
function Person() {
  // Define properties "name" and "age":
  this.name = 'Anonymous'
  this.age = 35

  // Define method "getName" that returns a short message:
  this.getName = function() {
    // "this" here refers to the "Person" constructor.
    // "this.name" is like "Person.name".
    return `Hello, my name is ${this.name}.`
  }
}

// Create object with Person constructor:
const personOne = new Person()

// Log the value of "name":
console.log(personOne.name)
// Output:
// 'Anonymous'

// Log the "getName" message:
console.log(personOne.getName())
// Output:
// 'Hello, my name is Anonymous.'

// Create another object with Person constructor:
const personTwo = new Person()

// Log the value of "name":
console.log(personTwo.name)
// Output:
// 'Anonymous'

// Log the "getName" message:
console.log(personTwo.getName())
// Output:
// 'Hello, my name is Anonymous.'

コンストラクターの外部でプロパティとメソッドを定義する

コンストラクター関数を定義するときに、コンストラクター関数内でのみプロパティとメソッドを定義することは1つのオプションです。別のオプションは、コンストラクターが作成された後、それらをその外部で定義することです。この場合、prototypeというプロパティを使用します。これは、JavaScriptのすべての関数が持つ特別なプロパティです。

このprototypeプロパティは、コンストラクター関数で定義されたすべてのプロパティとメソッドを含むオブジェクトです。constructorプロパティも含まれています。このプロパティは、現在作業しているコンストラクターを指します。このプロパティを使用すると、プロパティとメソッドをコンストラクターに追加、変更、または削除できます。

// Create constructor function:
function Person() {
  // Define properties "name" and "age":
  this.name = 'Anonymous'
  this.age = 35
}

// Create object with Person constructor:
const personOne = new Person()

// Create another object with Person constructor:
const personTwo = new Person()

// Add properties to Person constructor using prototype:
Person.prototype.gender = 'female'
Person.prototype.height = 1.7

// Log the value of "gender" on "personOne" object:
console.log(personOne.gender)
// Output:
// 'female'

// Log the value of "height" on "personTwo" object:
console.log(personTwo.height)
// Output:
// 1.7

// Add method "getName" to Person constructor using prototype:
Person.prototype.getName = function() {
  // "this" here will correctly refer to the Person constructor.
  // So, "this.name" will again basically become "Person.name".
  return `Hello, my name is ${this.name}.`
}

// Log the message:
console.log(personTwo.getName())
// Output:
// 'Hello, my name is Anonymous.'

注意事項prototype：上記の例でわかるように、覚えておくべきことが1つあります。プロトタイプを介してコンストラクターにプロパティまたはメソッドを追加する場合、そのコンストラクターで既に作成されているすべてのオブジェクトにも追加します。

コンストラクターオブジェクトのプロパティとメソッドの定義

プロパティまたはメソッドを追加したい場合がありますが、すべてではなく1つのオブジェクトにのみ追加します。この場合、prototypeプロパティまたはメソッドがどこにでも追加されるため、はオプションではありません。代わりにできることは、プロパティまたはメソッドを特定のオブジェクトに直接追加することです。たとえば、ドット表記を使用します。

この後、手元のオブジェクトのみがその新しいプロパティまたはメソッドを持ちます。同じコンストラクターで作成された他のオブジェクトはそうではありません。これは、プロパティまたはメソッドを通常のオブジェクトに追加するために使用する方法です。コンストラクターで作成されたすべてのオブジェクトはオブジェクトです。したがって、これはここでも機能します。

// Create constructor function:
function Person() {
  // Define properties "name" and "age":
  this.name = 'Anonymous'
  this.age = 35
}

// Create object with Person constructor:
const personOne = new Person()

// Create another object with Person constructor:
const personTwo = new Person()

// Add property "gender" only to "personOne" object:
personOne.gender = 'female'

// Add property "height" only to "personTwo" object:
personTwo.height = 1.7

// Log the value of "gender" on "personOne" object:
console.log(personOne.gender)
// Output:
// 'female'

// Log the value of "height" on "personOne" object:
console.log(personOne.height)
// Output:
// undefined // <= this is correct, height exists only on personTwo

// Log the value of "gender" on "personTwo" object:
console.log(personTwo.gender)
// Output:
// undefined // <= this is correct, gender exists only on personOne

// Log the value of "height" on "personTwo" object:
console.log(personTwo.height)
// Output:
// 1.7

// Add "getGender()" method only to "personOne" object:
personOne.getGender = function() {
  return `I am a ${this.gender}.`
}

// Add "getHeight()" method only to "personTwo" object:
personTwo.getHeight = function() {
  return `I am ${this.height}m tall.`
}

// Call the "getGender()" method on "personOne" object:
console.log(personOne.getGender())
// Output:
// 'I am a female.'

// Call the "getHeight()" method on "personOne" object:
console.log(personOne.getHeight())
// Output:
// TypeError: personOne.getHeight is not a function

// Call the "getGender()" method on "personTwo" object:
console.log(personTwo.getGender())
// Output:
// TypeError: personTwo.getGender is not a function

// Call the "getHeight()" method on "personTwo" object:
console.log(personTwo.getHeight())
// Output:
// 'I am 1.7m tall.'

コンストラクター関数とパラメーター

オブジェクトの青写真を作成するオプションは素晴らしいです。これまで、すべてのデータが静的で変更できないコンストラクターの例を見てきました。これが唯一の方法という意味ではありません。最初に、構文について説明したときに、パラメーターについて簡単に説明しました。

これは、コンストラクター関数をより動的にする方法です。通常の関数のパラメーターを定義できるのと同じように、コンストラクターのパラメーターも定義できます。コンストラクターの場合、newキーワードを使用してオブジェクトを作成するときに引数を指定します。これらの引数は、構成名に続く括弧内に渡します。

コンストラクターのいくつかのパラメーターを定義すると、コンストラクター内のどこでもそれを使用できます。Personこのチュートリアル全体で作業してきたコンストラクターを取り上げます。通常、2つのプロパティが含まれています：nameとage。これらの2つのプロパティをすべてのオブジェクトで同じにすることは、意味がありません。

両方のプロパティを静的な値で定義する代わりに、コンストラクターに2つのパラメーターを追加できます。プロパティごとに1つのパラメータ。次に、コンストラクター内で、これらのパラメーターを使用して、指定された値でこれらのプロパティーを割り当てることができます。これにより、nameとageプロパティの値が異なるオブジェクトを作成できます。

// Create constructor function
// that accepts two parameters, "name" and "age":
function Person(name, age) {
  // Define properties and assign them
  // with values provided for "name" and "age":
  this.name = name
  this.age = age
}

// Create object with Person constructor:
const personOne = new Person('Stan', 33)

// Create another object with Person constructor:
const personTwo = new Person('July', 29)

// Log the value of "name" on "personOne" object:
console.log(personOne.name)
// Output:
// 'Stan'

// Log the value of "age" on "personOne" object:
console.log(personOne.age)
// Output:
// 33

// Log the value of "name" on "personTwo" object:
console.log(personTwo.name)
// Output:
// 'July'

// Log the value of "age" on "personTwo" object:
console.log(personTwo.age)
// Output:
// 29

コンストラクター関数とこれについて一言

thisあなたはコンストラクタ関数を操作するときのキーワードは非常に重要です。新しいプロパティとメソッドを定義するときに使用します。またthis、プロパティにアクセスしてメソッドを呼び出す場合にもキーワードを使用します。ただし、thisキーワードを使用する頻度は関係ありません。

this当時、それが何を指しているのかを理解することは、答えるのが難しい質問である場合があります。これが簡単な答えです。の値はthis、次の2つのいずれかになります。まず、関数コンストラクターを使用している場合、値はコンストラクターになります。

次に、コンストラクターを使用して新しいオブジェクトを作成すると、の値がthis新しいオブジェクトになります。これは、作成するすべてのインスタンス、すべての新しいオブジェクトに適用されます。の値thisは常にその特定のオブジェクトになります。

// Create constructor function:
function Person(name, age) {
  // "this" here refers to the constructor function.
  // this.name => Person.name
  this.name = name
  this.age = age
}

const objJoe = new Person('Joe', 19)

// For "objJoe" object the value of "this"
// will be the "objJoe" object itself.
// So, "this.name" in constructor will become "objJoe.name".
console.log(objJoe.name)
// Output:
// 'Joe'

const objTim = new Person('Tim', 23)

// For "objTim" object the value of "this"
// will be the "objTim" object itself.
// So, "this.name" in constructor will become "objTim.name".
console.log(objJoe.name)
// Output:
// 'Tim'

結論：JavaScriptコンストラクター関数の使用を開始する

コンストラクター関数は、同じ形状でコードが少ない複数のオブジェクトを作成する場合に役立ちます。また、コードの変更と保守を容易にすることもできます。このチュートリアルが、コンストラクター関数とは何か、それらがどのように機能するか、およびそれらを使用してオブジェクトを作成する方法を理解するのに役立つことを願っています。

この記事が気に入ったら、今後の投稿を見逃さないように購読してください。

リンク: https://blog.alexdevero.com/javascript-constructor-functions/

#javascript 

What is GEEK

Buddha Community

【JavaScript入門】コンストラクタのの使用方法

JavaScriptは、オブジェクトを作成するための複数の方法を提供します。これらの方法には、オブジェクトリテラル、、Object()クラス、およびコンストラクター関数が含まれます。このチュートリアルでは、3番目のオプションを示します。コンストラクター関数とは何か、それらがどのように機能するか、およびそれらを使用してオブジェクトを作成する方法について学習します。
 

オブジェクト、青写真、コンストラクター

JavaScriptでは、オブジェクトの作成に使用できる方法が複数あります。使用できる最も簡単なツールは、オブジェクトリテラル、new Object()またはObject.create()です。しかし、もっと違うものが必要な場合はどうでしょうか。他の同様のオブジェクトを作成するための青写真またはレシピとして使用できるオブジェクトを作成するとどうなりますか？

すべて同じプロパティを持つオブジェクトをいくつか作成したいとします。おそらくメソッドも作成します。あなたは間違いなくこのオブジェクトをリテラルにすることができます。ただし、多くのコードをコピーする必要があります。または、オブジェクトの不要なクローンを作成する必要がありますが、これは予測できない場合があります。

もう1つのオプションは、「コンストラクター」と呼ばれるものを作成することです。このコンストラクターには、さまざまなプロパティとメソッドを含めることができ、それを使用して新しいオブジェクトを作成できます。このコンストラクターで作成する各オブジェクトには、コンストラクターで定義されたすべてのプロパティとメソッドもあります。これにより、時間とコードを大幅に節約できます。

このコンストラクターを作成する1つの方法は、ES6で導入されたJavaScriptクラスを使用することです。もう1つのオプションは、「コンストラクター関数」と呼ばれるものを使用することです。このコンストラクター関数とは何か、それらがどのように機能するか、そしてそれらを使用してオブジェクトを作成する方法を見てみましょう。

コンストラクター関数の基本

コンストラクター関数の構文は単純で単純です。これは、JavaScript関数を知っている場合に特に当てはまります。これら2つの構文はほとんど同じです。すべてのコンストラクター関数はfunctionキーワードで始まります。以下は、コンストラクター関数の名前の名前です。

コンストラクター関数の名前は大文字で始める必要があります。これは必須ではありませんが、一般的な規則であり、優れた方法です。ただし、小文字を使用すると機能します。次はパラメータ付きの括弧です。パラメータを指定したくない場合でも、とにかく括弧を含める必要があります。

最後は、パラメーター付きの括弧の後に続く関数本体です。この本体は、コンストラクターのプロパティとメソッドを指定する場所です。このコンストラクターを使用して新しいオブジェクトを作成すると、すべてのオブジェクトにこれらのプロパティとメソッドが含まれます。

// Syntax of a constructor function:
// - function keyword
// - name of the constructor function
// - parameters for constructor function
// - body of the constructor function
function MyConstructorFunc(param) {
  // Function constructor body.
}

コンストラクター関数を使用したオブジェクトの作成

コンストラクター関数を作成することは1つのことです。それらを使用して新しいオブジェクトを作成することも別の方法です。幸いなことに、これを行う方法は1つしかありません。コンストラクター関数を使用して新しいオブジェクトを作成する場合は、newキーワードを使用します。このキーワードの後に​​は、コンストラクター名と括弧のセットが続きます。

コンストラクターがパラメーターを受け入れる場合は、括弧内に必要な引数を渡します。それ以外の場合は、空のままにします。通常、これは、新しいオブジェクトを変数に割り当てるとともに行います。コンストラクター関数を使用して、必要な数のオブジェクトを作成できることを忘れないでください。

// Create constructor function:
function Person() {}

// Create object with Person constructor:
const personOne = new Person()

// Create another object with Person constructor:
const personTwo = new Person()

プロパティ、メソッドの定義

コンストラクター関数でのプロパティとメソッドの定義は簡単です。とはいえ、覚えておかなければならないことが1つあります。プロパティまたはメソッドを定義する場合は、thisキーワードを使用する必要があります。let、constまたはvarを使用しないでください。変数ではなく、プロパティを定義しようとしています。

したがって、左側で、thisキーワードから始めて、プロパティの名前を指定します。.これら2つの間にドット（）を追加します。右側で、プロパティの値を定義すると完了です。メソッドを定義する場合、プロセスはほとんど同じです。また、thisキーワードに続けてメソッド名を使用する必要があります。

唯一の違いは右側にあります。ここでは、functionキーワードを使用する必要があります。これにより、関数を定義することがJavaScriptに通知されます。通常の関数の代わりに矢印関数を使用することもできます。コンストラクターメソッドを定義すると、コンストラクター内に既に存在する任意のプロパティにアクセスできます。

プロパティにアクセスし、正しく参照するには、thisキーワードを使用する必要があります。thisこの場合には、コンストラクタ関数自体の基準となります。だから、this基本的にはのようconstructorFunctionItselfです。

// Create constructor function:
function Person() {
  // Define properties "name" and "age":
  this.name = 'Anonymous'
  this.age = 35

  // Define method "getName" that returns a short message:
  this.getName = function() {
    // "this" here refers to the "Person" constructor.
    // "this.name" is like "Person.name".
    return `Hello, my name is ${this.name}.`
  }
}

// Create object with Person constructor:
const personOne = new Person()

// Log the value of "name":
console.log(personOne.name)
// Output:
// 'Anonymous'

// Log the "getName" message:
console.log(personOne.getName())
// Output:
// 'Hello, my name is Anonymous.'

// Create another object with Person constructor:
const personTwo = new Person()

// Log the value of "name":
console.log(personTwo.name)
// Output:
// 'Anonymous'

// Log the "getName" message:
console.log(personTwo.getName())
// Output:
// 'Hello, my name is Anonymous.'

コンストラクターの外部でプロパティとメソッドを定義する

コンストラクター関数を定義するときに、コンストラクター関数内でのみプロパティとメソッドを定義することは1つのオプションです。別のオプションは、コンストラクターが作成された後、それらをその外部で定義することです。この場合、prototypeというプロパティを使用します。これは、JavaScriptのすべての関数が持つ特別なプロパティです。

このprototypeプロパティは、コンストラクター関数で定義されたすべてのプロパティとメソッドを含むオブジェクトです。constructorプロパティも含まれています。このプロパティは、現在作業しているコンストラクターを指します。このプロパティを使用すると、プロパティとメソッドをコンストラクターに追加、変更、または削除できます。

// Create constructor function:
function Person() {
  // Define properties "name" and "age":
  this.name = 'Anonymous'
  this.age = 35
}

// Create object with Person constructor:
const personOne = new Person()

// Create another object with Person constructor:
const personTwo = new Person()

// Add properties to Person constructor using prototype:
Person.prototype.gender = 'female'
Person.prototype.height = 1.7

// Log the value of "gender" on "personOne" object:
console.log(personOne.gender)
// Output:
// 'female'

// Log the value of "height" on "personTwo" object:
console.log(personTwo.height)
// Output:
// 1.7

// Add method "getName" to Person constructor using prototype:
Person.prototype.getName = function() {
  // "this" here will correctly refer to the Person constructor.
  // So, "this.name" will again basically become "Person.name".
  return `Hello, my name is ${this.name}.`
}

// Log the message:
console.log(personTwo.getName())
// Output:
// 'Hello, my name is Anonymous.'

注意事項prototype：上記の例でわかるように、覚えておくべきことが1つあります。プロトタイプを介してコンストラクターにプロパティまたはメソッドを追加する場合、そのコンストラクターで既に作成されているすべてのオブジェクトにも追加します。

コンストラクターオブジェクトのプロパティとメソッドの定義

プロパティまたはメソッドを追加したい場合がありますが、すべてではなく1つのオブジェクトにのみ追加します。この場合、prototypeプロパティまたはメソッドがどこにでも追加されるため、はオプションではありません。代わりにできることは、プロパティまたはメソッドを特定のオブジェクトに直接追加することです。たとえば、ドット表記を使用します。

この後、手元のオブジェクトのみがその新しいプロパティまたはメソッドを持ちます。同じコンストラクターで作成された他のオブジェクトはそうではありません。これは、プロパティまたはメソッドを通常のオブジェクトに追加するために使用する方法です。コンストラクターで作成されたすべてのオブジェクトはオブジェクトです。したがって、これはここでも機能します。

// Create constructor function:
function Person() {
  // Define properties "name" and "age":
  this.name = 'Anonymous'
  this.age = 35
}

// Create object with Person constructor:
const personOne = new Person()

// Create another object with Person constructor:
const personTwo = new Person()

// Add property "gender" only to "personOne" object:
personOne.gender = 'female'

// Add property "height" only to "personTwo" object:
personTwo.height = 1.7

// Log the value of "gender" on "personOne" object:
console.log(personOne.gender)
// Output:
// 'female'

// Log the value of "height" on "personOne" object:
console.log(personOne.height)
// Output:
// undefined // <= this is correct, height exists only on personTwo

// Log the value of "gender" on "personTwo" object:
console.log(personTwo.gender)
// Output:
// undefined // <= this is correct, gender exists only on personOne

// Log the value of "height" on "personTwo" object:
console.log(personTwo.height)
// Output:
// 1.7

// Add "getGender()" method only to "personOne" object:
personOne.getGender = function() {
  return `I am a ${this.gender}.`
}

// Add "getHeight()" method only to "personTwo" object:
personTwo.getHeight = function() {
  return `I am ${this.height}m tall.`
}

// Call the "getGender()" method on "personOne" object:
console.log(personOne.getGender())
// Output:
// 'I am a female.'

// Call the "getHeight()" method on "personOne" object:
console.log(personOne.getHeight())
// Output:
// TypeError: personOne.getHeight is not a function

// Call the "getGender()" method on "personTwo" object:
console.log(personTwo.getGender())
// Output:
// TypeError: personTwo.getGender is not a function

// Call the "getHeight()" method on "personTwo" object:
console.log(personTwo.getHeight())
// Output:
// 'I am 1.7m tall.'

コンストラクター関数とパラメーター

オブジェクトの青写真を作成するオプションは素晴らしいです。これまで、すべてのデータが静的で変更できないコンストラクターの例を見てきました。これが唯一の方法という意味ではありません。最初に、構文について説明したときに、パラメーターについて簡単に説明しました。

これは、コンストラクター関数をより動的にする方法です。通常の関数のパラメーターを定義できるのと同じように、コンストラクターのパラメーターも定義できます。コンストラクターの場合、newキーワードを使用してオブジェクトを作成するときに引数を指定します。これらの引数は、構成名に続く括弧内に渡します。

コンストラクターのいくつかのパラメーターを定義すると、コンストラクター内のどこでもそれを使用できます。Personこのチュートリアル全体で作業してきたコンストラクターを取り上げます。通常、2つのプロパティが含まれています：nameとage。これらの2つのプロパティをすべてのオブジェクトで同じにすることは、意味がありません。

両方のプロパティを静的な値で定義する代わりに、コンストラクターに2つのパラメーターを追加できます。プロパティごとに1つのパラメータ。次に、コンストラクター内で、これらのパラメーターを使用して、指定された値でこれらのプロパティーを割り当てることができます。これにより、nameとageプロパティの値が異なるオブジェクトを作成できます。

// Create constructor function
// that accepts two parameters, "name" and "age":
function Person(name, age) {
  // Define properties and assign them
  // with values provided for "name" and "age":
  this.name = name
  this.age = age
}

// Create object with Person constructor:
const personOne = new Person('Stan', 33)

// Create another object with Person constructor:
const personTwo = new Person('July', 29)

// Log the value of "name" on "personOne" object:
console.log(personOne.name)
// Output:
// 'Stan'

// Log the value of "age" on "personOne" object:
console.log(personOne.age)
// Output:
// 33

// Log the value of "name" on "personTwo" object:
console.log(personTwo.name)
// Output:
// 'July'

// Log the value of "age" on "personTwo" object:
console.log(personTwo.age)
// Output:
// 29

コンストラクター関数とこれについて一言

thisあなたはコンストラクタ関数を操作するときのキーワードは非常に重要です。新しいプロパティとメソッドを定義するときに使用します。またthis、プロパティにアクセスしてメソッドを呼び出す場合にもキーワードを使用します。ただし、thisキーワードを使用する頻度は関係ありません。

this当時、それが何を指しているのかを理解することは、答えるのが難しい質問である場合があります。これが簡単な答えです。の値はthis、次の2つのいずれかになります。まず、関数コンストラクターを使用している場合、値はコンストラクターになります。

次に、コンストラクターを使用して新しいオブジェクトを作成すると、の値がthis新しいオブジェクトになります。これは、作成するすべてのインスタンス、すべての新しいオブジェクトに適用されます。の値thisは常にその特定のオブジェクトになります。

// Create constructor function:
function Person(name, age) {
  // "this" here refers to the constructor function.
  // this.name => Person.name
  this.name = name
  this.age = age
}

const objJoe = new Person('Joe', 19)

// For "objJoe" object the value of "this"
// will be the "objJoe" object itself.
// So, "this.name" in constructor will become "objJoe.name".
console.log(objJoe.name)
// Output:
// 'Joe'

const objTim = new Person('Tim', 23)

// For "objTim" object the value of "this"
// will be the "objTim" object itself.
// So, "this.name" in constructor will become "objTim.name".
console.log(objJoe.name)
// Output:
// 'Tim'

結論：JavaScriptコンストラクター関数の使用を開始する

コンストラクター関数は、同じ形状でコードが少ない複数のオブジェクトを作成する場合に役立ちます。また、コードの変更と保守を容易にすることもできます。このチュートリアルが、コンストラクター関数とは何か、それらがどのように機能するか、およびそれらを使用してオブジェクトを作成する方法を理解するのに役立つことを願っています。

この記事が気に入ったら、今後の投稿を見逃さないように購読してください。

リンク: https://blog.alexdevero.com/javascript-constructor-functions/

#javascript 

【JavaScript入門】これまで講座で学習した知識をフル活用しよう

今回のJavaScript講座はこれまでの集大成です。
JSの仕事は「データのやり取り」「DOM操作」ですが、今回で実感できるかと思います。
今まで勉強して学んだJavaScriptの知識をフル活用しましょう。
今後もJavaScriptプログラミング講座は続けていきますが
新しい分野に突入します。そちらもお楽しみに♪

 

🐙 GitHub（使用したコード）
https://github.com/lightsound/javascript-class/tree/master/009_callApi-addDOM

📙 もくじ
0:00 今回つくるものを紹介
1:27 コードを書く準備
2:46 JavaScriptでIDがついているタグを変数に格納
3:43 ボタンにクリックイベントを追加する
4:45 ユーザーを取得するWeb APIを叩く
6:41 ボタンを押してli要素が追加されるようにする
9:48 APIで取得したユーザーをli要素として追加する
12:37 名前以外にもli要素として追加することができる
13:40 forEach以外の書き方も紹介
15:13 if文で条件も追加してみる
17:20 ページを読み込んだときにユーザーをli要素に追加する
18:43 リファクタリング① 同じ記述を共通化する
20:46 リファクタリング② 処理を分解する
23:35 リファクタリング③ 順序を整理する
24:01 リファクタリング④ コメントを追加する
24:38 リファクタリングの重要性を解説
25:59 今回の講座は今までの講座の集大成です
27:19 クロージング（高評価とコメントお願いします）

🔥基礎から学ぶ JavaScript 入門
【第1回】フロントエンド開発でJavaScriptが必要な理由を解説
 

【第2回】Twitterを例にJavaScriptがどんな働きをするのか理解しよう
 

【第3回】オブジェクト・プロパティ・メソッドについて理解しよう
 

【第4回】オブジェクトを実際にコードで書いてみよう
 

【第5回】変数を理解しよう！var, let, constの使い分け！
 

【第6回】初心者がつまづきがちな「関数」を分かりやすく解説
 

【第7回】匿名関数、高階関数、コールバック関数を攻略せよ！
 

【第8回】WebAPIを叩いてみよう！

🏷️ タグ
#javascript 

【JavaScript入門】オブジェクトを実際にコードで書いてみよう

 🚀 今日のひとこと
今回は前回の発展的内容になっています。
実際にJavaScriptオブジェクトのコードを書きます。
またWindow、Documentオブジェクトの
プロパティ・メソッドにも触れています。
フロントエンドエンジニアを目指す方や
初心者・駆け出しエンジニアにオススメの入門講座になっております。

📙 もくじ
0:00 オブジェクトの宣言方法について
1:04 プロパティとメソッドの色で判別する方法
2:10 YouTuberオブジェクトの中身を解説
3:49 プロパティやメソッドへのアクセス方法
6:47 補完時に出てくるテキスト(abc)について
7:48 補完の恩恵① typo防止
8:27 補完の恩恵② 定義元を見なくても中身を知れる
10:09 Chrome DevToolsのConsoleタブでオブジェクトを扱う
12:06 Window, Documentオブジェクトをホワイトボードで解説
14:41 Window, Documentのメソッド・プロパティをエディタ上で参照
16:58 Windowオブジェクトをブラウザで試してみる
17:48 Documentオブジェクトをブラウザで試してみる
19:03 Windowを制御するプロパティやメソッドを呼び出す
20:05 まとめ

🔥基礎から学ぶ JavaScript 入門
 

• 【第1回】フロントエンド開発でJavaScriptが必要な理由を解説
• 【第2回】Twitterを例にJavaScriptがどんな働きをするのか理解しよう
• 【第3回】オブジェクト・プロパティ・メソッドについて理解しよう
• 【第4回】オブジェクトを実際にコードで書いてみよう
• 【第5回】変数を理解しよう！var, let, constの使い分け！
• 【第6回】初心者がつまづきがちな「関数」を分かりやすく解説
• 【第7回】匿名関数、高階関数、コールバック関数を攻略せよ！
• 【第8回】WebAPIを叩いてみよう！
• 【第9回】 【JavaScript入門】これまで講座で学習した知識をフル活用しよう

#javascript 

【JavaScript入門】比較演算子の使い方

このチュートリアルでは、JavaScriptの比較演算子についてすべてを学びます。

JavaScript比較演算子

javascript比較演算子は、2つのオペランド値を比較し、結果をブール形式（trueまたはfalse）で返します。

次のjs比較演算子を使用して、2つのオペランド（文字列、数値など）の値を比較できます。

• < 未満
• <= マイナス以下
• > より大きい
• >= 以上
• == に等しい
• != 等しくない
• === 厳密に等しい
• !== 厳密に等しくない

JS比較演算子のリスト

次の表に、JavaScriptの比較演算子を示します。

演算子	説明
==	タイプを考慮せずに、2つのオペランドの等価性を比較します。
===	2つのオペランドの等価性を型と比較します。
！=	2つのオペランドの不等式を比較します。
>>	左側の値が右側の値より大きいかどうかを確認します。はいの場合はtrueを返し、そうでない場合はfalseを返します。
<	左のオペランドが右のオペランドよりも小さいかどうかを確認します。はいの場合はtrueを返し、そうでない場合はfalseを返します。
> =	左のオペランドが右のオペランド以上かどうかを確認します。はいの場合はtrueを返し、そうでない場合はfalseを返します。
<=	左のオペランドが右のオペランド以下かどうかをチェックします。はいの場合はtrueを返し、そうでない場合はfalseを返します。

上記のように、比較演算子は結果をブール形式（trueまたはfalse）で返します。

次の例を参照してください。

let a = 30 > 10; // true
let b = 50 < 10; // false
let c = 20 == 20; // true

1：数値の比較

両方のオペランドが数値の場合、JS比較演算子は数値比較を実行します。

次の例を参照してください。

let a = 10, 
    b = 20; 
console.log(a >= b);  // false
console.log(a == 10); // true

この例では、2つの変数、  a is  10、  b isがあり 20ます。 a>=b 表現を返す falseと a==10 表現を返します  true。

2：比較文字列

提供された両方のオペランドが文字列の場合、JavaScriptは文字列内の文字コードを1つずつ数値的に比較します。

 let name1 = 'hello',
    name2 = 'js';    
let result = name1 < name2;
 
console.log(name1 == 'hello'); // true
console.log(result); // true

JavaScriptで2つの文字列を比較すると、文字コードが数値的に比較され、予期しない結果が生じる可能性があります。

次の例を参照してください。

let a = 'apple',
    b = 'Banana';
let result = b < a;
console.log(result); // true

この例でb は、 はa。未満です 。バナナの文字列B には文字コードが 66 あり、アップルの文字列 a には文字コードがあるためです 97。

この問題を修正し、文字列を同等に比較したい場合。まず、文字列を小文字または大文字の一般的な形式に変換してから、比較する必要があります。

次の例を参照してください 

let a = 'Hello',
    b = 'JS';
let res = a.toUpperCase() < b.toUpperCase();
console.log(res); // true

JavaScripttoUpperCase() は、文字列文字を大文字に変換するために使用されるメソッドです。

3：数値と文字列値の比較

1つのオペランドが数値で、2番目のオペランドが文字列の場合、JavaScriptは数値以外のオペランドを数値に変換し、比較を数値で評価します。

console.log(15 < '30'); // true

この例では、文字列 '30'は30 数値15に変換され、比較され ます。

4：オブジェクトと非オブジェクトの比較

オペランドがオブジェクトの場合、JavaScriptはvalueOf() そのオブジェクトのメソッドを呼び出して、 比較用の値を取得します。オブジェクトにvalueOf() メソッドがない場合 、JavaScriptはtoString() メソッドを呼び出し 、戻り値を使用して比較します。次の例を参照してください。

let apple = {
  valueOf: function() {
    return 10;
  }
};
 
let orange = {
  toString: function() {
    return '20';
  }
};
console.log(apple > 10); // false
console.log(orange == 20); // true

この最初の比較では、 apple オブジェクトには valueOf() を返すメソッドがある 10ため、JavaScriptは比較に10を使用します。2番目の比較では、JavaScriptが最初にvalueOf() メソッドを呼び出します 。ただし、 orange オブジェクトにはvalueOf() メソッドがない ため、JavaScriptはtoString() メソッドを呼び出して の戻り値を取得します 20。

5：ブール値を異なる値と比較する

1つのオペランドがブール値で、2番目のオペランドがJavaScriptの異なるデータ型である場合。まず、オペランド値を同じデータ型に変換し、変換されたオペランド値を異なるオペランドと比較します。

注：-true に変換され 1 、 false に変換され 0ます。

console.log(true > 0); // true
console.log(false < 1); // true
console.log(true > false); // true
console.log(false > true); // false
console.log(true >= true); // true
console.log(true <= true); // true
console.log(false <= false); // true
console.log(false >= false); // true

6：比較 null と undefined

JavaScriptでは、に null 等しい undefined。これは、次の式がを返すことを意味します true。

console.log(null == undefined); // true

7：NaN 数値との比較 

いずれかのオペランドが NaN、の場合、equal operator（==）はfalse。を返します 。

console.log(NaN == 1); // false

平

console.log(NaN == NaN); // false

を別の値 と比較すると、 等しくない（!=）演算子が返され ます。trueNaN

console.log(NaN != 1); // true

そしてまた
 

console.log(NaN != NaN); // true

8：厳密に等しい（===）および厳密に等しくない（!==）

上記の表で、使用可能な厳密に等しい（  ===）および厳密に等しくない（  !==）比較演算子。

オペレーター	意味
===	厳密に等しい
！==	厳密には等しくない

jsのstrictequalおよびnotstrict equal演算子は、jsのequalおよびnotequal演算子のように機能します。ただし、js比較演算子を使用して比較する前にオペランドを変換しません。

次の例を参照してください。

console.log("10" == 10); // true
console.log("10" === 10); // false

ここ、

• 最初の比較では、文字列を数値に変換し、オペランド間の比較を実行します。
• ただし、2番目の比較では、厳密に等しい演算子（===）を使用し、比較 前に文字列を変換しません。

結論

このチュートリアルでは、JavaScript比較演算子を使用してオペランド値を比較する方法を学習しました。

リンク： https://www.tutsmake.com/javascript-comparison-operators/

#javascript 

 

【JavaScript入門】プッシュ要素、配列から配列への例

このチュートリアルでは、単一の複数のアイテム（要素）を配列に追加する方法と、javaScriptの配列push（）およびConcat（）メソッドを使用して1つの配列を別の配列に追加する方法を例とともに学習します。

javaScriptは要素と配列を配列にプッシュします

javaScript push（）メソッド

javaScript push（）メソッドは、配列の最後に新しい要素を追加するために使用されます。そして、与えられた配列の長さを変更します。

javascriptは要素と配列要素を配列チュートリアルにプッシュします。次のことを学びます。

• 配列の単一の項目を追加するにはどうすればよいですか？
• 配列の複数のアイテムを追加するにはどうすればよいですか？
• javaScriptで配列を配列にプッシュする方法は？

配列の単一の項目を追加するにはどうすればよいですか？

ここでは、特定の配列に単一のアイテムを追加する方法を学習します。例を見てみましょう。

arrNumという名前の配列があり、その中に4つの要素が含まれているとします。以下を参照してください。

var arrNum = [
   "one",
   "two",
   "three",
   "four"
 ];

単一のアイテムをarryNum配列に追加する場合。したがって、以下のようにjavaScriptのpush（）メソッドを使用できます。

var arrNum = [
   "one",
   "two",
   "three",
   "four"
 ];

 arrNum.push("five");

 console.log( arrNum );

上記の例の結果は次のとおりです。

[「1」、「2」、「3」、「4」、「5」]

配列の複数のアイテムを追加するにはどうすればよいですか？

特定の配列に複数のアイテムと要素を追加する場合。以下の例を使用できます。

特定の配列に複数のアイテムを追加する方法の新しい例を見てみましょう。

arrMulという名前の配列があり、それに5つの値が含まれていて、さらに5つまたはNの値を追加したい場合は、次の例を使用します。

 var arrMul = [
   "one",
   "two",
   "three",
   "four"
 ]; 

 arrMul.push("six","seven","eight","nine","ten");

 console.log( arrMul );

上記の例の結果は次のとおりです。

[「1」、「2」、「3」、「4」、「5」、「6」、「7」、「8」、「9」、「10」]

javaScriptで配列を配列にプッシュする方法は？

JavaScriptで、ある配列の項目を別の配列に追加する方法や、配列を配列にプッシュする方法の例を見てみましょう。

2つの配列があり、最初の配列名がarryFirstで、5つの項目が含まれているとします。また、2番目の配列名arrySecondがあり、5つの項目も含まれています。2番目の配列値を最初の配列にマージする場合。したがって、JavaScriptのConcat（）関数を使用できます。

var arryFirst = [   "one",   "two",   "three",   "four",   "five" ];

 var arrySecond = [   "six",   "seven",   "eight",   "nine",   "ten" ];

 arryFirst = arryFirst.concat(arrySecond); 

 console.log(arryFirst);

上記の例の結果は次のとおりです。

 [「1」、「2」、「3」、「4」、「5」、「6」、「7」、「8」、「9」、「10」] 

結論

javaScriptは要素と配列要素を配列にプッシュします。このチュートリアルでは、特定の配列に単一および複数のアイテムを追加する方法を学習しました。また、JavaScriptのconcat（）メソッドを使用して、ある配列を別の配列に追加する方法についても学びます。

リンク: https://www.tutsmake.com/javascript-push-array-into-array-example/

#javascript