es6 화살표 기능을 사용할 수 없는 곳은 어디입니까?-프런트엔드 Q&A-php.cn

es6 화살표 기능을 사용할 수 없는 곳은 어디입니까?

WBOY

풀어 주다： 2022-03-31 19:02:47

원래의

1832명이 탐색했습니다.

ES6에서는 화살표 함수의 this 지점이 컨텍스트를 기반으로 하기 때문에 계산에서 화살표 함수를 사용할 수 없으며 계산에서 화살표 함수의 this 지점은 창을 가리킬 것이므로 데이터가 나타날 수 없습니다. 계산에서는 화살표 함수를 사용할 수 없습니다.

es6 화살표 기능을 사용할 수 없는 곳은 어디입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6에서 화살표 함수를 사용할 수 없는 경우

이것은 화살표 함수에서 문맥에 따른 것입니다. 나타나다.

예제는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>计算缓存</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{name}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
   firstName:"Zheng",
   lastName:"yifeng"
},
// 计算属性不能用箭头函数,箭头函数的this会指向window
computed:{
name(){
return this.firstName+this.lastName
}
//this => window
// name:()=>console.log(this)
        }
})
</script>
</body>
</html>

로그인 후 복사

지식 확장:

화살표 함수는 편리함과 장점이 있지만 단점도 있습니다. 코드가 간결하고 미리 정의되어 있다는 점입니다. 단점도 동일합니다. 코드가 너무 간결해서 읽기가 어렵습니다. 이는 미리 정의되어 있어 es5에서 겉보기에 정상적인 작업을 수행하는 데 js를 사용할 수 없습니다. 이러한 단점을 고려하여 화살표 기능을 사용해서는 안되는 상황을 아래에 요약해 보겠습니다.

객체에 대한 함수 정의
프로토타입에 대한 함수 정의
동적 컨텍스트의 콜백 함수
생성자에서
너무 짧음 (이해할 수 없는) 기능

거기 화살표 기능이 많은 편리함을 가져온다는 것은 의심의 여지가 없습니다. 화살표 함수를 적절하게 사용하면 초기 .bind() 함수 사용을 피하거나 고정된 컨텍스트가 필요한 경우 코드를 더욱 간결하게 만들 수 있습니다.

화살표 기능에도 불편한 점이 있습니다. 동적 컨텍스트가 필요한 경우에는 화살표 함수를 사용할 수 없습니다. 즉, 동적 컨텍스트가 필요한 함수 정의, 생성자, 이 개체를 대상으로 하는 콜백 함수, 화살표 함수로 이해하기 어려운 명령문은 사용할 수 없습니다. 다른 경우에는 화살표 기능을 자유롭게 사용해 보세요.

【관련 추천: javascript 비디오 튜토리얼, web front-end】

위 내용은 es6 화살표 기능을 사용할 수 없는 곳은 어디입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!