JavaScriptの矢印関数と通常の関数

矢印関数には独自のこれがありません。これは外部関数と一致しています。

すべての関数が実行されると、関数実行コンテキストが作成されます。通常の関数の実行コンテキストには変数thisがありますが、矢印関数はありません。

これが矢印関数に表示される場合、定義時に常にこれがスコープチェーン上で最も近いものになります。たとえば、以下のデモでは、グローバル実行環境でこれが取得され、グローバルオブジェクト。

<script>
var id = 'wgchen'

// 箭头函数定义在全局作用域
let fun1 = () => {
    
    
  console.log(this.id)
}

fun1(); // 'wgchen'

// this的指向不会改变，永远指向Window对象
fun1.call({
    
     id: 'Obj' }) // 'wgchen'
</script>

考えられる質問：次のコードは何を出力しますか？

<script>
var id = 'wgchen'

function fun1() {
    
    
  // setTimeout中使用普通函数
  setTimeout(function fun3() {
    
    
    console.log(this.id)
  }, 2000);
}

function fun2() {
    
    
  // setTimeout中使用箭头函数
  setTimeout(() => {
    
    
    console.log(this.id)
  }, 2000);
}

fun1(); // 'wgchen'
fun2(); // 'wgchen'

fun1.call({
    
     id: 'Obj' }) // 'wgchen'
fun2.call({
    
     id: 'Obj' }) // 'Obj'
</script>

1. setTimoutはfun3をグローバルコンテキストで実行するため、Fun3自体にこれがあります。これは、グローバル実行環境を指します。

2.同様に、setTimoutはarrow関数をグローバルコンテキストで実行しますが、arrow関数自体にはこれがありません。スコープチェーンに沿って検索し、fun2で作成されたこれを見つけます。これもグローバル実行環境を指します。

3. fun1.callの呼び出しプロセス中に、fun1のこのポインティングが変更されますが、fun3自体もこれを作成し、setTimeoutはこのポイントをグローバル実行環境に設定します。

4. fun1.callの呼び出しプロセス中に、fun1のこのポインティングが変更され、矢印関数にはこれがなく、fun1のthisはスコープチェーンに従って検出されるため、最終的に{id：'Objを指します。 '}。

矢印関数はコンストラクターとして使用できません

矢印関数には独自のthis変数がないため、これのポインターを変更する方法がないため、コンストラクターとして使用することも、プロトタイプオブジェクトを使用することもできません。

let Fun = (name, age) => {
    
    
  this.name = name
  this.age = age
}

// 报错
let p = new Fun('mybj', 4)

矢印関数には引数オブジェクトがありません

おそらく多くの人がargumentsオブジェクトを使用していません。これは、すべての通常の関数で使用できるローカル変数です。

関数が呼び出されたときに渡されるパラメーターを表します。argumentsオブジェクトは配列ではなく、配列のような配列です。

長さプロパティとインデックスを除いて、sliceやその他のメソッドなどの配列プロパティはありません。

したがって、通常は配列Array.prototype.slice.call(arguments)/[...arguments] にます。

<script>
let showArguments = function () {
    
    
  // Arguments(2) ['params1', 'params2', callee: ƒ, Symbol(Symbol.iterator): ƒ]
  console.log(arguments)
  
  //  ['params1', 'params2']
  console.log(Array.prototype.slice.call(arguments)) 
}

showArguments('params1', 'params2')

</script>

矢印関数と通常の関数に共通の長さプロパティ

この部分は区別に属していませんが、ここに追加したいと思います。これも珍しい属性であり、手で引っ張る問題を起こした人は誰でもそれを使用する必要があります。

関数のlength属性正式なパラメーターの数を参照します。
正確
には、最初のパラメーターの前のパラメーターの数にはデフォルト値があり、残りのパラメーターの数は含まれません。

同様に、それarguments.lengthは実際のパラメータの数を指します。

<script>
const showLength = function(a, b, c, d){
    
    
  console.log(`实际参数的个数：${
      
      arguments.length}`)
}

console.log(`形参的个数：${
      
      showLength.length}`) //形参的个数：4

//形参的个数：3
console.log(`形参的个数：${
      
      showLength.bind(this, '3').length}`)

showLength('1','2');// 实际参数的个数：2
showLength.call(this, '3') // 实际参数的个数：1

</script>