this refers to a object that is set at the creation of a new execution context.
JavaScript
function whatIsThis() {
console.log(this);
}
// function is called on the global scope so
// this is set to the global object
whatIsThis();
// Window {}
To find the value of this you have to figure out where the code is being executed.
whatIsThis() is executed on the global scope so this is set to the window object.
If a function is called as a method of an object this is bounded to the object the method is called on.
JavaScript
const person = {
firstName: 'Brian',
greet: function () {
console.log('hi, ' + this.firstName);
}
}
person.greet();
// hi, Brian
The greet function is called on the person object so this is bounded to the person object.
this only cares about where it is executed.
note: this works differently in arrow functions we will check it out later
JavaScript
const person = {
firstName: 'Brian',
lastName: 'Munoz',
greet: function () {
console.log(this);
console.log('hi, ' + this.firstName);
}
}
const greetFunction = person.greet;
greetFunction();
// Window {}
// hi, undefined
The greet function is now being called on the global scope this is set to the window object.
You can reassign this by using bind(), apply() or call(). These methods can be used to called a object functions on a different object.
JavaScript
const person = {
firstName: 'Brian',
whatIsThis: function() {
console.log(this);
},
greet: function (greeting) {
console.log(greeting + ' ' + this.firstName);
}
}
person.whatIsThis();
// person object
person.greet('hi');
// hi Brian
const student = {
firstName: 'Joe'
}
// returns a function with this bounded and arguments set
const greetStudent = person.greet.bind(student, 'hi');
greetStudent();
// hi Joe
// call and apply immediate runs the function
person.greet.call(student, 'hi')
// hi Joe
// apply could be used when you
// don't know how many parameters
// will be passed into the function
let argumentsArray = ['hi']
person.greet.apply(student, argumentsArray)
// hi Joe
a quicker way to write a function.
JavaScript
// regular way to define a function
function () {
console.log('hi');
}
// arrow function
() => {
console.log('hi')
}
// the shortest way to define an arrow function
// it returns the value
const name = () => 'Brian';
console.log(name());
// Brian
this is bounded to the lexical scope instead of where it is invoked on.
JavaScript
const person = {
firstName: 'Jane',
lastName: 'Doe',
greet: () => {
console.log(this);
console.log('hi, ' + this.firstName);
}
}
person.greet();
// Window {}
// hi, undefined
The greet function is created in the person object which is defined on the global scope.
this is the window object because it is defined on the global execution.
A way to make this bounded to the person object is to defined it inside a function.
JavaScript
const person = {
firstName: 'Jane',
lastName: 'Doe',
greet: function () {
return () => {
console.log(this);
console.log('hi, ' + this.firstName);
}
}
}
let greetPerson = person.greet();
greetPerson();
// person object
// hi, Jane
An explanation of lexical scoping.
JavaScript
let favoriteFruit = 'orange';
function theBestFruit () {
let favoriteFruit = 'apple';
}
theBestFruit();
console.log(favoriteFruit);
// orange
orange is logged because it is on the global scope.
we do not have access to the favoriteFruit variable defined in theBestFruit() because it is inside a function.
JavaScript
let favoriteFruit = 'orange';
function theBestFruit () {
let favoriteFruit = 'apple';
console.log(favoriteFruit);
}
theBestFruit();
// apple
apple was logged because it is the variable closes to where console.log was executed.
lexical scoping determines how variables are found.
JavaScript is synchronous and single-threaded with capability to do asynchronous calls.
find() finds an element in an array.