es6 블록 급 작용 역 의 사용 을 깊이 이해 하 다
8656 단어 es6블록 급 역할 영역
자 바스 크 립 트 에서 var 를 사용 하여 변 수 를 정의 합 니 다.전역 작용 역 함수 함수 의 국부 작용 역 을 정의 하 든 그 작용 역 의 맨 위로 향 상 됩 니 다.이것 도 자 바스 크 립 트 정의 변수의 곤 혹 스 러 운 부분 입 니 다.es5 는 다른 종류의 C 언어 와 같은 블록 급 역할 영역 이 없 기 때문에 es6 는 let 정의 변 수 를 추가 하여 블록 급 역할 영역 을 만 들 었 습 니 다.
var 정의 변수의 예 시 를 살 펴 보 겠 습 니 다.
function setName(){
if(condition){
var name = 'loho';
console.log(name);
}else{
console.log(name);
}
}
var student = 'eveningwater';
setName();
var student;
function setName(){
var name;
if(condition){
name = 'loho';
console.log(name);//loho
}else{
console.log(name);//undefined
}
}
student = 'eveningwater';
setName();
블록 급 성명 은 블록 급 역할 영역 을 지정 하여 블록 급 역할 영역 에서 정의 하 는 변 수 를 더 이상 전역 적 으로 접근 할 수 없 게 하고 블록 급 역할 영역 도 품사 역할 영역 이 라 고 부 릅 니 다.
블록 급 역할 영역 은 두 곳 에 존재 합 니 다:
let 성명 은 var 성명 용법 과 일치 합 니 다.유일한 차이 점 은 let 성명 이 변 수 를 한 블록 에 제한 하면 블록 급 역할 영역 이 형성 되 기 때문에 변수의 향상 도 존재 하지 않 습 니 다.
예 를 들 어 앞의 예 시 를 우 리 는 다음 과 같이 쓸 수 있다.
let stundent = 'eveningwater';
function setName(){
if(condition){
let name = 'loho';
console.log(name);//loho
}else{
// false
console.log(name);//
}
}
setName();
let 정의 변 수 를 사용 하기 전에 같은 변 수 를 설명 하면 오류 가 발생 합 니 다.따라서 변 수 를 반복 할 수 없습니다.다음 예제 와 같다.
var name = 'eveningwater';
// ,
let name = 'loho';
var name = 'eveningwater';
if(condition){
//
let name = 'loho';
}
const 식별 자 를 사용 하여 설명 한 변 수 는 초기 화 되 어야 하기 때문에 이 성명 은 상수 입 니 다.다음 예:
const name='eveningwater';//
const name;// ,
if(condition){
const name = 'eveningwater';
console.log(name);//'eveningwater'
}
//
console.log(name);
var name = 'eveningwater';
// ，
const name = 'loho';
var name = 'eveningwater';
if(condition){
const name = 'loho';
console.log(name);//loho,
}
const name = 'eveningwater';
//
name = 'loho';
const student = {
name:'eveningwater'
}
student.name = 'loho';//
// ，
student = {
name:'loho'
}
앞에서 언급 한 let 와 const 성명 의 변 수 는 역할 필드 의 맨 위 에 올 라 가지 않 기 때문에 이 두 개의 식별 자 성명 을 사용 하기 전에 방문 하면 오류 가 발생 할 수 있 습 니 다.type:of 연산 자 라 도 인용 오류 가 발생 할 수 있 습 니 다.다음 예:
console.log(typeof name);//
const name = 'eveningwater';그러나 const 나 let 에서 설명 한 변수의 역할 영역 외 에 type:of 연산 자 를 사용 하여 감 측 하면 오류 가 발생 하지 않 고 undefined 로 돌아 갈 뿐 입 니 다.다음 예:
console.log(typeof name);//undefined
if(condition){
let name = 'eveningwater';
}우 리 는 var 성명 변 수 를 사용 할 때 항상 이런 상황 을 만 납 니 다.다음 과 같 습 니 다.
for(var i = 0;i < 100;i++){
//
}
// i
console.log(i);//100
for(let i = 0;i < 100;i++){
//
}
//
console.log(i);var 성명 변 수 를 사용 하 는 순환 에서 함 수 를 만 드 는 것 은 매우 어렵 습 니 다.다음 과 같 습 니 다.
var func = [];
for(var i = 0;i < 5;i++){
func.push(function(){
console.log(i);
})
}
func.forEach(function(func){
func();
});
es5 에서 우 리 는 함수 표현 식(IIFE)을 사용 하여 이 문 제 를 해결 할 수 있 습 니 다.함수 표현 식 은 자신의 블록 급 역할 도 메 인 을 만 들 기 때 문 입 니 다.다음 과 같다.
var func = [];
for(var i = 0;i < 5;i++){
(function(i){
func.push(function(){
console.log(i);
})
})(i)
}
func.forEach(function(func){
func();// ， 0,1,2,3,4
});
var func = [];
for(let i = 0;i < 5;i++){
func.push(function(){
console.log(i);
})
}
func.forEach(function(func){
func();// 0,1,2,3,4
})
// i++
for(const i = 0;i < len;i++){
console.log(i);
}
var func = [];
var obj = {
name:'eveningwater',
age:22
}
for(let key in obj){
func.push(function(){
console.log(key)
})
}
func.forEach(function(func){
func();//name,age
});
//
var func = [];
var obj = {
name:'eveningwater',
age:22
}
for(const key in obj){
func.push(function(){
console.log(key)
})
}
func.forEach(function(func){
func();//name,age
});
7.전역 역할 영역 바 인 딩
let,const 성명 과 var 성명 의 또 다른 차이 점 은 세 사람 이 전체 역할 영역 에서 의 행위 이다.var 를 사용 하여 변 수 를 설명 할 때 전역 역할 영역(일반적으로 브 라 우 저 window 대상)에서 전역 속성 을 만 듭 니 다.이것 은 window 대상 에 존재 하 는 전역 변 수 를 덮어 쓸 수 있 음 을 의미 합 니 다.다음 예:
console.log(window.Array);// , f Array(){}
var Array = ' ';
console.log(window.Array);// ' ';
그러나 es6 의 let 와 const 성명 은 이러한 상황 이 발생 하지 않 습 니 다.let 와 const 성명 은 새로운 바 인 딩 을 만 듭 니 다.즉,window 대상 의 속성 이 되 지 않 습 니 다.설명 한 변 수 는 전역 변 수 를 덮어 쓰 지 않 고 가 려 진 다 는 것 이다.다음 예:
let Array = ' ';
console.log(Array);//' ‘;
console.log(window.Array);// , f Array(){}
8.블록 급 귀속 의 최 적 실천
es6 블록 급 성명 변 수 를 사용 할 때 가장 좋 은 실천 은 이 변수의 값 을 나중에 바 꾸 지 않 을 것 이 라 고 확정 하면 const 로 설명 하고 이 변수의 값 을 바 꾸 려 면 let 로 설명 하 는 것 입 니 다.예상 치 못 한 변수 값 이 바 뀌 었 을 때 많은 bug 가 나타 나 는 원본 이기 때 문 입 니 다.다음 예제:
function eveningWater(){};
eveningWater.prototype.name = 'eveningwater';
let ew = new eveningWater();
// ，
const _constructor = ew.constructor;
//
let name = ew.name;
if(_constructor === eveningWater || _constuctor === Object){
console.log(_constructor);
}else{
name = 'loho';
console.log(name)
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
