ホームページ  >  記事  >  ウェブフロントエンド  >  これは es6 の arrow メソッドでは何を指しているのでしょうか?

これは es6 の arrow メソッドでは何を指しているのでしょうか?

青灯夜游
青灯夜游オリジナル
2022-11-21 17:55:172145ブラウズ

es6 では、アロー関数本体の this オブジェクトは、関数が定義されているスコープによってポイントされるオブジェクトです。アロー関数の this のポイントは、コンテキスト内のオブジェクトのポイントです。コンテキスト オブジェクトがない場合、this のポイントはウィンドウを指すことがあります。call、apply、bind などのメソッドでも、コンテキストの this のポイントを変更することはできません。矢印機能。

これは es6 の arrow メソッドでは何を指しているのでしょうか?

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

アロー関数は非常に簡潔で読みやすいため、日々の開発で多くの場面で使われていると思いますが、実はアロー関数の最大の利点は、この匿名関数のポインティングの問題を解決できることです。コールバック関数をカプセル化します。

まず要約しましょう:

アロー関数本体の this オブジェクトは、関数が定義されているスコープによって指されるオブジェクトであり、関数が使用されるときに指されるスコープではありません。 。 物体。 ES6 アロー関数の

This

  • (1) は、定義時にコンテキスト内のオブジェクトの this ポイントにデフォルトで設定されます。つまり、ES6 アロー関数の this のポイントは、コンテキスト内のオブジェクトのポイントです。場合によっては、コンテキスト オブジェクトがない場合、これは window

  • (2 ) call、apply、bind などのメソッドでも、矢印関数の向きを変更することはできません。この関数は、

通常の関数の例です。

var name = 'window'; // 其实是window.name = 'window'

var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)
   }
}

A.sayHello();// 输出A

var B = {
  name: 'B'
}

A.sayHello.call(B);//输出B

A.sayHello.call();//不传参数指向全局window对象,输出window.name也就是window

As you上記からわかるように、sayHello メソッドは A オブジェクトで定義されており、Dangdang call メソッドを使用し、それを B オブジェクトにポイントし、最後に B を出力します。sayHello の this はオブジェクトにのみ関連していると結論付けることができます。使用した場合。

Renovate:

var name = 'window'; 
var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}
A.sayHello();// 还是以为输出A ? 错啦,其实输出的是window

ここで、ほとんどの学生が、sayHello が A にバインドされていると考えて間違いを犯すと思いますが、実際には window にバインドされています。では、それは正確には何ですか?なぜですか?

冒頭では「この関数のスコープが指すオブジェクト」に注目しました。スコープとは関数の内部を指します。ここでのアロー関数、つまりsayHelloは実際には最も外側のスコープです。 .js 環境、他の関数がラップされていないため、最も外側の js 環境が指すオブジェクトは winodw オブジェクトであるため、ここでは window オブジェクトを指します。

A を永久にバインドするように変更する方法:

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭头函数s
   }
}

var sayHello = A.sayHello();
sayHello();// 输出A 

var B = {
   name: 'B';
}

sayHello.call(B); //还是A
sayHello.call(); //还是A

OK、これは常に A オブジェクトを指します。次に、「関数が配置されているスコープが指すオブジェクト」を使用します。 " 分析:

  • この関数のスコープ:sayHello は関数であるため、アロー関数 s のスコープは SayHello です。

  • スコープが指すオブジェクト: A。sayHello が指すオブジェクトは A です。

つまり、アロー関数 s のこれは A~~

--------------finish--- を指します。 ----------

最後に、アロー関数を使用する際に注意すべき点が他にもあります。

  • はコンストラクターとして使用できません。たとえば、新しいコマンドは使用できません。そうでない場合は、エラーがスローされます。

  • 引数オブジェクトは関数本体に存在しないため、使用できません。これを使用したい場合は、代わりにrestパラメータを使用できます。

  • yield コマンドは使用できないため、アロー関数をジェネレーター関数として使用することはできません。

[推奨学習: JavaScript ビデオ チュートリアル ]

以上がこれは es6 の arrow メソッドでは何を指しているのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。