화살표 함수는this의 해결 방법을 사용할 수 없습니다

ES6에서 화살표 함수()=> {}, 이렇게 간단한 쓰기를 보니 나도 즐겨 쓴다.그러나 화살표 함수에서this를 사용하려면 현재 대상을 얻지 못하고 윈도우 대상을 얻는 것이 나타납니다.
 
다음은 ES5의 원형 체인에 say 함수를 추가하여 함수에this 대상을 출력한 것입니다. 실행 후 정확한 Person {name: "좁쌀",age: 7}

"en">

    "UTF-8">
    


    <span style="color:#000000;">
        function Person(name,age){
            </span><span style="color:#0000ff;">this</span>.name =<span style="color:#000000;"> name;
            </span><span style="color:#0000ff;">this</span>.age =<span style="color:#000000;"> age;
        }
        Person.prototype.say </span>=<span style="color:#000000;"> function(){
            console.log(</span><span style="color:#0000ff;">this</span><span style="color:#000000;">);
        }
        </span><span style="color:#0000ff;">var</span> xiaomi = <span style="color:#0000ff;">new</span> Person(<span style="color:#800000;">'</span><span style="color:#800000;"> </span><span style="color:#800000;">'</span>,<span style="color:#800080;">7</span><span style="color:#000000;">);
        xiaomi.say();  //Person {name: " ", age: 7}
    </span>

 
자, 그럼 화살표 함수를 사용하면say를 화살표 함수로 바로 바꿉니다.

"en">

    "UTF-8">
    


    <span style="color:#000000;">
        function Person(name,age){
            </span><span style="color:#0000ff;">this</span>.name =<span style="color:#000000;"> name;
            </span><span style="color:#0000ff;">this</span>.age =<span style="color:#000000;"> age;
        }
        Person.prototype.say </span>= () =><span style="color:#000000;"> {
            console.log(</span><span style="color:#0000ff;">this</span><span style="color:#000000;">);
        }
        </span><span style="color:#0000ff;">var</span> xiaomi = <span style="color:#0000ff;">new</span> Person(<span style="color:#800000;">'</span><span style="color:#800000;"> </span><span style="color:#800000;">'</span>,<span style="color:#800080;">7</span><span style="color:#000000;">);
        xiaomi.say(); </span><span style="color:#008000;">//</span><span style="color:#008000;"> window</span>
    

출력된this는 window 대상이라고 직접 표시합니다. 이것은 요구에 부합되지 않습니다. 왜 window 대상이 되었을까요? 화살표 함수 = > 뒤에 있는 이 괄호 ({}) 는function 역할 영역이 아니기 때문입니다.
그러면 여기서 어떻게 얻어야 하는지, 부족한 것을 보충하는 방법(부족한 대상을 전입)--간단하고 거칠지만 효과적이다.
 
2018-03-20   22:54:23
화살표 함수 안에 this가 위에서 왜 window인지에 대해 보충합니다.
화살표 함수는this를 갖추지 못하기 때문에 당신도this라는 키워드를 사용할 수 있지만 이this는 그의 가장 가까운 상하문 환경을 가리키기 때문에 여기의this는window를 가리킨다
2018-03-20  22:56:11
 
 

"en">

    "UTF-8">
    


    <span style="color:#000000;">
        function Person(name,age){
            </span><span style="color:#0000ff;">this</span>.name =<span style="color:#000000;"> name;
            </span><span style="color:#0000ff;">this</span>.age =<span style="color:#000000;"> age;
        }
        Person.prototype.say </span>= (self) =><span style="color:#000000;"> {
            console.log(self);
        }
        </span><span style="color:#0000ff;">var</span> xiaomi = <span style="color:#0000ff;">new</span> Person(<span style="color:#800000;">'</span><span style="color:#800000;"> </span><span style="color:#800000;">'</span>,<span style="color:#800080;">7</span><span style="color:#000000;">);
        xiaomi.say(xiaomi); </span><span style="color:#008000;">//</span><span style="color:#008000;"> Person {name: " ", age: 7}</span>
        xiaomi.food = <span style="color:#800000;">'</span><span style="color:#800000;"> </span><span style="color:#800000;">'</span><span style="color:#000000;">;
        Person.prototype.eat </span>=(self) =><span style="color:#000000;">{
            console.log(self.name </span>+ <span style="color:#800000;">'</span><span style="color:#800000;"> </span><span style="color:#800000;">'</span> +<span style="color:#000000;"> self.food);
        }
        xiaomi.eat(xiaomi); // 
    </span>

 
그래서 여기서 화살표 함수의 한계를 알게 되면 화살표 함수를 줄여 불필요한 오류가 발생하지 않도록 하는 것이 좋다.
 
전재 대상:https://www.cnblogs.com/webBlog-gqs/p/7282707.html