从Javascript方法访问调用对象

Question

In JavaScript, for an anonymous function defined inside the object, the this keyword refers to the object itself. However, when the function is defined outside the object scope, this refers to the window object, example:

 function foo() { console.log(this) } let A = { att: foo(), att2: "bla" } A.foo(); 

[EDIT]: I made a mistake in the original code, I meant to call the function as A.att() (and I am obliged to keep att: foo(). My code is basically the following:

 function foo() { console.log(this) } let A = { att: foo(), att2: "bla" } A.att(); 

The output here is object Window, and not the object that I want to access, which is A. And I can't change A, so how can I access A from foo()?

Answer 1

A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode. In most cases, the value of this is determined by how a function is called. It can't be set by assignment during execution, and it may be different each time the function is called.

To manipulate the this object by yourself you can use the JS methods call , apply & bind .

Lets demonstrate each with example:

Function.prototype.call()

Detailed info: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

function foo() {
  console.log(this)
}

var A = {
  att: foo,
  att2: "bla"
}

foo.call(A);

Function.prototype.apply()

Detailed info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

function foo() {
  console.log(this)
}

var A = {
  att: foo,
  att2: "bla"
}

foo.apply(A);

Function.prototype.bind()

Detailed info: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

function foo() {
  console.log(this)
}

var A = {
  att: foo,
  att2: "bla"
}

var x = foo.bind(A);
x();

Answer 2

In JavaScript, for an anonymous function defined inside the object, the this keyword refers to the object itself. However, when the function is defined outside the object scope, this refers to the window object

No. Where the function is defined is irrelevant. It is how a function is called that determines the value of this .

The output here is object Window, and not the object that I want to access, which is A.

That is because you are calling foo() and then assigning the return value to att . this is window because you aren't calling foo() with any context.

Later you call A.foo(); which throws an error because A.foo() is undefined .

Change: att: foo() to att: foo so you assign the function instead of calling it, and change A.foo() to A.att()

 function foo() { console.log(this) } let A = { att: foo, att2: "bla" } A.att(); 

Answer 3

I would say I'm not agree with the answer because the question here is how to get the this (object) from where I'm calling the function, that is actually the Object A. I would prefer to bind the Object function instead to bind the Object directly to the global function. See the example below is binding A as the this object for B. In this situation I would be available to do this with any number of Objects without have to affect the original function.

 function foo() { console.log(this) } let A = { att: foo, att2: "From A" } let B = { att: foo, att2: "From B" } B.att = B.att.bind(A) A.att(); B.att() 

Answer 4

function foo() {
  console.log(this)
}

let A = {
  att: foo(),
  att2: "bla"
}

foo.call(A); //It will return Object A