This question already has answers here:
How does the "this" keyword in Javascript act within an object literal? [duplicate]
(4 answers)
What is the 'new' keyword in JavaScript?
(17 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 19 days ago.
Doesn't object have this?
enter image description here
1.
function fun(){
console.log(this); //window
return{
ref:this,
ref2:function(){console.log(this)},
ref3:{c:this},
}
};
var obj = {ref4:this};
var v = fun();
console.log(v.ref); //window
v.ref2(); //object
console.log(v.ref3.c); //window
console.log(obj.ref4); //window
function fun(){
console.log(this); //object
return{
ref:this,
ref2:function(){console.log(this)},
ref3:{c:this},
}
};
var obj = {ref4:this};
var v = new fun();
console.log(v.ref); //object
v.ref2(); //object
console.log(v.ref3.c); //object
console.log(obj.ref4); //window
I know that the second one is a constructor.
What I'm curious about is, this in ref, ref3, obj.ref4
Object (except for methods and functions) does not have this
is correct.
Related
This question already has answers here:
arrow function and this
(2 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 21 days ago.
This code keeps the context in window:
const a = function () {
console.log(this);} //window
And this code changes the context to a2:
const a3 = {
anyFunction: () => { console.log(this) } // window
}
a3.anyFunction();
Why this code keeps the context in window? how does the call stack works with anonymous functions that makes the context stay the same as if the function was not in the context of a4?
const a4 = {
anyFunction: () => console.log(this) // window
}
a4.anyFunction();
This question already has answers here:
How do JavaScript closures work?
(86 answers)
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 5 years ago.
I don't understand why this.name isn't the same as obj.name, basically why in this case this refers to the window object and not the obj object. In the code below, this.name is instantiated after obj.name..
function createNewPerson(name) {
var obj = {};
obj.name = name;
alert(this.name);
return obj;
}
Per MDN:
Inside a function, the value of this depends on how the function is
called. Since the following code is not in strict mode, and because
the value of this is not set by the call, this will default to the
global object , which is window in a browser.
So in your case you have this as the Window object, not the obj. You may get the obj context inside your function via binding it manually, for example:
function createNewPerson(name) {
console.log(this.name); // Hello
console.log(name); // World
}
var obj = {};
obj.name = 'Hello';
var salva = createNewPerson.apply(obj, ['World']);
But what you really need, as I can understand, is a function cunstructor and instantiating an object via new operator:
function createNewPerson(name) {
this.name = name;
}
var salva = new createNewPerson('Salva');
console.log(salva.name); // Salva
This question already has answers here:
Methods in ES6 objects: using arrow functions
(6 answers)
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 5 years ago.
Let's say there is a Person:
const Person = function(fname, lname) {
this.fname = fname;
this.lname = lname;
};
And I want to extend its functionality with a "name" getter
Object.defineProperty(Person.prototype, 'name', {
get: () => `${this.fname} ${this.lname}`
});
However, this does not work. The this in the getter is not the instance prototype on which it is called:
const p = new Person('Taylor', 'Swift');
p.name // "undefined undefined"
Rather it is the scope of the property definition:
fname = 'Someone';
lname = 'Else';
p.name // "Someone Else"
In the process of writing this question, the answer was obvious. Still posting in case it helps someone else.
Getter properties are indeed bound to their host object.
The issue is that I was using an arrow function for the getter. The arrow function does not have its own this, instead using the this value of the enclosing execution context.
This means the binding done for getter properties has no effect.
For example:
const foo = () => this.document;
foo() // global document object
foo.call({document: 'na'}) // still global document object
const bar = foo.bind({document: 'na'});
bar(); // still global document object
This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 6 years ago.
var obj = {
name: 'hello',
getName: function(){
return () => {return this.name; }
}
}
var name = 'world';
var nameFunc = obj.getName();
console.log(nameFunc())
And the result is "hello",not "world".
I am a little confused.
Arrow functions are "born" bound to the value of this as it was at the time of their creation. When you make your call to getName():
var nameFunc = obj.getName();
then inside getName() the value of this is a reference to obj. Your return statement constructs the arrow function, and that function is therefore bound to obj. It's as if you'd written:
getName: function() {
return function() {
return this.name;
}.bind(this);
}
That's just the way arrow functions work, and yes it's different from regular functions.
This question already has answers here:
using key value pair of same object inside itself with 'this' in javascript
(3 answers)
Closed 7 years ago.
var foo = {
this.bar = function(){},
this.baz = new this.bar()
}
This won't work. I want foo.baz to be a foo.baz. How do I do it?
foo is an object literal, not an instance, so you can't use the "this" keyword in it (or semicolons, etc.)
Change your code to:
var foo = function() {
this.bar = function(){},
this.baz = new this.bar()
}
new foo();
Or:
var foo = {
bar: function() {}
}
foo.baz = new foo.bar()