[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this [Back]  [Original]

this - JavaScript | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

this

Baseline Widely available

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 .

this . this . . this . bind(), apply(), call() this , .

In this article

const test = {
  prop: 42,
  func: function () {
    return this.prop;
  },
};

console.log(test.func());
// Expected output: 42

js
this;

this . . .

this , , .

this . this . , this .

( , ) , this . , obj.f() , this obj . ,

js
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 . .

this , . .

js
const obj3 = {
  __proto__: obj1,
  name: "obj3",
};

console.log(obj3.getThis()); // { name: 'obj3' }

this , .

js
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 . , .

js
function getThisStrict() {
  "use strict"; //  
  return this;
}

//     ,    .
Number.prototype.getThisStrict = getThisStrict;
console.log(typeof (1).getThisStrict()); // "number"

, this undefined . , .

js
console.log(typeof getThisStrict()); // "undefined"

this (this substitution) this .

  • this undefined null , this globalThis .
  • this , this .
js
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() .

js
function logThis() {
  "use strict";
  console.log(this);
}

[1, 2, 3].forEach(logThis); // undefined, undefined, undefined

API this . , Set.prototype.forEach() thisArg this .

js
[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 .

, , this globalThis .

js
const globalObject = this;
const foo = () => this;
console.log(foo() === globalObject); // true

this . , " " . , this . ( ) . this . .

, call(), bind(), apply() , thisArg . .

js
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 , .

js
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

super.method() , method this super.method() this . this super . super.method , . super .

. , , (public private) . , , . this .

new , . this . . this . , this .

this . , this ( ) . this .

. this . this . , .

js
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 .)

js
this = new Base();

: super() this .

super() . , this , .

js
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 . , this () .

, this globalThis . . HTML <script> this === window .

: globalThis . , globalThis . Node.js . , globalThis .

js
//   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 ( ).

js
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 , .

js
const obj = {
  a: this,
};

console.log(obj.a === window); // true

this

this .

js
// '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 .

js
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 , this . null undefined globalThis . , (7, 'foo') . 7 Number 'foo' String .

js
function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7); // [object Number]
bar.call("foo"); // [object String]
bar.call(undefined); // [object Window]

bind()

f.bind(someObject) , f . , this bind .

js
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

this . obj , getThisGetter . this . , this this . getThisGetter this , this . getThisGetter . , , .

js
const obj = {
  getThisGetter() {
    const getter = () => this;
    return getter;
  },
};

getThisGetter obj , this obj . fn . fn , this getThisGetter obj . , this globalThis . getThisGetter .

js
const fn = obj.getThisGetter();
console.log(fn() === obj); // true

obj . getThisGetter this . fn2()() globalThis . fn2() , this globalThis .

js
const fn2 = obj.getThisGetter;
console.log(fn2()() === globalThis); // true in non-strict mode

. this , this . , this , this (: ) . setTimeout() .

getter setter this

getter setter this , . , getter setter this .

js
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

DOM this

, this DOM . (, addEventListener() .)

js
//      
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);
}

this

, this DOM .

html
<button >this </button>

button . this .

html
<button >
   this 
</button>

, this globalThis . (, this .)

, this . , this . bind .

js
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 .

js
const carSayHi = car.sayHi;
carSayHi(); // TypeError .  this undefined, sayHi  this.name   .

, . , . . Intl.NumberFormat.prototype.format() . , getter , , .

with this

with ( ), this . with , this . obj. .

js
const obj = {
  foo() {
    return this;
  },
};

with (obj) {
  console.log(foo() === obj); // true
}

Specification
ECMAScript 2027 LanguageSpecification
# sec-this-keyword


Web Proxy Viewer  |  New URL  |  Original Page