ホームページ > ウェブフロントエンド > jsチュートリアル > jsコンストラクターメソッドとは何ですか?

jsコンストラクターメソッドとは何ですか?

PHP中文网
リリース: 2017-06-28 11:46:09
オリジナル
1187 人が閲覧しました

以下は、js コンストラクターのメソッドとプロトタイプの簡単な紹介です。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。

コンストラクター内にメソッドが記述されている場合、それを関数内メソッドと呼び、プロトタイプ属性にメソッドが記述されている場合、それをプロトタイプ上のメソッドと呼びます。

•関数内のメソッド: 関数内のメソッドを使用すると、コンストラクターから新しいオブジェクトを取得してコンストラクター内のプライベート変数を操作する必要がある場合、関数内のプライベート変数にアクセスできます。現時点では、関数内でメソッドを使用することを考慮する必要があります。

•プロトタイプのメソッド: 関数を通じて多数のオブジェクトを作成する必要があり、それらのオブジェクトにも多くのメソッドがある場合、次のことを行う必要があります。これらのメソッドを関数のプロトタイプに追加することを検討してください。この場合、コードのメモリ使用量は比較的小さくなります。

•実際のアプリケーションでは、これら 2 つのメソッドが組み合わせて使用​​されることが多いため、最初に何が必要かを理解する必要があります。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

// 构造函数A

function A(name) {

  this.name = name || 'a';

  this.sayHello = function() {

    console.log('Hello, my name is: ' + this.name);

  }

}

 

// 构造函数B

function B(name) {

  this.name = name || 'b';

}

B.prototype.sayHello = function() {

  console.log('Hello, my name is: ' + this.name);

};

 

var a1 = new A('a1');

var a2 = new A('a2');

a1.sayHello();

a2.sayHello();

 

var b1 = new B('b1');

var b2 = new B('b2');

b1.sayHello();

b2.sayHello();

ログイン後にコピー

2 つのコンストラクターを作成します。1 つ目は A で、このコンストラクターにはメソッド SayHello が含まれます。2 つ目はコンストラクター B のプロトタイプ属性にそのメソッドを置きます。コンストラクター内にメソッドを記述すると、コンストラクターを介してオブジェクトを初期化するコストが増加します。プロトタイプ属性にメソッドを記述すると、そのプロトタイプ チェーンでメソッドを呼び出すよりも効果的にこのコストが削減されると感じるかもしれません。実際、これは当てはまりません。オブジェクトにプロトタイプがあまりない場合、それらの速度は実際にはほぼ同じです

さらに、注意すべき点がいくつかあります:

• まず、関数のプロトタイプ属性でメソッドを定義します。メソッドを変更すると、このコンストラクターによって生成されたすべてのオブジェクトのメソッドが変更されることに注意してください。

• もう 1 つのポイントは、変数のプロモーションの問題です。次のコードを見てください:


1

2

3

4

5

6

7

8

9

func1(); // 这里会报错,因为在函数执行的时候,func1还没有被赋值. error: func1 is not a function

var func1 = function() {

  console.log('func1');

};

 

func2(); // 这个会被正确执行,因为函数的声明会被提升.

function func2() {

  console.log('func2');

}

ログイン後にコピー

• 関数のプロトタイプで定義されたオブジェクトのシリアル化の問題に関しては、次のコードが表示されます。出力結果が {"name":"dreamapple"} であることがわかります

以上がjsコンストラクターメソッドとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート