ES6 객체 메서드가 객체를 선언할 때 화살표 함수 this의 지향 문제
1315 단어 es6
토대
의문
// var value
var value = ' '
const foo = {
value: ' ',
getValue: () => console.log(this.value)
}
foo.getValue() // =>
// const value
const value = ' '
const foo = {
value: ' ',
getValue: () => console.log(this.value)
}
foo.getValue() // => undefind
상기 두 가지 예시에서 첫 번째 출력 샤오밍의 두 번째 출력
undefined은 모두 직접 요청한 전역 속성이다. const는 윈도우 속성에 자동으로 걸리지 않기 때문에undefined를 출력한다.까닭
화살표 함수는 성명할 때 결정된다.
화살표 함수this의 지향(this뿐만 아니라 슈퍼, new.target 등)은 외곽의 가장 가까운 비화살표 함수에 의해 결정된다.
대상이 성명할 때value와
getvalue()는foo의 내부 속성(방법)이므로 그들의 외곽은 자연히 전체 국면이다.관건은
getvalue:()=>{}와getvalue:function(){}과getvalue(){} 이 세 가지 형식의 방법에 대한 성명을 어떻게 대해야 하는가에 있다.뒤의 두 가지 성명 방식은 기능적으로 등가이고 세 번째는 es6가 새로 추가한 약자 방식이다.첫 번째 화살표 함수와 둘의 비례는 화살표 함수 자체와this지향 등에 있다.
삼자가 성명하는 과정에서value 속성과 마찬가지로foo 내부에 속하고foo와 같은 가격에 속한다.
따라서 화살표 함수로 getvalue 방법을 설명할 때this는foo 외곽에 의해 결정되고foo의 외곽은 window이기 때문에 getvalue의this는 window를 가리킨다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript로 카드 놀이를 넘기는 애니메이션을 만들려고했습니다.카드를 넘기는 애니메이션을 만들어 보았습니다. 폴더 구성은 다음과 같습니다. 코드는 다음과 같습니다. card_turning.html 다음은 JavaScript 코드입니다. cardTurning.js 결과는, 이런 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
