this다른 자바 스크립트의 키워드 동작합니다 다른 언어에 비해. 객체 지향 언어에서 this키워드는 클래스의 현재 인스턴스를 나타냅니다. JavaScript에서의 값 this은 함수의 호출 컨텍스트에 의해 결정됩니다 (context.function() ) .

1. 글로벌 맥락에서 사용될 때

this글로벌 컨텍스트에서 사용하면 글로벌 오브젝트에 바인딩됩니다 ( window브라우저에서)

document.write(this);  //[object Window]

this전역 컨텍스트에 정의 된 함수 내부에서 사용 하는 this경우 함수가 실제로 전역 컨텍스트의 메서드로 만들어지기 때문에 여전히 전역 개체에 바인딩됩니다.

function f1()
{
   return this;
}
document.write(f1());  //[object Window]

위 f1는 전역 객체의 방법입니다. 따라서 window다음과 같이 객체에서 호출 할 수도 있습니다.

function f()
{
    return this;
}

document.write(window.f()); //[object Window]

2. 객체 메소드 내부에서 사용될 때

this객체 메소드 내에서 키워드 를 사용 this하면 “바로”둘러싸는 객체에 바인딩됩니다.

var obj = {
    name: "obj",
    f: function () {
        return this + ":" + this.name;
    }
};
document.write(obj.f());  //[object Object]:obj

위의 단어를 즉시 큰 따옴표로 묶었습니다. 객체를 다른 객체 안에 중첩 this하면 바로 부모에 바인딩됩니다.

var obj = {
    name: "obj1",
    nestedobj: {
        name:"nestedobj",
        f: function () {
            return this + ":" + this.name;
        }
    }
}

document.write(obj.nestedobj.f()); //[object Object]:nestedobj

메소드를 객체에 명시 적으로 함수를 추가하더라도 여전히 위의 규칙을 따르며 this이는 바로 상위 부모 객체를 가리 킵니다.

var obj1 = {
    name: "obj1",
}

function returnName() {
    return this + ":" + this.name;
}

obj1.f = returnName; //add method to object
document.write(obj1.f()); //[object Object]:obj1

3. 문맥없는 기능을 호출 할 때

this컨텍스트없이 호출 된 내부 함수 를 사용하는 경우 (예 : 오브젝트가 아닌) 글로벌 window함수 (브라우저에서) (함수가 오브젝트 내부에 정의 된 경우에도)에 바인딩됩니다 .

var context = "global";

var obj = {
    context: "object",
    method: function () {
        function f() {
            var context = "function";
            return this + ":" +this.context;
        };
        return f(); //invoked without context
    }
};

document.write(obj.method()); //[object Window]:global 

기능으로 모든 것을 시도

함수로 위의 포인트를 시험해 볼 수도 있습니다. 그러나 약간의 차이가 있습니다.

• 위에서 객체 리터럴 표기법을 사용하여 객체에 멤버를 추가했습니다. 를 사용하여 함수에 멤버를 추가 할 수 있습니다 this. 그들을 지정합니다.
• 객체 리터럴 표기법은 즉시 사용할 수있는 객체 인스턴스를 만듭니다. 함수를 사용하면 먼저 new연산자 를 사용하여 인스턴스를 만들어야합니다 .
• 또한 객체 리터럴 방식에서는 점 연산자를 사용하여 이미 정의 된 객체에 멤버를 명시 적으로 추가 할 수 있습니다. 이것은 특정 인스턴스에만 추가됩니다. 그러나 함수 프로토 타입에 변수를 추가하여 함수의 모든 인스턴스에 반영되도록했습니다.

아래에서는 Object this이상에서 수행 한 모든 작업을 시도 했지만 먼저 직접 객체를 작성하는 대신 함수를 작성했습니다.

/*********************************************************************
  1. When you add variable to the function using this keyword, it
     gets added to the function prototype, thus allowing all function
     instances to have their own copy of the variables added.
*********************************************************************/
function functionDef()
{
    this.name = "ObjDefinition";
    this.getName = function(){
        return this+":"+this.name;
    }
}

obj1 = new functionDef();
document.write(obj1.getName() + "<br />"); //[object Object]:ObjDefinition   

/*********************************************************************
   2. Members explicitly added to the function protorype also behave
      as above: all function instances have their own copy of the
      variable added.
*********************************************************************/
functionDef.prototype.version = 1;
functionDef.prototype.getVersion = function(){
    return "v"+this.version; //see how this.version refers to the
                             //version variable added through 
                             //prototype
}
document.write(obj1.getVersion() + "<br />"); //v1

/*********************************************************************
   3. Illustrating that the function variables added by both above
      ways have their own copies across function instances
*********************************************************************/
functionDef.prototype.incrementVersion = function(){
    this.version = this.version + 1;
}
var obj2 = new functionDef();
document.write(obj2.getVersion() + "<br />"); //v1

obj2.incrementVersion();      //incrementing version in obj2
                              //does not affect obj1 version

document.write(obj2.getVersion() + "<br />"); //v2
document.write(obj1.getVersion() + "<br />"); //v1

/*********************************************************************
   4. `this` keyword refers to the immediate parent object. If you
       nest the object through function prototype, then `this` inside
       object refers to the nested object not the function instance
*********************************************************************/
functionDef.prototype.nestedObj = { name: 'nestedObj',
                                    getName1 : function(){
                                        return this+":"+this.name;
                                    }
                                  };

document.write(obj2.nestedObj.getName1() + "<br />"); //[object Object]:nestedObj

/*********************************************************************
   5. If the method is on an object's prototype chain, `this` refers
      to the object the method was called on, as if the method was on
      the object.
*********************************************************************/
var ProtoObj = { fun: function () { return this.a } };
var obj3 = Object.create(ProtoObj); //creating an object setting ProtoObj
                                    //as its prototype
obj3.a = 999;                       //adding instance member to obj3
document.write(obj3.fun()+"<br />");//999
                                    //calling obj3.fun() makes 
                                    //ProtoObj.fun() to access obj3.a as 
                                    //if fun() is defined on obj3

4. 생성자 함수 안에서 사용될 때 .

함수가 생성자로 사용되면 (즉 new, 키워드 와 함께 호출 될 때 ) this함수 본문 내부는 생성중인 새 객체를 가리 킵니다.

var myname = "global context";
function SimpleFun()
{
    this.myname = "simple function";
}

var obj1 = new SimpleFun(); //adds myname to obj1
//1. `new` causes `this` inside the SimpleFun() to point to the
//   object being constructed thus adding any member
//   created inside SimipleFun() using this.membername to the
//   object being constructed
//2. And by default `new` makes function to return newly 
//   constructed object if no explicit return value is specified

document.write(obj1.myname); //simple function

5. 프로토 타입 체인에 정의 된 함수 내부에서 사용될 때

메소드가 오브젝트의 프로토 타입 체인에있는 경우 해당 메소드 this내부에서 메소드가 오브젝트에 정의 된 것처럼 메소드가 호출 된 오브젝트를 참조합니다.

var ProtoObj = {
    fun: function () {
        return this.a;
    }
};
//Object.create() creates object with ProtoObj as its
//prototype and assigns it to obj3, thus making fun() 
//to be the method on its prototype chain

var obj3 = Object.create(ProtoObj);
obj3.a = 999;
document.write(obj3.fun()); //999

//Notice that fun() is defined on obj3's prototype but 
//`this.a` inside fun() retrieves obj3.a   

6. 내부 call (), apply () 및 bind () 함수

• 이 모든 방법은에 정의되어 Function.prototype있습니다.
• 이 메소드는 함수를 한 번 작성하고 다른 컨텍스트에서 호출 할 수있게합니다. 즉, this함수가 실행되는 동안 사용될 값을 지정할 수 있습니다 . 또한 호출 될 때 원래 함수로 전달되는 매개 변수를 사용합니다.
• fun.apply(obj1 [, argsArray])inside obj1의 값으로 설정 하고 인수로 전달되는 요소를 호출합니다 .thisfun()fun()argsArray
• fun.call(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])– 내부 obj1값으로 설정 하고 인수로 전달하는 호출 .thisfun()fun()arg1, arg2, arg3, ...
• fun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])– 기능에 대한 참조를 반환 fun과 this내부에 결합 재미 obj1와의 매개 변수에 fun지정된 매개 변수에 바인딩을 arg1, arg2, arg3,....
• 지금까지 사이의 차이 apply, call그리고 bind명확하게해야합니다. apply배열과 같은 객체, 즉 숫자 length속성과 해당하는 음이 아닌 정수 속성을 가진 객체로 작동하는 인수를 지정할 수 있습니다. 반면 call함수에 인수를 직접 지정할 수 있습니다. 모두 apply와 call즉시 지정된 컨텍스트에서 지정된 인수와 함께 함수를 호출합니다. 반면 bind에, 지정된 this값과 인수에 바인딩 된 함수를 반환합니다 . 이 반환 된 함수에 대한 참조를 변수에 지정하여 나중에 참조 할 수 있습니다.

function add(inc1, inc2)
{
    return this.a + inc1 + inc2;
}

var o = { a : 4 };
document.write(add.call(o, 5, 6)+"<br />"); //15
      //above add.call(o,5,6) sets `this` inside
      //add() to `o` and calls add() resulting:
      // this.a + inc1 + inc2 = 
      // `o.a` i.e. 4 + 5 + 6 = 15
document.write(add.apply(o, [5, 6]) + "<br />"); //15
      // `o.a` i.e. 4 + 5 + 6 = 15

var g = add.bind(o, 5, 6);       //g: `o.a` i.e. 4 + 5 + 6
document.write(g()+"<br />");    //15

var h = add.bind(o, 5);          //h: `o.a` i.e. 4 + 5 + ?
document.write(h(6) + "<br />"); //15
      // 4 + 5 + 6 = 15
document.write(h() + "<br />");  //NaN
      //no parameter is passed to h()
      //thus inc2 inside add() is `undefined`
      //4 + 5 + undefined = NaN</code>

7. this내부 이벤트 핸들러

• 함수를 요소의 이벤트 핸들러에 직접 지정하는 경우 this이벤트 처리 함수 내부 에서 직접 사용 하는 것은 해당 요소를 나타냅니다. 이러한 직접 기능 할당은 addeventListener방법을 사용 하거나와 같은 전통적인 이벤트 등록 방법을 통해 수행 할 수 있습니다 onclick.
• 마찬가지로 요소 this의 이벤트 속성 (예 🙂 내에서 직접 사용 하는 경우 <button onclick="...this..." >요소를 나타냅니다.
• 그러나 this이벤트 처리 함수 또는 이벤트 속성 내에서 호출 된 다른 함수를 통해 간접적으로 사용 하면 전역 객체로 해석됩니다 window.
• Microsoft의 이벤트 등록 모델 방법을 사용하여 함수를 이벤트 핸들러에 첨부하면 위와 동일한 동작이 수행됩니다 attachEvent. 함수를 이벤트 핸들러에 할당하는 대신 (요소의 함수 메소드를 작성하는) 대신 이벤트에서 함수를 호출합니다 (글로벌 컨텍스트에서 효과적으로 호출).

JSFiddle 에서 더 잘 시도하는 것이 좋습니다 .

<script>
    function clickedMe() {
       alert(this + " : " + this.tagName + " : " + this.id);
    }
    document.getElementById("button1").addEventListener("click", clickedMe, false);
    document.getElementById("button2").onclick = clickedMe;
    document.getElementById("button5").attachEvent('onclick', clickedMe);
</script>

<h3>Using `this` "directly" inside event handler or event property</h3>
<button id="button1">click() "assigned" using addEventListner() </button><br />
<button id="button2">click() "assigned" using click() </button><br />
<button id="button3" onclick="alert(this+ ' : ' + this.tagName + ' : ' + this.id);">used `this` directly in click event property</button>

<h3>Using `this` "indirectly" inside event handler or event property</h3>
<button onclick="alert((function(){return this + ' : ' + this.tagName + ' : ' + this.id;})());">`this` used indirectly, inside function <br /> defined & called inside event property</button><br />

<button id="button4" onclick="clickedMe()">`this` used indirectly, inside function <br /> called inside event property</button> <br />

IE only: <button id="button5">click() "attached" using attachEvent() </button>

8. thisES6 화살표 기능

화살표 함수에서 this공통 변수처럼 동작합니다. 어휘 범위에서 상속됩니다. 함수의 this화살표 함수가 정의되고, 상기 화살표의 기능을 할 것이다 this.

따라서 다음과 같은 동작입니다.

(function(){}).bind(this)

다음 코드를 참조하십시오.

const globalArrowFunction = () => {
  return this;
};

console.log(globalArrowFunction()); //window

const contextObject = {
  method1: () => {return this},
  method2: function(){
    return () => {return this};
  }
};

console.log(contextObject.method1()); //window

const contextLessFunction = contextObject.method1;

console.log(contextLessFunction()); //window

console.log(contextObject.method2()()) //contextObject

const innerArrowFunction = contextObject.method2();

console.log(innerArrowFunction()); //contextObject 

답변

function foo() {
    console.log("bar");
    console.log(this);
}
foo(); // calling the function

var myObj = {key: "Obj"};
myObj.logThis = function () {
    // I am a method
    console.log(this);
}
myObj.logThis(); // myObj is logged

// continuing with the previous code snippet

var myVar = myObj.logThis;
myVar();
// logs either of window/global/undefined based on mode of operation

var el = document.getElementById('idOfEl');
el.addEventListener('click', function() { console.log(this) });
// the function called by addEventListener contains this as the reference to the element
// so clicking on our element would log that element itself

function Person (name) {
    this.name = name;
    this.sayHello = function () {
        console.log ("Hello", this);
    }
}

var awal = new Person("Awal");
awal.sayHello();
// In `awal.sayHello`, `this` contains the reference to the variable `awal`

function foo () { console.log (this, arguments); }
var thisArg = {myObj: "is cool"};
foo.call(thisArg, 1, 2, 3);

foo.apply(thisArg, [1,2,3])

function foo (a, b) {
    console.log (this, arguments);
}
var thisArg = {myObj: "even more cool now"};
var bound = foo.bind(thisArg, 1, 2);
console.log (typeof bound); // logs `function`
console.log (bound);
/* logs `function () { native code }` */

bound(); // calling the function returned by `.bind`
// logs `{myObj: "even more cool now"}, [1, 2]`

var myObj = {
    hello: function () {
        return "world"
        },
    myMethod: function () {
        // copy this, variable names are case-sensitive
        var that = this;
        // callbacks ftw \o/
        foo.bar("args", function () {
            // I want to call `hello` here
            this.hello(); // error
            // but `this` references to `foo` damn!
            // oh wait we have a backup \o/
            that.hello(); // "world"
        });
    }
  };

(함수 (값) {
    this.value = 값;
    $ ( '. some-elements'). each (function (elt) {
        elt.innerHTML = this.value; // 어 오!! 아마도 정의되지 않은
    });
}) (2);

this.value = 값;

(함수 (값) {
    var self = this; // 작은 변화
    self.value = 가치;
    $ ( '. some-elements'). each (function (elt) {
        elt.innerHTML = self.value; // 휴 !! == 2
    });
}) (2);

var person = {
    firstName: "Penelope",
    lastName: "Barrymore",
    fullName: function () {

    // We use "this" just as in the sentence above:
       console.log(this.firstName + " " + this.lastName);

    // We could have also written:
       console.log(person.firstName + " " + person.lastName);
    }
}

function foo() {
     // return an arrow function
     return (a) => {
     // `this` here is lexically inherited from `foo()`
     console.log(this.a);
  };
}
var obj1 = { a: 2 };
var obj2 = { a: 3 };

var bar = foo.call(obj1);
bar.call( obj2 ); // 2, not 3!

function someKindOfFunction() {
   this.style = 'foo';
}