미래 지향적인 웹 앱 구축: The Codest의 전문가 팀이 제공하는 인사이트
The Codest가 최첨단 기술로 확장 가능한 대화형 웹 애플리케이션을 제작하고 모든 플랫폼에서 원활한 사용자 경험을 제공하는 데 탁월한 성능을 발휘하는 방법을 알아보세요. Adobe의 전문성이 어떻게 디지털 혁신과 비즈니스를 촉진하는지 알아보세요...
In most object-oriented programming languages, the keyword ‘this’ has a special meaning. Usually it refers to the object being the execution context (i.e. to the current instance of the object). For example, we use this when referring to an object property from within: we type this.propertyName, and then the context is the object and this refers to it.
In JavaScript it is more complicated because where this refers to depends not only on how the function is defined but also on the form of calling it.
Take a look how this works depending on invocation place and form.
Used in a global context bound to the global object, like window in a web browser.
this; // window
Used inside of an object method bound to the closest enclosing object. The object is the new context of the this keyword. Note that you should not change function () to ES6 syntax fun: () => this.context because it will change the context.
const obj = {
context: "object",
fun: function() {
return this.context;
}
};
obj.fun(); // object
In this example with a nested object, this still refers to its closest context.
const nestedObj = {
context: "parent",
child: {
context: "child",
fun: function() {
return this.context;
}
}
};
nestedObj.child.fun(); // child
Used inside a function that has no context (has no object as parent) bound to the global context, even if the function is definded inside the object.
Note that we use var context 대신 let/const context because let 그리고 const change the variable enclosed context. var is always closest to the global execution context. let 그리고 const declare variables only in a local block scope.
var context = "global";
const obj = {
context: "object",
funA: function() {
function funB() {
const context = "function";
return this.context;
}
return funB(); // invoked without context
}
};
obj.funA(); // global
Used inside a function that is the constructor of the new object bound to it.
var context = "global";
function Obj() {
this.context = "Obj context";
}
const obj = new Obj();
obj.context; // Obj context
Used inside a function defined on the prototype chain to creating an object bound to it.
const ProtoObj = {
fun: function() {
return this.name;
}
};
const obj = Object.create(ProtoObj);
obj.name = "foo";
obj.fun(); // foo
call() 그리고 apply() are JavaScript functions. With these, an object can use methods belonging to another object. call() takes arguments separately where apply() takes them as an array.
this is here bound to new context changed in call() 그리고 apply() methods.
const objA = {
context: "objA",
fun: function() {
console.log(this.context, arguments);
}
};
const objB = {
context: "objB"
};
objA.fun(1, 2); // objA, [1, 2]
objA.fun.call(objB, 1, 2, 3); // objB, [1, 2, 3]
objA.fun.apply(objB, [1, 2, 3, 4]); // objB, [1, 2, 3, 4]
bind() is also a JavaScript method. It creates a new function that will have this set to the first parameter passed to bind()**.**
const objA = {
context: "objA",
fun: function() {
console.log(this.context, arguments);
}
};
const objB = {
context: "objB"
};
const fun = objA.fun.bind(objB, 1, 2);
fun(3, 4); // objB, [1, 2, 3, 4]
Used in any event handler (for example, addeventListener, onclick, attachEvent), it is bound to the DOM element the event was attached to.
document.querySelector(".foo").addEventListener("click", function() {
this; // refers to the `foo` div element
});
Used inside the arrow function it is always bound to its lexical scope. In the arrow function, you can’t re-assign the this in any way.
const globalArrowFunction = () => this;
globalArrowFunction(); // Window
const obj = {
context: "object",
funA: () => this,
funB: function() {
return () => {
return this.context;
};
}
};
obj.funA(); // Window
obj.funB()(); // object
자세히 읽어보세요: