찾다

집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트로 이것을 이해하기

자바스크립트로 이것을 이해하기

怪我咯
怪我咯원래의
2017-04-05 13:55:241154검색

이 글을 쓰는 이유는 무엇인가요?

이전에 알리바바나 다른 회사에서 면접 때 이런 질문을 받은 적이 있어서 여러분과 공유하고 싶습니다. 아래 7가지 상황의 차이점을 확실히 이해하셨다면 면접을 따라가시면 됩니다. 명확한 설명은 의심할 여지없이 큰 장점입니다. 이 기사를 이해하고 나면 면접관은 더 이상 질문하는 것을 두려워하지 않을 것입니다.

자바스크립트에서 이런 얘기를 하면 사실 머리가 아프다. 자바와 달리 C++에서는 이것을 호출하는 객체를 가리킨다.

함수에서 this의 값은 실제로 함수가 호출되고 실행될 때 결정되며, 함수가 정의될 ​​때 결정될 수 없습니다.

이 값은 실행 컨텍스트의 일부이므로 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성됩니다. 코드에서 this를 사용하면 범위 체인에서 검색하지 않고 실행 컨텍스트에서 직접 this 값을 가져옵니다.

이 값을 보면 대략 다음 7가지 상황으로 나눌 수 있습니다.

사례 1: 전역 & 일반 함수 호출

글로벌 환경에서는 항상 창을 가리킨다. 

console.log(this === window);     //true

일반 함수가 호출되면(생성자가 아니며 앞에 새 항목이 추가되지 않음) 이 함수도 창을 가리킵니다. 

var x = 10;
function foo(){
    console.log(this);     //Window
    console.log(this.x);   //10
}
foo();

사례 2: 생성자

소위 생성자는 new 함수에서 파생된 객체입니다. 일반적으로 생성자의 함수 이름 첫 글자는 대문자로 표시됩니다. 함수 및 배열 생성자 함수에 속합니다. 

function Foo(){
    this.x = 10;
    console.log(this);    //Foo {x:10}
}
var foo = new Foo();
console.log(foo.x);      //10

위 코드에서 함수가 생성자로 사용되면 이 함수는 새로 만들려는 객체를 나타냅니다.

그런데 new Foo() 대신 Foo 함수를 직접 호출하면 Case 1이 되어 Foo()가 일반 함수가 됩니다. 

function Foo(){
    this.x = 10;
    console.log(this);    //Window
}
var foo = Foo();
console.log(foo.x);      //undefined

사례 3: 객체 메소드

함수가 객체의 메소드로 사용되는 경우 메소드의 this는 객체를 가리킵니다. 

var obj = {
    x: 10,
    foo: function () {
        console.log(this);        //Object
        console.log(this.x);      //10
    }
};
obj.foo();

참고: 함수가 객체 메서드에 정의된 경우 상황이 다릅니다. 

var obj = {
    x: 10,
    foo: function () {
        function f(){
            console.log(this);      //Window
            console.log(this.x);    //undefined
        }
        f();
    }
}
obj.foo();

이렇게 이해하면 됩니다. 함수 f가 obj.foo 내부에 정의되어 있지만 여전히 일반 함수에 속하며 이는 여전히 window를 가리킵니다. (이것은 함정이므로 주의하시기 바랍니다)

여기서 상위 스코프에서 obj.x 변수를 호출하려면 self를 사용하여 외부 this 변수를 캐시하면 됩니다. 

var obj = {
    x: 10,
    foo: function () {
        var self = this;
        function f(){
            console.log(self);      //{x: 10}
            console.log(self.x);    //10
        }
        f();
    }
}
obj.foo();

foo 함수가 객체 메서드로 호출되지 않는 경우: 

var obj = {
    x: 10,
    foo: function () {
        console.log(this);       //Window
        console.log(this.x);     //undefined
    }
};
var fn = obj.foo;
fn();

obj.foo가 전역 변수에 할당되고 obj의 속성으로 호출되지 않으면 이 값은 이때는 창이다.

사례 4: 생성자 프로토타입 속성

function Foo(){
    this.x = 10;
}
Foo.prototype.getX = function () {
    console.log(this);        //Foo {x: 10, getX: function}
    console.log(this.x);      //10
}
var foo = new Foo();
foo.getX();

Foo.prototype.getX 함수에서 이는 foo 객체를 가리킵니다. 뿐만 아니라, 전체 프로토타입 체인에서도 이는 현재 객체의 가치를 나타냅니다.

사례 5: 호출, 적용 또는 바인딩을 사용하여 함수를 호출합니다. 

var obj = {
    x: 10
}
function foo(){
    console.log(this);     //{x: 10}
    console.log(this.x);   //10
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();

콜, 적용, 바인드에 의해 함수가 호출될 때 이 값은 전달된 객체의 값입니다.

사례 6: DOM 이벤트 this

HTML DOM 이벤트 핸들러에서 this는 항상 핸들러가 바인딩된 HTML DOM 노드를 가리킵니다. 

function Listener(){   
    document.getElementById('foo').addEventListener('click', this.handleClick);     //这里的 this 指向 Listener 这个对象。不是强调的是这里的 this
}
Listener.prototype.handleClick = function (event) {
    console.log(this);    //<p id="foo"></p>
}
var listener = new Listener();
document.getElementById(&#39;foo&#39;).click();

이것은 매우 이는 이해하기 쉽습니다. 이는 handlerClick 런타임 컨텍스트를 변경하는 함수에 매개변수를 전달하는 것과 같습니다. 

var obj = {
    x: 10,
    fn: function() {
        console.log(this);         //Window
        console.log(this.x);       //undefined
    }
};
function foo(fn) {
    fn();
} 
foo(obj.fn);

바인딩을 사용하여 컨텍스트를 전환할 수도 있습니다. 

function  Listener(){
    document.getElementById(&#39;foo&#39;).addEventListener(&#39;click&#39;,this.handleClick.bind(this));      
}
Listener.prototype.handleClick = function (event) {
    console.log(this);    //Listener {}
}
var listener = new Listener();
document.getElementById(&#39;foo&#39;).click();

before 여섯 가지 상황은 한 문장으로 요약됩니다. 이는 메서드를 호출하는 개체를 가리킵니다.

사례 7: 화살표 함수의 this

화살표 함수를 사용할 때는 상황이 다릅니다. 화살표 함수 내부의 this는 컨텍스트에 따라 결정되는 어휘 범위입니다. 

var obj = {
    x: 10,
    foo: function() {
        var fn = () => {
            return () => {
                return () => {
                    console.log(this);      //Object {x: 10}
                    console.log(this.x);    //10
                }
            }
        }
        fn()()();
    }
}
obj.foo();

이제 화살표 함수는 이 가리키는 것을 완전히 수정합니다. 이는 항상 외부 호출자 obj인 어휘 범위를 가리킵니다.

화살표 기능을 사용하면 이전 해킹: 

var self = this;

가 더 이상 필요하지 않습니다. 

var obj = {
    x: 10,
    foo: function() {
        var fn = () => {
            return () => {
                return () => {
                    console.log(this);    // Object {x: 10}
                    console.log(this.x);  //10
                }
            }
        }
        fn.bind({x: 14})()()();
        fn.call({x: 14})()();
    }
}
obj.foo();

화살표 함수의 어휘 범위에 따라 바인딩되어 있으므로 call() 또는 적용()으로 화살표 함수를 호출할 때 바인딩할 수 없습니다. 즉, 매개변수에 처음 전달되는 것은 무시되었습니다.

추가 참고 사항:

  • 이것은 예약어이므로 다시 쓸 수 없습니다. 

    • function test(){
    var this = {};     //Uncaught SyntaxError: Unexpected token this
}
  • 호스트 개체:

  1. 언어가 실행 중일 때 The 환경을 호스트 환경이라고 합니다.

  2. JavaScript의 경우 가장 일반적인 호스트 환경은 웹 브라우저입니다. 브라우저는 JavaScript가 실행될 수 있는 환경을 제공하므로 JavaScript 엔진이 제공되어야 합니다. 호스트 환경 도킹과 상호 작용할 수 있습니다.

  3. JavaScript 엔진은 JavaScript 코드가 실제로 실행되는 곳입니다. 일반적인 엔진에는 V8(현재 Google에서 제작하는 가장 빠른 JavaScript 엔진)과 JavaScript 코어가 포함됩니다.

  4. 브라우저나 서버(nodejs)에는 자체 JS 엔진이 있습니다. 브라우저에서는 전역 개체가 window이고, nodejs에서는 전역 개체가 전역입니다.


위 내용은 자바스크립트로 이것을 이해하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

관련 기사

더보기