>  기사  >  웹 프론트엔드  >  js 클로저(코드)에서 이것이 가리키는 솔루션에 대한 솔루션

js 클로저(코드)에서 이것이 가리키는 솔루션에 대한 솔루션

不言
不言원래의
2018-08-23 15:47:012324검색

이 기사의 내용은 js 클로저에서 이 내용이 가리키는 솔루션(코드)에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

다음은 객체 메소드에 정의된 하위 함수에 대한 질문입니다. 하위 함수가 실행될 때 이는 어디를 가리킵니까?
세 가지 질문:
(1) 다음 코드에서 출력되는 객체는 무엇입니까?
(2) 이 코드는 myNumber.value를 1씩 증가시키는 기능을 달성할 수 있습니까?
(3) 도우미 기능을 포기하지 않고 올바른 기능을 달성하기 위해 어떤 수정 방법을 사용할 수 있습니까?

var myNumber = {
  value: 1,
  add: function(i){
    var helper = function(i){
        console.log(this);          
        this.value += i;
    }
    helper(i);
  }
}
myNumber.add(1);

1. 이것은 창 개체를 가리킵니다(익명 함수의 실행은 전역이므로 이 개체는 창을 가리킵니다).
2. 값에 1을 더하면 구현할 수 없습니다(각 함수는 자동으로 두 개의 특수 변수를 얻습니다). this 및 인수를 호출하면 내부 함수가 이 두 개체를 검색할 때 활성 개체까지만 검색하므로 외부 함수의 this 개체에 액세스할 수 없습니다.)
3 올바른 함수를 얻으려면 코드를 수정하세요. 방법 1:

var myNumber={
    value:1,
    add:function(i){
        var that=this;//定义变量that用于保存上层函数的this对象
        var helper=function(i){
             console.log(that);
        that.value+=i;
    }
    helper(i);
    }
}
myNumber.add(1);

방법 2:

var myNumber={
    value:1,
    add:function(i){
        var helper=function(i){
            this.value+=i;
        }
        helper.apply(this,[i]);//使用apply改变helper的this对象指向,使其指向myNumber对象
    }
}
myNumber.add(1);

방법 3:

var myNumber={
    value:1,
    add:function(i){
        var helper=function(i){
            this.value+=i;
        }.bind(this,i);//使用bind绑定,和apply相似,只是它返回的是对函数的引用,不会立即执行
        helper(i);
    }
}
myNumber.add(1);

관련 권장 사항:

js는 브라우저가 PC인지 모바일인지 어떻게 결정하나요? (두 가지 방법)

js에서 자체 실행 함수를 호출하는 두 가지 방법

위 내용은 js 클로저(코드)에서 이것이 가리키는 솔루션에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.