JavaScript 변수 및 범위에 대한 자세한 설명

천안문, 자금성, 만리장성에 가본 적이 없다면 베이징에 가본 적이 없다는 뜻입니다. JS 변수의 범위를 이해하지 못한다면 JS를 배우지 않는 것과 같습니다. JS 변수 범위의 중요성에 대해 직접 알아보세요! 팁: 이 글을 읽을 때 댓글도 꼭 읽어보세요!

JS는 약한 유형의(느슨한 유형의) 언어로, 이는 본질적으로 다르고 독특하다는 것을 의미합니다!
변수 범위를 설명하기 전에 먼저 JS의 변수에 대해 알아보겠습니다. JS의 변수는 다른 언어와 매우 다릅니다. JS 변수는 느슨한(필수는 아님) 특성을 가지므로 특정 단계에서 특정 유형의 값을 보유하는 이름일 뿐입니다.

JS 변수에는 기본 데이터 유형(값 유형)과 참조 데이터 유형(복합 데이터 유형)이라는 두 가지 데이터 유형이 포함됩니다.

기본 데이터 유형의 값은 스택 메모리에 저장됩니다. 참조 데이터 유형의 값은 힙 메모리에 저장되고, 참조 유형의 포인터 주소만 스택 메모리에 유지됩니다.
값에는 정의되지 않음, Null, 부울, 숫자 및 문자열의 5가지 기본 유형이 있습니다. 기본 데이터 유형의 값은 스택 메모리에 저장됩니다.

//在栈内存中开辟一块空间存储值为"laotie"的变量namevar name="laotie";//在栈内存中开辟一块空间存储值为"laotie"的变量name2var name2=name;//name与name2是相对独立的，所以改变name2的值为"xiaozhang"，而name的值不会受到影响var name2="xiaozhang";
console.log(name);//laotieconsole.log(name2);//xiaozhang

다시 참조 유형을 살펴보겠습니다.

/*在栈内存中存放 obj的地址
* 其值存放在堆内存中。
* 栈内存的地址的指向堆内存中的值。*/var obj={
    name:"zhangpeiyue"}/*将obj的地址赋值给obj2
所以在栈内存中存储的地址与obj的地址相同，
obj与obj2共享同一个值。
*/var obj2=obj;
obj2.name="xiaozhang";//因为obj与obj2共享同一个值，所以上行代码改变的是同一个值console.log(obj.name);//xiaozhang
 //你也可以认为obj即为obj2，引用类型比较的是地址，因此为trueconsole.log(obj==obj2);//true

다음으로 기본 데이터 유형과 참조 유형을 각각 비교해 보겠습니다.

• 기본 데이터 유형 비교, 비교는 값입니다.

//基本数据类型比较的是值，只要值相等比较结果即为truevar a=1;var b=1;console.log(a==b);//truevar c=2;var d=c;console.log(c==d);//true

• 참조 유형 비교, 비교는 주소입니다:

var obj={
    age:12}var obj2={
    age:12}//引用类型比较的是地址，而不是值。//由于每次创建的引用类型地址都不同，所以结果为falseconsole.log(obj==obj2);//falsevar obj3={
    age:12}//将obj3的地址赋值给obj4。所以地址相同var obj4=obj3;//由于比较的是地址，且obj3与obj4的地址相同，所以结果为trueconsole.log(obj3==obj4);

기본 유형과 참조 유형의 문제를 함수의 매개 변수로 살펴보겠습니다

• 기본 유형이 매개 변수로 사용되고 매개 변수는 지역 변수입니다

/*接收的所有基本数据类型，接收的是其值。
接收的参数都是函数体中的局部变量。
在函数体内改变值，对外部不会产生任何影响*/function fn(a){
    a+=1;
    console.log(a);//14}
var a=13;fn(a);
console.log(a);//13

• 참조 데이터 유형은 매개변수로 사용되며 매개변수는 전역 변수

/*引用数据类型传递的是引用地址，
因此函数体中的obj与函数外的obj的引用地址相同。
所以函数体中的obj与函数外的obj共享同一值，
改变其中一个值，其它的也会随之改变
*/function fn(obj){
    obj.name="laowang"
    console.log(obj.name);//laowang}
var obj={
    name:"laotie"}fn(obj);
console.log(obj.name);//laowang

마지막으로 범위에 대해 이야기해 보겠습니다! JS 변수 범위는 변수의 영향을 받는 범위를 나타냅니다. JS의 범위는 전역 범위와 로컬 범위(함수 범위)로 구분됩니다. 전역 범위에 정의된 변수는 전역 변수이고, 지역 범위에 정의된 변수는 지역 변수입니다.

전역 범위는 웹 브라우저에서 가장 주변적으로 정의된 범위입니다. 그러므로 전역 스코프에 정의된 변수와 함수를 윈도우 객체의 속성과 메소드라고 생각하시면 됩니다!

var color="red";//定义一个全局colorfunction fn(){
    color="blue";//全局函数可以在函数内访问}fn();
console.log(color);//blue

• 전역 변수와 함수는 모두 창 개체의 속성과 메서드입니다.

var color="red";//定义一个全局colorfunction fn(){    color="blue";//全局函数可以在函数内访问}window.fn();
console.log(window.color);//blue

• 함수 범위에 선언된 변수는 전역 범위에 선언된 변수와 이름이 동일합니다

var color="yellow";//定义全局变量colorfunction fn(){    //在函数体内如果拥有指定的变量，就不会去外层查找
    var color="red";//这里是局部变量color，外面是访问不到的哦
    console.log(color);//red}fn();
console.log(color);//yellow

• 매개변수를 전달합니다. 전달된 매개변수는 기본 유형이고, 매개변수는 함수 본문의 지역 변수입니다. 전달된 매개변수는 참조 유형이고 매개변수는 함수 본문의 전역 변수입니다. 글 서두에서 다루었으니 여기서는 설명하지 않겠습니다!

• 함수 본체에 하위 함수가 있는 경우 해당 함수만 하위 함수에 접근할 수 있습니다.

var color="green";function fn(){
    //子函数是建议以下划线开头
    function _fn2(){
        var color2="orange";
        console.log(color);//green
        console.log(color2);//orange
    }
    _fn2();//_fn2()的作用域在fn()内}
fn();
_fn2();//在此处调用fn2()是调取不到的

참고: 코드가 범위 내에서 실행될 때 범위 체인이라는 것이 있습니다. 그 역할은 변수와 메소드에 대한 액세스의 질서를 보장하는 것입니다. 즉, 현재 실행 환경에 지정된 변수나 메소드가 있으면 주변적으로 검색하지 않고, 존재하지 않으면 찾을 때까지 주변적으로 검색합니다! 찾을 수 없으면 오류가 보고됩니다! 지정된 변수 및 메서드를 계층별로 검색하는 동작은 작업 체인을 형성합니다. 이 체인은 범위 체인입니다. 지정된 변수를 외부에서 찾을(조회) 필요가 없기 때문에 지역 변수에 액세스하는 것은 전역 변수보다 훨씬 빠릅니다.
* JS에는 블록 수준 범위가 없습니다. 소위 블록 수준 범위는 if, for 및 기타 문에서 중괄호로 묶인 코드를 나타냅니다.

if(true){    var name="zhang";
}
console.log(name);//zhang

함수에서 var 키워드 없이 변수를 선언하면 해당 변수는 전역 변수가 됩니다. 그러나 이 동작은 이름 충돌을 쉽게 일으킬 수 있으므로 모든 사람이 사용하는 것은 권장되지 않습니다!

function fn(){    //此处a=12相当于window.a=12。
    a=12;//声明一个不带var关键字的变量}fn();
console.log(a);//12

fn 함수는 윈도우 환경에서 실행되기 때문에 함수 본문의 a=12는 window.a=12를 실행하는 것과 동일합니다. 그리고 window는 JS의 최상위 객체입니다. 또한 최상위 객체에 값 12의 속성을 추가했다고 볼 수도 있습니다. 따라서 변수 a는 전역 변수가 됩니다.
또한 함수 본문 내 변수가 var 키워드를 통해 선언된 경우 해당 변수는 지역 변수이므로 함수 본문 내에서만 접근할 수 있고 함수 본문 외부에서는 접근할 수 없습니다.

function fn(){
    var a=12;
    console.log(a);//12}fn();
console.log(a);//报错：a is not defined

• 범위에 대한 Alibaba의 인터뷰 질문 공유:

var obj = {
    b: 2};var fn = function () {};
fn.c = 3;function test(x, y, z) {
    x = 4;
    y.b = 5;
    z.c = 6;    return z;
}
test(a, obj, fn);
console.log(a + obj.b + fn.c);//12

变量的生命周期

所谓变量的生命周期指的是变量由声明到销毁。
对于全局变量来讲，其生命周期是永久的，除非我们主动去销毁这个全局变量。而在函数体内声明的局部变量，当函数运行完以后，局部变量就失去了任何价值，它们也会随着函数的执行完毕而销毁。

var fn=function(){
    var a=1;//退出函数后，局部变量a会销毁
    console.log(a);
}fn();

• JS环境中分配的内存一般有如下生命周期
  内存分配：当我们声明变量、函数、对象的时候，系统会自动为他们分配内存
  内存使用：即读写内存，也就是使用变量、函数等
  内存回收：使用完毕，由垃圾回收自动回收不再使用的内存 

• 本文讲解了JavaScript的变量及作用域，更多相关内容请关注php中文网。

• 相关推荐：

• 关于$.ajax()方法参数详解

• 讲解数学对象Math相关内容

• 关于JS和JSP的区别讲解
  

위 내용은 JavaScript 변수 및 범위에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!