[Basic JS]Arrow FunctionとFunctionの違い

2374 ワード
this JavaScript テキストリンク

🔍 緒論


以前から知っていた違いですが、頭で理解しただけなので、
率直に言って、よくテストしたことがありません.
最終的には、自分でいくつかの小さなテストをして、より多くのJSを理解するしかありません.
私の実力が確かに増加していることを知るにつれて、
プロジェクトをするときも、少しずつ位置づけてみます.

💡 Not Arrow Func Case

function add(a, b) {
    console.log(a + b);
} 
const arrowFuncAdd = (a,b) => console.log(a + b) // = {return a + b

add(1,2);
arrowFuncAdd(1,2);


///////////////////////////////////////////////////////////////


var notArrowFunc = {
    name: 'jengyoung',
    tags: ['front', 'end', 'dev'],
    say: function() {
        // 일단 바깥 스코프를 가리키는 this를 저장해야 함.
        // 왜냐하면, 새로운 함수를 입력하는 순간, 안에서 또 this가 생기기 때문.
        var that = this;
        // console.log("outer this: ", this); notArrowFunc를 가리킴.
        this.tags.forEach(function (tag) {
            // console.log("inner this: ", this); // 호출에 의해 설정되지 않았으므로 global(window)를 가리킴.
            console.log(that.name, tag);
        });
    }
};
notArrowFunc.say();
面白いところはinner thisページです.ここでは呼び出しでthisを設定していないので、thisはglobalプロパティを指します!(ウィンドウオブジェクト)

💡 Arrow Func Case

const ArrowFunc = {
    name: 'jengyoung',
    tags: ['front', 'end', 'dev'],
    say() {
        // console.log("outer this: ", this);
        this.tags.forEach((tag) => {
            // console.log("inner this: ", this);
            // 바깥 스코프의 this를 그대로 사용 가능.
            // 왜냐하면, 상위 스코프의 this를 물려받기 때문.
            console.log(this.name, tag);
        });
    }
};
ArrowFunc.say();
これに対し、Arrow functionでは上位機から継承されているため、上位機thisのArrowFuncを指す!
このような純粋なFunctionを使用して、間接的な近接ではなく、直接伝える場合は、Function.prototype.bindを使用します.
しかし、Function.prototype.bindは1回しか動作できないそうです!
関連するサンプルコードはここから来ている.
function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
console.log(h()); // azerty

var o = {a: 37, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
二、Json Schema Validation—断言ノート
Ajaxベーススケルトン