JS 범위 체인 및 클로저 예제 공유

실행 컨텍스트는 범위를 형성하는 현재 코드의 실행 환경으로 이해될 수 있습니다.

- 범위: 단락 < 스크립트 > - 전역: 변수 정의, 함수 선언(< 스크립트 >에서)
- 함수 : 변수 정의, 함수 선언, this, 인수

console.log(a);var a = a;

fn('dong');function(){}

++this++

var a = {    name:'A',    fn:function(){        console.log(this.name)
    }
}

a.fn();//this === A
a.fn.call({name:'B'})//this === {name :'B'}var fn1 = a.fn;
fn1(); //this==windowfn1;

• 생성자로 실행

function Foo(name){
    this.name = name;
}var f = new ('dong');

로그인 후 복사

• 객체 속성으로 실행

var obj = {
    name :'a',
    printName:function(){
        console.log(this.name);
    }
}
obj.printName(); //a

로그인 후 복사

• 일반 함수로 실행

function fn(){
    console.log(this);//this===window}

로그인 후 복사

• 호출 적용 바인드

//callfunction fn1(name，age){
    alert(name,age);
    console.log(this);
}
fn1.call({x:100},'dong',200);//弹出dong 200//打印{x:100}//call将this指向第一个参数的值//常用它来改变函数的this值//apply与call类似//bindfunction fn1(name,age){
    alert(name);
    console.log(this);
}
fn.call({x:100},'dong',20);//this为{x:100}var fn2 =function (name,age){
    alert(name);
    console.log(this);
}.bind({y:200});//必须用函数表达式的方式fn2.call('dong',20); //this为{y:200}

로그인 후 복사

++Scope++

//无块级作用域if(true){
var name = 'dong';
}
console.log(name);//函数和全局作用域var a =100;
function fn(){
    var a =200;
    console.log('fn',a);
}
console.log('global',a);fn();

++Scope chain++

var a = 100;function(){
    var b = 200;
    console.log(a);//当前作用域中没有定义a,a就是自由变量
    console.log(b);
}

var a = 100;function F1(){
    var b =200;    function F2(){
        var c = 300;
        console.log(a);
        console.log(b);
        console.log(c);
    }
}

++Closure++

• 반환값 함수

• 전달할 매개변수 함수

function F1(){
    var a = 100;    return function(){
        console.log(a);
    }
}var f1 = F1();//表示变量f1是一个函数var a = 200;
f1(); //100//全局里的a与在F1作用域里的a是没有关系的，一个函数的父级作用域是它定义时候的作用域而不是它执行的作用域，所以a这个自由变量直接在它的父级作用域中直接找到。

로그인 후 복사

function F1(){
    var a = 100;    return function(){
        console.log(a);
    }
}var f1 = F1();function F2(fn){
    var a = 200;
    fn();
}
F2(f1);//100

로그인 후 복사

• 변수 승격 이해

• 설명하기 여러 가지 사용 시나리오

- 클릭하면 10개의 < 해당 시퀀스 번호

//考察作用域var i,a;for(var i = 0;i<10;i++){
    a = document.creatElement(&#39;a&#39;);
    a.innerHTML = i +<br/>;
    a.addEventListener(&#39;click&#39;,function(e){
        e.preventDefault();
        alert(i); //自由变量需要从父级作用域获取值
    })
    document.body.appendChild(a);
}//这时候监听事件里的函数的自由变量，已经变为10了，所以，不管点击哪个它的序号都是10

//正确方法var i;for (i = 0;i < 10;i++){
    (function(i){
        var a = document.creatElement(&#39;a&#39;);
        a.addEventListener(&#39;click&#39;,function(e){
            e.preventDefault();
            alert(i);  
        })
        document.body.appendChild(a);
    })(i);//自调用函数立即执行}//(function(i){})(i)//自执行函数，就是不用调用，只要定义完成就能立即执行的函数

• 스코프 이해하기

• 실제 개발에서 클로저 적용(범위의 실제 적용)

//主要作用用于封装变量，收敛权限funciton isFirstLoad(){    var _list = [];    return function(id){
        if(_list.indexOf(id) >= 0){            return false;
        }else{
            _list.push(id);            return true;
        }
    }
}//使用var firstLoad = idFirstLoad();
firstLoad(10); //truefirstLoad(10); //falsefirstLoad(20); //true//在isFirstLoad函数外面，根本不可能修改掉__ list的值

로그인 후 복사
관련 권장 사항:




스코프 체인 예제 공유에 작동하는 javascript

자바스크립트에서 스코프 체인에 작동하는 방법 에 대한 자세한 설명

Javascript - 범위, 범위 체인 및 클로저에 대한 자세한 설명(그림 및 텍스트)

위 내용은 JS 범위 체인 및 클로저 예제 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!