Cat Paw Software

ユーザ用ツール

サイト用ツール

トレース:
ecmascript:function

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
ecmascript:function [2025/09/10 16:27] – nullponecmascript:function [2025/09/20 04:51] (現在) – [function] nullpon
行 19: 行 19:
   console.log('ほげ');   console.log('ほげ');
 } }
 +
 +const f = hoge;
 +f();   // => ほげ
  
 // 関数はnameプロパティを持つ、自分自身の関数名である // 関数はnameプロパティを持つ、自分自身の関数名である
 console.log(hoge.name); // => hoge console.log(hoge.name); // => hoge
- 
-const f = hoge; 
-f();   // => ほげ 
  
 // 変数に入れてもnameプロパティは変わらない // 変数に入れてもnameプロパティは変わらない
 console.log(f.name);  // => hoge console.log(f.name);  // => hoge
- 
 ``` ```
  
行 34: 行 33:
  
 ```javascript ```javascript
-/* 関数にプロパティを作成する。+/* 関数にプロパティを作成する。*/
 function fuga() { function fuga() {
   // arguments.calleeは自分自身(= fuga)を参照する値   // arguments.calleeは自分自身(= fuga)を参照する値
行 44: 行 43:
 ``` ```
  
-## 関数式+## 関数式と関数宣言
  
-式の中で関数を作成する方法。+これは普通の関数宣言
  
 ```javascript ```javascript
-const hoge = function() { +function hoge() { 
-  console.log('ほげ')+  console.log('ほげ');
 } }
 +```
  
-hoge();+関数式は、式の中で関数を作成する方法。 
 + 
 +```javascript 
 +const f = function hoge() { 
 +  console.log('ほげ') 
 +}
 ``` ```
  
行 59: 行 64:
  
 - 巻き上げが行われない - 巻き上げが行われない
-- 無名の関数を作れる+- 無名の関数を作れる(というか無名の関数を作る方が普通）
  
-よくある用途はArray#forEachに渡す関数+### 無名関数
  
 +名前を省略すると無名関数になる。関数式を作る場合は無名関数とする方が一般的。
  
 ```javascript ```javascript
-[1,2,3].forEach(function(i) {  +const f = function() {} 
-  console.log(i * 2);  // => 2, 4, 6+``` 
 + 
 + 
 +### 巻き上げ 
 + 
 +関数宣言の場合、関数の定義より前に呼び出してもエラーにならない 
 + 
 +```javascript 
 +f();  // これはOK 
 + 
 +function f() {} 
 +``` 
 + 
 +関数式の場合、関数の定義より前に呼び出すとエラーになる 
 + 
 +```javascript  
 +f();  // エラー 
 + 
 +const f = function() {} 
 +``` 
 + 
 +### 関数式の用途 
 + 
 +Array#forEachなど、関数を引数として受け取る関数や関数を戻り値とする関数で使うことが多い 
 + 
 + 
 +```javascript 
 +const arr = [1,2,3].map(function(i) {  
 +  return i * 2;
 }); });
 +console.log(arr); // => [2,4,6]
 ``` ```
 +
 +現在このような用途では、**アロー関数式**の使用が推奨されている
 +
 +```javascript
 +const arr = [1,2,3].map((i) => i * 2);
 +
 +console.log(arr); // => [2,4,6]
 +```
 +
 +```javascript
 +function x(i) {
 +  return (j) => i * j; 
 +}
 +
 +x(2)(3) // => 6
 +```
 +
 +
  
 ## メソッド ## メソッド
行 98: 行 151:
 ``` ```
  
-## アロー関数+## アロー関数式
  
-関数式の簡潔な代替構文。しかし多少の機能の違いもある +関数式の簡潔な代替構文。
- +
-- メソッドにできない（this、arguments、superへのバインドがない） +
-- コンストラクタにできない +
-- ジェネレータにできない+
  
 ```javascript ```javascript
行 112: 行 161:
 ``` ```
  
-メソッドの中で関数式を書く場合は、アロー関数を使うと意図通りに動作するだろう+しかし多少の機能の違いもある。 
 + 
 +- メソッドにできない（this、arguments、superへのバインドがない） 
 +- コンストラクタにできない 
 +- ジェネレータにできない 
 + 
 +この性質の違いによって、大抵のケースではアロー関数式を使う方が良い結果となる。例えばメソッドの中で関数式を書くと意図通りに動作しないが、アロー関数ならば意図通りに動作する。 
  
 ```javascript ```javascript
行 119: 行 175:
      
   f() {   f() {
 +    // 関数式のthisはobjではなく、グローバルオブジェクトにバインドされてしまう
     [1,2,3].forEach(function(i) => {     [1,2,3].forEach(function(i) => {
-      console.log(i * this.rate);  // 関数式のthisはグローバルオブジェクトにバインドされてしまう +      console.log(i * this.rate); 
     });       });  
   },   },
 +  
 +  g() {
 +    // 関数式ではthisを別の変数に避難させるテクニックが必要
 +    // 意図通りになるが、分かりにくく煩雑
 +    const self = this;
 +    [1,2,3].forEach(function(i) => {
 +      console.log(i * self.rate); 
 +    });    
 +  }
 +  
      
   a() {   a() {
 +    // アロー関数はthisへのバインドがなく、この環境のthisが引き継がれる
 +    // 直感的、かつシンプルに記述できる
     [1,2,3].forEach((i) => {     [1,2,3].forEach((i) => {
-      console.log(i * this.rate); 　// アロー関数はthisへのバインドがなく、この環境のthisが引き継がれる+      console.log(i * this.rate); 　
     });      }); 
   }   }
行 132: 行 201:
  
 obj.f();  // [NaN, NaN, NaN] obj.f();  // [NaN, NaN, NaN]
 +obj,g();  // [2, 4, 6]
 obj.a();  // [2, 4, 6] obj.a();  // [2, 4, 6]
- 
 ``` ```
  
ecmascript/function.1757521634.txt.gz · 最終更新: by nullpon