1.Basically 'this' always refers to an object, and that
object is typically the one in which the current code is running.
2.Sometimes the object can be changed.
1.Using 'this' keyword will have different values based on in which context your code is executing.
2.In a method inside of object : 'this' refers to the owner object.
3.In a function or outside of any function. 'this' refers to the global object.
4.In an event,it's the element that received the event.
5.call()/apply() methods refers to object passed in.
6.'use strict' also affects 'this'.
'this' in Global and Function scope :
ex : without using 'use strict'
// Global scope - 'this' is mapped to global/window object
console.log("Begin: global scope sample");
console.log(this.toString()); // [object Window]
console.log("this === window = " + (this === window).toString()); // this === window = true
console.log("End: global scope sample");
// Function scope - 'this' is mapped to global/window object
// Uncomment 'use strict' above to show how it affects this function
function functionScope() {
console.log(this.toString()); // [object Window]
console.log("this === window = " + (this === window).toString()); // this === window = true
}
ex : with using 'use strict'
'use strict'
// Global scope - 'this' is mapped to global/window object
console.log("Begin: global scope sample");
console.log(this.toString()); // [object Window]
console.log("this === window = " + (this === window).toString()); // this === window = true
console.log("End: global scope sample");
// Function scope - 'this' is mapped to global/window object
// Uncomment 'use strict' above to show how it affects this function
function functionScope() {
console.log(this.toString()); // Cannot read property 'toString' of undefined
console.log("this === window = " + (this === window).toString());
}
Note :
If you want to get at the global window object when 'use strict' is in effect,
use : console.log(window.toString());
'this' in Event Handlers :
'this' in the context of an event handler always refers to the HTML element to which it's attached.
ex :
<button onclick="eventHandler(this)">
Pass to function from event handler
</button>
// Pass 'this' to function from event handler
function eventHandler(ctl) {
console.log(ctl.toString()); // [ object HTMLButtonElement]
}
'this' in an Object literal :
'this' inside of an object literal always refers to the properties or a method inside of that object literal.
ex :
// Object literal
function objectLiteral() {
let product = {
"productID": 680,
"name": "HL Road Frame - Black, 58",
"standardCost": 1059.31,
"listPrice": 1431.50,
grossProfit: function () {
return (this.listPrice - this.standardCost)
.toLocaleString('en-US', {
style: 'currency', currency: 'USD'
});
}
};
console.log(product.grossProfit()); // $372.19
}
'this' with call() and apply() methods :
ex :
function callAndApply() {
let product = {
"productID": 680,
"name": "HL Road Frame - Black, 58",
"standardCost": 1059.31,
"listPrice": 1431.50,
grossProfit: function () {
return (this.listPrice - this.standardCost)
.toLocaleString("en-US", {
"style": "currency", "currency": "USD"
});
}
};
let prod2 = {
"standardCost": 500,
"listPrice": 850
}
// Call using reference to 'product' properties
console.log(product.grossProfit.call(product)); // $372.19
// Call using reference to 'prod2' properties
console.log(product.grossProfit.call(prod2)); // $350.00
console.log("");
console.log(product.grossProfit.apply(product)); // $372.19
console.log(product.grossProfit.apply(prod2)); // $350.00
}
Note : The call() method takes arguments separately.
The apply() method takes arguments as an array.
A useful mnemonic is " A for array and C for comma".
syntax :
theFunction.apply(valueForThis, arrayOfArgs)
theFunction.call(valueForThis, arg1, arg2, ...)
'this' in constructor Functions :
ex :
function Product(id, name, cost, price) {
this.productID = id;
this.name = name;
this.standardCost = cost;
this.listPrice = price;
this.grossProfit = function () {
return (this.listPrice - this.standardCost)
.toLocaleString("en-US", {
"style": "currency", "currency": "USD"
});
}
}
let prod1 = new Product(680, "HL Road Frame - Black, 58", 1059.31, 1431.50);
let prod2 = new Product(707, "Sport-100 Helmet, Red", 13.08, 34.99);
console.log(prod1.grossProfit()); //$372.19
console.log(prod2.grossProfit()); // $21.91
Note : we're referencing the different objects, and 'this' then takes on the properties of that object.
Summary :
Scope determines value of 'this'
-> Global object
-> HTML element
-> Method owner
'use strict' makes 'this' undefined in functions.
what is passed to call()/apply() methods becomes 'this'.
constructor functions owner is 'this'
No comments:
Post a Comment