{"id":9293,"date":"2012-12-20T12:49:21","date_gmt":"2012-12-20T07:19:21","guid":{"rendered":"https:\/\/2thenew.xyz\/blog\/?p=9293"},"modified":"2016-12-19T15:30:59","modified_gmt":"2016-12-19T10:00:59","slug":"this-keyword-in-javascript","status":"publish","type":"post","link":"https:\/\/2thenew.xyz\/blog\/this-keyword-in-javascript\/","title":{"rendered":"“this” keyword in JavaScript"},"content":{"rendered":"

There are four patterns of invocation in JavaScript<\/strong>:
\n1. The method invocation<\/strong> pattern.
\n2. The function invocation <\/strong>pattern.
\n3. The constructor invocation<\/strong> pattern.
\n4. The apply invocation<\/strong> pattern.<\/p>\n

\n

1. The Method Invocation Pattern:<\/strong>
\nWhen a function is stored as a property of an object, we call it a method. When a method is invoked, this<\/strong> is bound to that object.
\n[js]
\nvar employee = {
\n\tsalary: 25000,
\n\tincreaseSalary: function(inc) {
\n\t\tthis.salary += inc || 5000;
\n\t}
\n};
\nemployee.increaseSalary();
\ndocument.writeln(employee.salary);
\n[\/js]<\/p>\n

\n

2. The Function invocation Pattern:<\/strong>
\nWhen a function is not the property of an object, this<\/strong> is bound to the global object<\/strong>.
\n[js]
\nemployee.setBonus = function () {
\n\tvar that = this;
\n\tvar countBonus = function (inc) {
\n\t\tthat.salary += inc || that.salary*0.5;
\n\t};
\n\tcountBonus();
\n};
\nemployee.setBonus();
\ndocument.writeln(employee.salary);
\n[\/js]<\/p>\n

\n

3. The Constructor Invocation Pattern:<\/strong>
\nIf a function is invoked with a new prefix, then a new object will be created with a hidden link to the value of the function\u2019s prototype member, and this<\/strong> will be bound to that new object. If the function was invoked with the new prefix and the return value is not an object, then this<\/strong> (the new object) is returned instead.
\n[js]
\nvar Person = function (name) {
\n\tthis.name = name;
\n\tthis.getName = function () {
\n\t\treturn this.name;
\n\t};
\n};
\nvar newPerson = new Person(“Amit Thakkar”); \/\/ this will refer to newly created Object.
\ndocument.writeln(newPerson.getName()); \/\/ Amit Thakkar
\n[\/js]<\/p>\n

\n

4. The Apply Invocation Pattern:<\/strong>
\nThe apply<\/strong> method takes two parameters. The first is the value that should be bound to this<\/strong>. The second is an array of parameters.
\n[js]
\nvar vigil = {
\n\tname:”Vigil”
\n};
\ndocument.writeln(newPerson.getName.apply(vigil)); \/\/ Vigil
\n[\/js]
\nHere this<\/strong> is referring to vigil object and there will not be any run-time error even when the number of arguments and the number of parameters do not match. If there are too many argument values, the extra argument values will be ignored. If there are too less argument values, the undefined value will be substituted for the missing values. So here second parameter will be undefined.<\/p>\n

Amit Kumar
\namit.kumar@intelligrape.com<\/a>
\nin.linkedin.com\/in\/amitkumar0110
\ntwitter.com\/amit_kumar0110
\nMore Blogs by Me<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

There are four patterns of invocation in JavaScript: 1. The method invocation pattern. 2. The function invocation pattern. 3. The constructor invocation pattern. 4. The apply invocation pattern. 1. The Method Invocation Pattern: When a function is stored as a property of an object, we call it a method. When a method is invoked, this […]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":5,"footnotes":""},"categories":[1],"tags":[1121,55,1120],"class_list":["post-9293","post","type-post","status-publish","format-standard","hentry","category-technology","tag-function","tag-javascript","tag-this"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t