ホームページ > ウェブフロントエンド > jsチュートリアル > javascript_javascript スキルでこれを使用する 4 つの方法

javascript_javascript スキルでこれを使用する 4 つの方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 16:00:02
オリジナル
1137 人が閲覧しました

これ

関数が実行されると、これは常に関数を呼び出したオブジェクトを指します。これがどこを指しているかを判断するには、実際にこれが誰に属しているかを判断する必要があります。

書籍「JavaScript 言語の本質」では、これが登場するシナリオは、簡単に言うと次の 4 つのカテゴリに分類されます。

オブジェクトがある場合は、呼び出し元のオブジェクトをポイントします

オブジェクトを呼び出さずにグローバル オブジェクトをポイントします
new で構築され、新しいオブジェクトを指します
apply、call、bind を通じて this の参照を変更します。

1) 関数にそれが属するオブジェクトがある場合: 関数が属するオブジェクトを指します

関数にそれが属するオブジェクトがある場合、その関数は通常、 . 式を通じて呼び出されます。この場合、これは当然、その関数が属するオブジェクトを指します。たとえば、次の例:

1

2

3

4

5

6

7

8

9

10

11

12

var myObject = {value: 100};

myObject.getValue = function () {

 console.log(this.value); // 输出 100

 

 // 输出 { value: 100, getValue: [Function] },

 // 其实就是 myObject 对象本身

 console.log(this);

 

 return this.value;

};

 

console.log(myObject.getValue()); // => 100

ログイン後にコピー
getValue() はオブジェクト myObject に属し、myOjbect によって呼び出されるため、これはオブジェクト myObject を指します。

2) 関数には所有オブジェクトがありません。グローバル オブジェクト を指します。

1

2

3

4

5

6

7

8

9

10

11

12

13

var myObject = {value: 100};

myObject.getValue = function () {

 var foo = function () {

  console.log(this.value) // => undefined

  console.log(this);// 输出全局对象 global

 };

 

 foo();

 

 return this.value;

};

 

console.log(myObject.getValue()); // => 100

ログイン後にコピー
上記のコード ブロックでは、foo 関数が getValue の関数本体で定義されていますが、実際には getValue にも myObject にも属しません。 foo はどのオブジェクトにもバインドされていないため、呼び出されるとき、その this ポインタはグローバル オブジェクトを指します。

これは設計ミスだと言われています。

3) コンストラクター内のこれ: 新しいオブジェクト を指します

js では、new キーワードを使用してコンストラクターを呼び出します。これは新しいオブジェクトにバインドされます。

1

2

3

4

5

6

7

var SomeClass = function(){

 this.value = 100;

}

 

var myCreate = new SomeClass();

 

console.log(myCreate.value); // 输出100

ログイン後にコピー
ところで、js では、コンストラクター、通常の関数、オブジェクトのメソッド、クロージャーの間に明確な境界はありません。境界線はすべて人間の心の中にあります。

4) 呼び出しを適用して呼び出し、バインドをバインドします: バインドされたオブジェクトを指します

apply() メソッドは 2 つのパラメーターを受け取ります。1 つは関数が実行されるスコープで、もう 1 つはパラメーター配列 (引数) です。

call() メソッドの最初のパラメーターの意味は、他のパラメーターを 1 つずつリストする必要があることを除いて、apply() メソッドの意味と同じです。

簡単に言うと、call のメソッドは通常の関数の呼び出し方法に近いですが、apply では Array の形式で配列を渡す必要があります。それらは交換可能です。

1

2

3

4

5

6

7

8

9

10

11

12

var myObject = {value: 100};

 

var foo = function(){

 console.log(this);

};

 

foo(); // 全局变量 global

foo.apply(myObject); // { value: 100 }

foo.call(myObject); // { value: 100 }

 

var newFoo = foo.bind(myObject);

newFoo(); // { value: 100 }

ログイン後にコピー
この記事の内容は以上です。皆さんに気に入っていただければ幸いです。

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