JS 변수 선언 소개

PHPz
풀어 주다: 2024-09-04 14:32:02
원래의
747명이 탐색했습니다.

alis4ops.com을 만들고 계신 아버지를 위해 이 가이드를 작성했습니다.

  • 저는 '바바'라고 부릅니다.
  • 그는 웹 애플리케이션 구축을 배우고 있으며 이전에는 전기 엔지니어였습니다.
  • 그를 언급하는 기사 주위에 몇 가지 메모를 남길 것이므로 이 글을 읽는 interwebz의 누구든지 해당 내용을 무시할 수 있습니다. 걱정하지 않으셨으면 좋겠습니다!

문맥

다음과 같은 기능이 있습니다:

  • startTouch 처리
  • MoveTouch 처리

DragDrop.js에 정의된 Baba

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}

function handleMoveTouch(event) {
    event.preventDefault()
    if (draggedElement) {
        const touch = event.touches[0];
        // ..more code
    }
}
로그인 후 복사

라인에서 draggedElement에 액세스하고 있음을 확인하세요.

  • if(드래그된 요소) {

hanldeMoveTouch는 호출 시 오류를 발생시키지 않습니다.

Chrome DevTools에서 if(draggedElement)에 중단점을 배치하면 draggedElement가 handlerStartTouch의 event.target에서 제공하는 것과 동일한 html 요소로 확인되는 것을 볼 수 있습니다

문제

handleStartTouch에 정의되어 있음에도 불구하고 handlerMoveTouch에서 dragElement에 액세스할 수 있는 이유는 무엇입니까

더 일반적으로, 함수에 정의된 변수를 자바스크립트의 다른 함수에서 접근할 수 있는 이유는 무엇입니까?


설명

handleStartTouch 기능을 살펴보세요:

function handleStartTouch(event) {
    draggedElement = event.target;
    const touch = event.touches[0];
    touchStartX = touch.clientX - draggedElement.getBoundingClientRect().left;
    touchStartY = touch.clientY - draggedElement.getBoundingClientRect().top;
}
로그인 후 복사

구체적으로 다음 줄:

    draggedElement = event.target;
로그인 후 복사

두 키워드 중 하나를 사용하여 변수 이름 draggedElement를 선언하지 않습니다

  • 상수
  • 하자
  • 변수

예를 들어 다음과 같이 정의하지는 않습니다.

    const draggedElement = event.target;
로그인 후 복사

변수 선언(일명 키워드)

Javascript에서 변수 선언(키워드라고도 함)을 사용하지 않으면 JavaScript는 해당 변수를 전역 변수로 간주합니다.


운동

두 가지 함수를 정의하는 다음 예를 살펴보세요.

// Takes in two arguments and returns the sum
function add(x, y) {
  sum = x + y
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}
로그인 후 복사

Chrome에서 DevTools 열기

  • "콘솔"로 이동
  • 위 코드를 복사하여 붙여넣으세요
  • 엔터를 누르세요
  • 정의되지 않은 상태로 반환됩니다. 괜찮습니다.

Intro to JS Variable Declarations

콘솔에서 add(1,1)을 호출하세요

  • 콘솔 반환 2가 표시됩니다.
add(1,1)
=> 2
로그인 후 복사

Intro to JS Variable Declarations

그런 다음 printStatus를 호출하세요

  • 출력 합계가 2인 것을 볼 수 있습니다

Intro to JS Variable Declarations

printStatus()가 add(x, y)에 정의된 변수 sum에 액세스할 수 있음을 알 수 있습니다

이는 변수 sum이 다음 키워드 없이 선언되기 때문입니다.

  • 합계 = x + y

이제 add(x, y) add를 변경하여 합계에 대한 변수 선언을 사용하겠습니다

// Takes in two arguments and returns the sum
function add(x, y) {
  const sum = x + y // use the variable declartion const
  return sum
}

// prints sum if it is defined
function printStatus() {
  if (sum) {
    console.log("Sum: ", sum)
  } else {
    console.log("Sum does no exist")
  }
}
로그인 후 복사
  • 크롬으로 이동
  • Ctrl + R로 페이지 새로고침
    • 새 탭을 열고 devtools 콘솔을 다시 열 수도 있습니다.

콘솔 로그에 함수를 다시 정의해 보겠습니다.

  • 위의 코드 조각을 복사하여 콘솔에 붙여넣고 Enter 키를 누르세요.

새 개발 콘솔을 시작했기 때문에 이를 재정의해야 합니다.

Intro to JS Variable Declarations

이제 콘솔에서 add(2, 2)를 호출하세요

  • 콘솔 반환 4가 표시됩니다

Intro to JS Variable Declarations

printStatus를 호출하여 add(x, y)에 정의된 변수 sum에 액세스할 수 있는지 확인하세요

printStatus()
> Uncaught ReferenceError: sum is not defined
    at printStatus (<anonymous>:9:3)
    at <anonymous>:1:1
로그인 후 복사

Intro to JS Variable Declarations

합계가 정의되지 않았다는 오류가 발생합니다

함수 내에서 변수 선언(const, let, var)으로 변수를 정의할 때 해당 변수의 범위가 함수 내에서만 적용됨을 확인합니다

함수 내에서 변수 선언이 없이 변수가 정의되면 해당 변수의 범위는 전역입니다.

Baba(그리고 이 글을 읽고 있는 다른 사람에게도) 도움이 되기를 바랍니다.

위 내용은 JS 변수 선언 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿