| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this | [Back] [Original] |
Get to know MDN better
This page was translated from English by the community. Learn more and join the MDN Web Docs community.
This feature is well established and works across many devices and browser versions. Its been available across browsers since 2015 7.
this (: ). , this . .
JavaScript this (binding) . (obj.method()), this . (func()) ( ) undefined( ) . Function.prototype.bind() this , Function.prototype.apply() Function.prototype.call() this .
const test = {
prop: 42,
func: function () {
return this.prop;
},
};
console.log(test.func());
// Expected output: 42
this;
this . . .
this , , .
this . this . , this .
( , ) , this . , obj.f() , this obj . ,
function getThis() {
return this;
}
const obj1 = { name: "obj1" };
const obj2 = { name: "obj2" };
obj1.getThis = getThis;
obj2.getThis = getThis;
console.log(obj1.getThis()); // { name: 'obj1', getThis: [Function: getThis] }
console.log(obj2.getThis()); // { name: 'obj2', getThis: [Function: getThis] }
. this . .
const obj3 = {
__proto__: obj1,
name: "obj3",
};
console.log(obj3.getThis()); // { name: 'obj3' }
this , .
const obj4 = {
name: "obj4",
getThis() {
return this;
},
};
const obj5 = { name: "obj5" };
obj5.getThis = obj4.getThis;
console.log(obj5.getThis()); // { name: 'obj5', getThis: [Function: getThis] }
, this . , .
function getThisStrict() {
"use strict"; //
return this;
}
// , .
Number.prototype.getThisStrict = getThisStrict;
console.log(typeof (1).getThisStrict()); // "number"
, this undefined . , .
console.log(typeof getThisStrict()); // "undefined"
this (this substitution) this .
this undefined null , this globalThis .this , this .function getThis() {
return this;
}
// , .
Number.prototype.getThis = getThis;
console.log(typeof (1).getThis()); // "object"
console.log(getThis() === globalThis); // true
this ((.) ) . Function.prototype.call(), Function.prototype.apply(), Reflect.apply() this . Function.prototype.bind() , this . , this .
, this . API . , this undefined . , , this (globalThis) . , Promise() .
function logThis() {
"use strict";
console.log(this);
}
[1, 2, 3].forEach(logThis); // undefined, undefined, undefined
API this . , Set.prototype.forEach() thisArg this .
[1, 2, 3].forEach(logThis, { name: "obj" });
// { name: 'obj' }, { name: 'obj' }, { name: 'obj' }
undefined this . , JSON.parse() reviver JSON.stringify() replacer this .
this this . , , this .
const globalObject = this;
const foo = () => this;
console.log(foo() === globalObject); // true
this . , " " . , this . ( ) . this . .
, call(), bind(), apply() , thisArg . .
const obj = { name: "obj" };
// call this
console.log(foo.call(obj) === globalObject); // true
// bind this
const boundFoo = foo.bind(obj);
console.log(boundFoo() === globalObject); // true
(new ), this . , . this new , .
function C() {
this.a = 37;
}
let o = new C();
console.log(o.a); // 37
function C2() {
this.a = 37;
return { a: 38 };
}
o = new C2();
console.log(o.a); // 38
(C2), , this . (, this.a = 37; . , .)
super.method() , method this super.method() this . this super . super.method , . super .
. , , (public private) . , , . this .
new , . this . . this . , this .
this . , this ( ) . this .
. this . this . , .
class C {
instanceField = this;
static staticField = this;
}
const c = new C();
console.log(c.instanceField === c); // true
console.log(C.staticField === C); // true
, ( ) this . super() this , . (Base .)
this = new Base();
:
super() this .
super() . , this , .
class Base {}
class Good extends Base {}
class AlsoGood extends Base {
constructor() {
return { a: 5 };
}
}
class Bad extends Base {
constructor() {}
}
new Good();
new AlsoGood();
new Bad(); // ReferenceError: this super .
, this globalThis . . HTML <script> this === window .
:
globalThis . , globalThis . Node.js . , globalThis .
// window
console.log(this === window); // true
this.b = "MDN";
console.log(window.b); // "MDN"
console.log(b); // "MDN"
(HTML <script> type="module" ), this undefined.
eval() , eval this . eval this globalThis ( ).
function test() {
// eval
console.log(eval("this") === this);
// eval,
console.log(eval?.("this") === globalThis);
// eval,
console.log(eval?.("'use strict'; this") === globalThis);
}
test.call({ name: "obj" }); // Logs 3 "true"
, . , Node.js CommonJS , this module.exports . this .
this . () . this , .
const obj = {
a: this,
};
console.log(obj.a === window); // true
this .
// 'call' 'apply'
// this .
const obj = { a: "Custom" };
// var globalThis .
var a = "Global";
function whatsThis() {
return this.a; // this .
}
whatsThis(); // 'Global'; this globalThis .
obj.whatsThis = whatsThis;
obj.whatsThis(); // 'Custom'; this obj .
call() apply() this .
function add(c, d) {
return this.a + this.b + c + d;
}
const o = { a: 1, b: 3 };
// this .
// .
add.call(o, 5, 7); // 16
// this .
// , .
add.apply(o, [10, 20]); // 34
, this , this . null undefined globalThis . , (7, 'foo') . 7 Number 'foo' String .
function bar() {
console.log(Object.prototype.toString.call(this));
}
bar.call(7); // [object Number]
bar.call("foo"); // [object String]
bar.call(undefined); // [object Window]
f.bind(someObject) , f . , this bind .
function f() {
return this.a;
}
const g = f.bind({ a: "azerty" });
console.log(g()); // azerty
const h = g.bind({ a: "yoo" }); // bind !
console.log(h()); // azerty
const o = { a: 37, f, g, h };
console.log(o.a, o.f(), o.g(), o.h()); // 37 37 azerty azerty
this . obj , getThisGetter . this . , this this . getThisGetter this , this . getThisGetter . , , .
const obj = {
getThisGetter() {
const getter = () => this;
return getter;
},
};
getThisGetter obj , this obj . fn . fn , this getThisGetter obj . , this globalThis . getThisGetter .
const fn = obj.getThisGetter();
console.log(fn() === obj); // true
obj . getThisGetter this . fn2()() globalThis . fn2() , this globalThis .
const fn2 = obj.getThisGetter;
console.log(fn2()() === globalThis); // true in non-strict mode
. this , this . , this , this (: ) . setTimeout() .
getter setter this , . , getter setter this .
function sum() {
return this.a + this.b + this.c;
}
var o = {
a: 1,
b: 2,
c: 3,
get average() {
return (this.a + this.b + this.c) / 3;
},
};
Object.defineProperty(o, "sum", {
get: sum,
enumerable: true,
configurable: true,
});
console.log(o.average, o.sum); // 2, 6
, this DOM . (, addEventListener() .)
//
function bluify(e) {
// true
console.log(this === e.currentTarget);
// currentTarget target true
console.log(this === e.target);
this.style.backgroundColor = "#A5D9F3";
}
//
var elements = document.getElementsByTagName("*");
//
// bluify
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", bluify, false);
}
<button >this </button>
button . this .
<button >
this
</button>
, this globalThis . (, this .)
, this . , this . bind .
class Car {
constructor() {
// sayHi , sayBye bind .
this.sayBye = this.sayBye.bind(this);
}
sayHi() {
console.log(`Hello from ${this.name}`);
}
sayBye() {
console.log(`Bye from ${this.name}`);
}
get name() {
return "Ferrari";
}
}
class Bird {
get name() {
return "Tweety";
}
}
const car = new Car();
const bird = new Bird();
// 'this' (caller) .
car.sayHi(); // Hello from Ferrari
bird.sayHi = car.sayHi;
bird.sayHi(); // Hello from Tweety
// bind 'this' .
bird.sayBye = car.sayBye;
bird.sayBye(); // Bye from Ferrari
:
. undefined this , this .
const carSayHi = car.sayHi;
carSayHi(); // TypeError . this undefined, sayHi this.name .
, . , . . Intl.NumberFormat.prototype.format() . , getter , , .
with ( ), this . with , this . obj. .
const obj = {
foo() {
return this;
},
};
with (obj) {
console.log(foo() === obj); // true
}
| Specification |
|---|
| ECMAScript 2027 LanguageSpecification # sec-this-keyword |
This page was last modified on 2026 7 15 by MDN contributors.
Your blueprint for a better internet.
Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.
| Web Proxy Viewer | New URL | Original Page |