> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 'this'에 대해 이야기해 봅시다.

JavaScript에서 'this'에 대해 이야기해 봅시다.

伊谢尔伦
풀어 주다: 2016-12-05 10:01:53
원래의
944명이 탐색했습니다.

클로저 외에도 JS에서 이해하기 어려운 또 다른 개념이 있는데, 바로 이것이 사람들이 종종 혼동하는 개념이므로 오늘은 그 실제 모습을 자세히 살펴보겠습니다.

객체 정의:

var Charles = {
    living: true,
    age:23,
    gender:male,
    getGender:function(){ return Charles.gender;
    }
}; console.log(Charles.getGender()); //输出:male
로그인 후 복사

다음 코드는 동일한 효과를 가집니다.

var Charles = {
    living: true,
    age:23,
    gender:male,
    getGender:function(){ return this.gender; //注意“this” }
}; console.log(Charles.getGender()); //输出:male
로그인 후 복사

그럼 코드에서 이는 무엇을 의미할까요? 특정 환경에서는 이것의 정체를 구별하기 어려울 때가 있기 때문에 어떻게 분석해야 할까요? 그럼 이제 한 문장을 기억해야 합니다.
이 값의 호스트 함수가 다른 함수에 캡슐화되거나 다른 함수의 컨텍스트에서 호출될 때 이 값은 항상 전역(헤드/창) 참조입니다. 개체에.
즉, this 값은 중첩된 함수에 있으며 항상 ES5의 창을 가리킵니다.

var myObject = {
    myProperty: 'I can see the light',
    myMethod: function(){ var that = this; console.log(this); 
    //输出:'Object(这里是myObject)' var helperFunction = function(){ console.log(that.myProperty); 
    // 输出'I can see the light' console.log(this); //如果不使用`that`,则输出'window',因为是在嵌套函数里面 }(); //立即执行 }
}
myObject.myMethod(); //调用 myMethod
로그인 후 복사

위 문장과 결합하면 ES5의 경우는 이렇습니다.

var myObject = {
    func1: function(){ console.log(this); //输出 'Object'(第一层函数) var func2= function(){ console.log(this); 
    //从此处开始,this都是window(第二层函数) var func3= function(){ console.log(this); //当然是window }();
        }();
    }
}
myObject.func1();
로그인 후 복사

JavaScript에서 this에 대해 이야기해 봅시다.

그림과 같습니다

이쯤 되면 JS에서의 입장을 이해하셔야 하고, 앞으로는 헷갈리지 않으실 거라 믿습니다.


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