JavaScript のコンストラクターについて詳しく学ぶ-jsチュートリアル-php.cn

JavaScript のコンストラクターについて詳しく学ぶ

青灯夜游

リリース： 2020-11-03 17:51:05

転載

2203 人が閲覧しました

JavaScript のコンストラクターについて詳しく学ぶ

コンストラクターをよく理解することが、JavaScript 言語を習得するための鍵です。 JavaScript が他の言語とは異なり、class キーワードがありませんが、関数によく似たコンストラクターがあることは誰もが知っています。この記事では、JavaScript コンストラクターがオブジェクトを構築する方法を詳しく学びましょう。

コンストラクターは通常の関数と非常に似ていますが、new キーワードを使用して使用します。コンストラクターには主に 2 つのタイプがあります。実行環境で自動的に生成できるネイティブコンストラクター (配列、オブジェクト) と、独自のメソッドとプロパティを定義できるカスタムコンストラクターです。

コンストラクターの使用は、(同じプロパティとメソッドを持つ) 類似したオブジェクトを多数作成する場合に非常に効果的です。ほとんどのプログラマーは、コンストラクターと通常の関数を区別するために大文字を使用するという規則に従います。以下のコードを見てください。

function Book() { 
    // unfinished code
} 
var myBook = new Book();

ログイン後にコピー

コードの最後の行は Book オブジェクトを作成し、それを変数に割り当てます。これが完了すると、たとえ Book コンストラクターが何も行わなくても、myBook は Book インスタンスになります。ご覧のとおり、最初の文字を大文字にすることと new キーワードを使用することを除けば、コンストラクターと通常の関数との間に違いはありません。

インスタンスのタイプを決定する

オブジェクトが何らかの種類のインスタンスであるかどうかを決定するには、instanceof 演算子を使用できます。

myBook instanceof Book    // => true
myBook instanceof String  // => false

ログイン後にコピー

注: 右側が関数のインスタンスではない場合、エラーが報告されます:

myBook instanceof {}; // => TypeError: invalid &#39;instanceof&#39; operand ({})

ログイン後にコピー

別の方法は、コンストラクター属性を使用することです。すべてのオブジェクトインスタンスこの属性は、それを作成したコンストラクターを指します。

myBook.constructor == Book;   // => true

ログイン後にコピー

myBook のコンストラクターが Book を指すのと同じです。すべてのオブジェクトは、プロトタイプからコンストラクター属性を継承します。

var s = new String("text");
s.constructor === String;      // => true
"text".constructor === String; // => true
var o = new Object();
o.constructor === Object;      // => true
var o = {};
o.constructor === Object;      // => true
var a = new Array();
a.constructor === Array;       // => true
[].constructor === Array;      // => true

ログイン後にコピー

コンストラクターを使用してインスタンスタイプを検出できますが、instanceof メソッドを使用することをお勧めします。コンストラクター属性はオーバーライドできるため、使用するのはあまり信頼できません。

カスタムコンストラクター

コンストラクターはクッキースタンパーのようなものです。同じ印象から作られた、同じモデルです（良いものを持っていない男性も同様です）。

function Book(name, year) {
    this.name = name;
    this.year = &#39;(&#39; + year + &#39;)&#39;;
}

ログイン後にコピー

Book コンストラクターには 2 つのパラメーターが必要です。new キーワードを使用してオブジェクトを作成する場合、2 つの仮パラメーターは Book オブジェクトの名前と年に渡されます。

var firstBook = new Book("Pro AngularJS", 2014);
var secondBook = new Book("Secrets Of The JavaScript Ninja", 2013); 
var thirdBook = new Book("JavaScript Patterns", 2010);

console.log(firstBook.name, firstBook.year);           
console.log(secondBook.name, secondBook.year);           
console.log(thirdBook.name, thirdBook.year);

ログイン後にコピー

JavaScript のコンストラクターについて詳しく学ぶ

ご覧のとおり、さまざまなパラメーターを渡すことで、別のブックをすばやく作成できます。 JavaScript の Array() と Date() にも同じことが当てはまります。

Object.defineProperty メソッド

Object.defineProperty メソッドは、コンストラクターでプロパティを構成するために使用できます。

function Book(name) { 
    Object.defineProperty(this, "name", { 
        get: function() { 
            return "Book: " + name;       
        },        
        set: function(newName) {            
            name = newName;        
        },               
        configurable: false     
    }); 
}
var myBook = new Book("Single Page Web Applications");
console.log(myBook.name);    // => Book: Single Page Web Applications
// we cannot delete the name property because "configurable" is set to false
delete myBook.name;    
console.log(myBook.name);    // => Book: Single Page Web Applications
// but we can change the value of the name property
myBook.name = "Testable JavaScript";
console.log(myBook.name);    // => Book: Testable JavaScript

ログイン後にコピー

上記のコードは、祖先メソッドを呼び出します。ゲッターインターフェイスとセッターインターフェイスを提供します。 getter メソッドはカプセル化された値を返す役割を果たし、setter メソッドはパラメータを受け入れて値をプロパティに割り当てます。プロパティへのアクセスを操作すると、これら 2 つのメソッドが呼び出されます。 configurable を設定することで、値を削除できるかどうかを設定できます。

オブジェクトリテラル表現が推奨コンストラクターです

JavaScript 言語には、Object()、Array()、String()、Number() の 9 つの組み込みコンストラクターがあります。、Boolean()、Date()、Function()、Error()、および RegExp()。これらの値を作成する必要がある場合は、リテラルまたはコンストラクターを自由に使用できます。しかし、同じ状況下では、リテラルオブジェクトは読みやすいだけでなく、解析中に最適化できるため高速になります。したがって、単純なオブジェクトを使用する必要がある場合はリテラルを使用してください。

// a number object
// numbers have a toFixed() method
var obj = new Object(5);
obj.toFixed(2);     // => 5.00
// we can achieve the same result using literals
var num = 5;
num.toFixed(2);     // => 5.00
// a string object
// strings have a slice() method 
var obj = new String("text");
obj.slice(0,2);     // => "te"
// same as above
var string = "text";
string.slice(0,2);  // => "te"

ログイン後にコピー

new キーワードの使用は必須です

コンストラクターを使用するときは、new キーワードを使用することを忘れないでください。うっかり忘れた場合、コンストラクター This in はグローバルを指します。オブジェクト (デフォルトはブラウザのウィンドウ)。

function Book(name, year) {
    console.log(this);
    this.name = name;
    this.year = year;
}
var myBook = Book("js book", 2014);  
console.log(myBook instanceof Book);  
console.log(window.name, window.year);
var myBook = new Book("js book", 2014);  
console.log(myBook instanceof Book);  
console.log(myBook.name, myBook.year);

ログイン後にコピー

上記のコードを実行した結果は次のとおりです:

JavaScript のコンストラクターについて詳しく学ぶ

厳密モードの場合、上記のコードは厳密モードのためエラーをスローします。 mode new キーワードを使用せずにコンストラクターを呼び出すことはできません。

より高い適用範囲を持つコンストラクター

new キーワードの使用を忘れるリスクを解決するために、より高い適用範囲を持つコンストラクターを作成できます。このコンストラクターの値を判断することによって。

function Book(name) { 
    if (!(this instanceof Book)) { 
        // the constructor was called without "new".
        return new Book(name);
    } 
}

ログイン後にコピー

このコードを追加すると、コンストラクターを「不謹慎に」使用できるようになります。

function Book(name, year) { 
    if (!(this instanceof Book)) { 
        return new Book(name, year);
    }
    this.name = name;
    this.year = year;
}
var person1 = new Book("js book", 2014);
var person2 = Book("js book", 2014);
console.log(person1 instanceof Book);    // => true
console.log(person2 instanceof Book);    // => true

ログイン後にコピー

多くの組み込みコンストラクターがこれを行います。 this が現在のタイプであるかどうかを判断します。プログラマが new キーワードを追加するのを忘れた場合、new を介して渡されたオブジェクトが返されます。

結論

JavaScript にはそのような用語がないため (ただし、オブジェクト指向である可能性はあります)、クラスの使用に慣れているプログラマにとっては混乱を招きます。もちろん、JavaScript のコンストラクターは通常の関数と何ら変わりはなく、new キーワードを通じて生成されるだけです。「Cookie を印刷」する必要がある場合に非常に便利です。

推奨チュートリアル: 「JavaScript ビデオチュートリアル」

以上がJavaScript のコンストラクターについて詳しく学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。