SlideShare a Scribd company logo
Master this
By Barak Drechsler
First things first…
functions it all about
functions
JS functions
• Functions are objects!
• All functions are linked to the Function.prototype
• all function receives a property called prototype which is an object.
• when invoked, functions receive 2 special variables: this, arguments
This
`this` keyword is a special variable,
It evaluated each time a function is executed, based on how the function have
been invoked.
This Evaluation
JS have 4 invocation (execution) patterns,
which allow you to execute a function.
The way a function have been invoked, will
define it ‘this’ evaluation.
• Function Invocation Pattern
• Method Invocation Pattern
• Apply Invocation Pattern
• Constructor Invocation Pattern
2 exceptions!
Bound function (via bind)
And es6 arrow functions
Let’s take a look at this
function add(num){
this.count += num;
}
Function Invocation
Applies when a function is called via simple
parenthesis call.
‘this’ - evaluation will depend on the js
mode.
Normal: ‘this’ - will be the global window
object.
Strict Mode: ‘this’ - will be the undefined.
add(1);
Method Invocation
Applies when a method is executed via an
object.
‘this’ - will be the invoking object.
var counter = { count : 0, add: add }
counter.add(1);
Apply Invocation
Applies when a function is executed via the
apply or call methods.
‘this’ - will evaluated, based on the given
parameter to the apply/call call.
Apply: (this, [ param1, param2, ... ] )
Call: (this, param1,param2, ….)
var counter = { count : 0 }
add.call(counter, 1); // output 1
add.apply(counter, [1]) // output 1
add.call({ count: 10}, 1) // output 11
Constructor Invocation
Applies when a function executed with the
new operator.
‘this’ - will be a new created object, that will
be returned by the function.
The new keyword is doing quite a few
things, and will not be in the scope of this
lecture.
new add(1); // output NaN
Bound function
We can create bound functions, via the
bind method.
Bound functions have a fixed `this` that is
defined once, and it won’t be affected by
any invocation pattern.
This can be very useful when we want to
pass a function, and keep our context.
var boundAdd = add.bind({ count: 5});
var counter = { count: 0, add: boundAdd };
boundAdd(1); // 6
counter.add(1); // 7
ES 6 Arrow Functions
Arrow function keeps a lexical this,
meaning they do not receive a new this for
themselves, but they are always using the
this given from the enclosing context, also,
arrow functions do not receive arguments
object.
var count = 10;
var add = (num) => this.count + num;
add(1); // 11
add.call({ count: 0 }, 1) // 11
Let's play
This Playground

More Related Content

What's hot

React js use contexts and useContext hook
React js use contexts and useContext hookReact js use contexts and useContext hook
React js use contexts and useContext hook
Piyush Jamwal
 
Function Parameters
Function ParametersFunction Parameters
Function Parameters
primeteacher32
 
React hooks
React hooksReact hooks
React hooks
Sadhna Rana
 
AngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and JasmineAngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and Jasmine
foxp2code
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
Maulik Shah
 
Creating custom transformer
Creating custom transformerCreating custom transformer
Creating custom transformer
Rahul Kumar
 
Martin Anderson - threads v actors
Martin Anderson - threads v actorsMartin Anderson - threads v actors
Martin Anderson - threads v actors
bloodredsun
 
Intro to Unit Testing in AngularJS
Intro to Unit Testing in AngularJSIntro to Unit Testing in AngularJS
Intro to Unit Testing in AngularJS
Jim Lynch
 
Functions
FunctionsFunctions
Functions
primeteacher32
 
Test-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsTest-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS Applications
FITC
 
Command Design Pattern
Command Design Pattern Command Design Pattern
Command Design Pattern
anil kanzariya
 
Function Returns
Function ReturnsFunction Returns
Function Returns
primeteacher32
 
AngularJS Unit Testing
AngularJS Unit TestingAngularJS Unit Testing
AngularJS Unit Testing
Prince Norin
 
Jquery- One slide completing all JQuery
Jquery- One slide completing all JQueryJquery- One slide completing all JQuery
Jquery- One slide completing all JQuery
Knoldus Inc.
 
Hello, React Hooks!
Hello, React Hooks!Hello, React Hooks!
Hello, React Hooks!
Heejong Ahn
 
iOS testing
iOS testingiOS testing
iOS testing
Tomasz Janeczko
 
Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...
Samyak Bhalerao
 
Lecture: MetaLinks
Lecture: MetaLinksLecture: MetaLinks
Lecture: MetaLinks
Marcus Denker
 
React hooks
React hooksReact hooks
React hooks
Ramy ElBasyouni
 
Krazykoder struts2 interceptors
Krazykoder struts2 interceptorsKrazykoder struts2 interceptors
Krazykoder struts2 interceptors
Krazy Koder
 

What's hot (20)

React js use contexts and useContext hook
React js use contexts and useContext hookReact js use contexts and useContext hook
React js use contexts and useContext hook
 
Function Parameters
Function ParametersFunction Parameters
Function Parameters
 
React hooks
React hooksReact hooks
React hooks
 
AngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and JasmineAngularJS Unit Testing w/Karma and Jasmine
AngularJS Unit Testing w/Karma and Jasmine
 
Understanding react hooks
Understanding react hooksUnderstanding react hooks
Understanding react hooks
 
Creating custom transformer
Creating custom transformerCreating custom transformer
Creating custom transformer
 
Martin Anderson - threads v actors
Martin Anderson - threads v actorsMartin Anderson - threads v actors
Martin Anderson - threads v actors
 
Intro to Unit Testing in AngularJS
Intro to Unit Testing in AngularJSIntro to Unit Testing in AngularJS
Intro to Unit Testing in AngularJS
 
Functions
FunctionsFunctions
Functions
 
Test-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS ApplicationsTest-Driven Development of AngularJS Applications
Test-Driven Development of AngularJS Applications
 
Command Design Pattern
Command Design Pattern Command Design Pattern
Command Design Pattern
 
Function Returns
Function ReturnsFunction Returns
Function Returns
 
AngularJS Unit Testing
AngularJS Unit TestingAngularJS Unit Testing
AngularJS Unit Testing
 
Jquery- One slide completing all JQuery
Jquery- One slide completing all JQueryJquery- One slide completing all JQuery
Jquery- One slide completing all JQuery
 
Hello, React Hooks!
Hello, React Hooks!Hello, React Hooks!
Hello, React Hooks!
 
iOS testing
iOS testingiOS testing
iOS testing
 
Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...Unit testing of java script and angularjs application using Karma Jasmine Fra...
Unit testing of java script and angularjs application using Karma Jasmine Fra...
 
Lecture: MetaLinks
Lecture: MetaLinksLecture: MetaLinks
Lecture: MetaLinks
 
React hooks
React hooksReact hooks
React hooks
 
Krazykoder struts2 interceptors
Krazykoder struts2 interceptorsKrazykoder struts2 interceptors
Krazykoder struts2 interceptors
 

Similar to Javascript: master this

java script functions, classes
java script functions, classesjava script functions, classes
java script functions, classes
Vijay Kalyan
 
Js
JsJs
predefined and user defined functions
predefined and user defined functionspredefined and user defined functions
predefined and user defined functions
Swapnil Yadav
 
Patterns in JavaScript
Patterns in JavaScriptPatterns in JavaScript
Patterns in JavaScript
Dhananjay Kumar
 
Presenter deck icenium hol
Presenter deck   icenium holPresenter deck   icenium hol
Presenter deck icenium hol
Dhananjay Kumar
 
Object oriented java script
Object oriented java scriptObject oriented java script
Object oriented java script
vivek p s
 
Exciting JavaScript - Part I
Exciting JavaScript - Part IExciting JavaScript - Part I
Exciting JavaScript - Part I
Eugene Lazutkin
 
JavaScript for real men
JavaScript for real menJavaScript for real men
JavaScript for real men
Ivano Malavolta
 
6976.ppt
6976.ppt6976.ppt
Advance JS and oop
Advance JS and oopAdvance JS and oop
Advance JS and oop
Abuzer Firdousi
 
Describe's Full of It's
Describe's Full of It'sDescribe's Full of It's
Describe's Full of It's
Jim Lynch
 
1669958779195.pdf
1669958779195.pdf1669958779195.pdf
1669958779195.pdf
venud11
 
Chapter 1. Functions in C++.pdf
Chapter 1.  Functions in C++.pdfChapter 1.  Functions in C++.pdf
Chapter 1. Functions in C++.pdf
TeshaleSiyum
 
Chapter_1.__Functions_in_C++[1].pdf
Chapter_1.__Functions_in_C++[1].pdfChapter_1.__Functions_in_C++[1].pdf
Chapter_1.__Functions_in_C++[1].pdf
TeshaleSiyum
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
Keith Bloomfield
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
Troy Miles
 
Javascript tdd byandreapaciolla
Javascript tdd byandreapaciollaJavascript tdd byandreapaciolla
Javascript tdd byandreapaciolla
Andrea Paciolla
 
Easy mock
Easy mockEasy mock
Easy mock
Srikrishna k
 
Safe Wrappers and Sane Policies for Self Protecting JavaScript
Safe Wrappers and Sane Policies for Self Protecting JavaScript�Safe Wrappers and Sane Policies for Self Protecting JavaScript�
Safe Wrappers and Sane Policies for Self Protecting JavaScript
Phú Phùng
 
Enjoy Munit with Mule
Enjoy Munit with MuleEnjoy Munit with Mule
Enjoy Munit with Mule
Bui Kiet
 

Similar to Javascript: master this (20)

java script functions, classes
java script functions, classesjava script functions, classes
java script functions, classes
 
Js
JsJs
Js
 
predefined and user defined functions
predefined and user defined functionspredefined and user defined functions
predefined and user defined functions
 
Patterns in JavaScript
Patterns in JavaScriptPatterns in JavaScript
Patterns in JavaScript
 
Presenter deck icenium hol
Presenter deck   icenium holPresenter deck   icenium hol
Presenter deck icenium hol
 
Object oriented java script
Object oriented java scriptObject oriented java script
Object oriented java script
 
Exciting JavaScript - Part I
Exciting JavaScript - Part IExciting JavaScript - Part I
Exciting JavaScript - Part I
 
JavaScript for real men
JavaScript for real menJavaScript for real men
JavaScript for real men
 
6976.ppt
6976.ppt6976.ppt
6976.ppt
 
Advance JS and oop
Advance JS and oopAdvance JS and oop
Advance JS and oop
 
Describe's Full of It's
Describe's Full of It'sDescribe's Full of It's
Describe's Full of It's
 
1669958779195.pdf
1669958779195.pdf1669958779195.pdf
1669958779195.pdf
 
Chapter 1. Functions in C++.pdf
Chapter 1.  Functions in C++.pdfChapter 1.  Functions in C++.pdf
Chapter 1. Functions in C++.pdf
 
Chapter_1.__Functions_in_C++[1].pdf
Chapter_1.__Functions_in_C++[1].pdfChapter_1.__Functions_in_C++[1].pdf
Chapter_1.__Functions_in_C++[1].pdf
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 
Javascript tdd byandreapaciolla
Javascript tdd byandreapaciollaJavascript tdd byandreapaciolla
Javascript tdd byandreapaciolla
 
Easy mock
Easy mockEasy mock
Easy mock
 
Safe Wrappers and Sane Policies for Self Protecting JavaScript
Safe Wrappers and Sane Policies for Self Protecting JavaScript�Safe Wrappers and Sane Policies for Self Protecting JavaScript�
Safe Wrappers and Sane Policies for Self Protecting JavaScript
 
Enjoy Munit with Mule
Enjoy Munit with MuleEnjoy Munit with Mule
Enjoy Munit with Mule
 

More from Barak Drechsler

Stay lazy, use lerna
Stay lazy, use lernaStay lazy, use lerna
Stay lazy, use lerna
Barak Drechsler
 
Atomic javascript
Atomic javascriptAtomic javascript
Atomic javascript
Barak Drechsler
 
Room service (worker) please!
Room service (worker) please!Room service (worker) please!
Room service (worker) please!
Barak Drechsler
 
From MVC to Component Based Architecture
From MVC to Component Based ArchitectureFrom MVC to Component Based Architecture
From MVC to Component Based Architecture
Barak Drechsler
 
Fundamentals of Browser Rendering Css Overview PT 2
Fundamentals of Browser Rendering Css Overview PT 2Fundamentals of Browser Rendering Css Overview PT 2
Fundamentals of Browser Rendering Css Overview PT 2
Barak Drechsler
 
Fundamentals of Browser Rendering Css Overview PT 1
Fundamentals of Browser Rendering Css Overview PT 1Fundamentals of Browser Rendering Css Overview PT 1
Fundamentals of Browser Rendering Css Overview PT 1
Barak Drechsler
 
Js: master prototypes
Js: master prototypesJs: master prototypes
Js: master prototypes
Barak Drechsler
 
Understanding the flex layout
Understanding the flex layoutUnderstanding the flex layout
Understanding the flex layout
Barak Drechsler
 

More from Barak Drechsler (8)

Stay lazy, use lerna
Stay lazy, use lernaStay lazy, use lerna
Stay lazy, use lerna
 
Atomic javascript
Atomic javascriptAtomic javascript
Atomic javascript
 
Room service (worker) please!
Room service (worker) please!Room service (worker) please!
Room service (worker) please!
 
From MVC to Component Based Architecture
From MVC to Component Based ArchitectureFrom MVC to Component Based Architecture
From MVC to Component Based Architecture
 
Fundamentals of Browser Rendering Css Overview PT 2
Fundamentals of Browser Rendering Css Overview PT 2Fundamentals of Browser Rendering Css Overview PT 2
Fundamentals of Browser Rendering Css Overview PT 2
 
Fundamentals of Browser Rendering Css Overview PT 1
Fundamentals of Browser Rendering Css Overview PT 1Fundamentals of Browser Rendering Css Overview PT 1
Fundamentals of Browser Rendering Css Overview PT 1
 
Js: master prototypes
Js: master prototypesJs: master prototypes
Js: master prototypes
 
Understanding the flex layout
Understanding the flex layoutUnderstanding the flex layout
Understanding the flex layout
 

Recently uploaded

假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
cuobya
 
Azure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdfAzure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdf
AanSulistiyo
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
ysasp1
 
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
cuobya
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
xjq03c34
 
Explore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories SecretlyExplore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories Secretly
Trending Blogers
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
uehowe
 
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfMeet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Florence Consulting
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
wolfsoftcompanyco
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
uehowe
 
Search Result Showing My Post is Now Buried
Search Result Showing My Post is Now BuriedSearch Result Showing My Post is Now Buried
Search Result Showing My Post is Now Buried
Trish Parr
 
Understanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdfUnderstanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdf
SEO Article Boost
 
[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024
hackersuli
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
davidjhones387
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
uehowe
 
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
zyfovom
 
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
ukwwuq
 
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
bseovas
 
7 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 20247 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 2024
Danica Gill
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 

Recently uploaded (20)

假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
 
Azure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdfAzure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdf
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
 
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
 
Explore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories SecretlyExplore-Insanony: Watch Instagram Stories Secretly
Explore-Insanony: Watch Instagram Stories Secretly
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
 
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfMeet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdf
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
 
Search Result Showing My Post is Now Buried
Search Result Showing My Post is Now BuriedSearch Result Showing My Post is Now Buried
Search Result Showing My Post is Now Buried
 
Understanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdfUnderstanding User Behavior with Google Analytics.pdf
Understanding User Behavior with Google Analytics.pdf
 
[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024[HUN][hackersuli] Red Teaming alapok 2024
[HUN][hackersuli] Red Teaming alapok 2024
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
 
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
 
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
 
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
 
7 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 20247 Best Cloud Hosting Services to Try Out in 2024
7 Best Cloud Hosting Services to Try Out in 2024
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 

Javascript: master this

  • 2. First things first… functions it all about functions
  • 3. JS functions • Functions are objects! • All functions are linked to the Function.prototype • all function receives a property called prototype which is an object. • when invoked, functions receive 2 special variables: this, arguments
  • 4. This `this` keyword is a special variable, It evaluated each time a function is executed, based on how the function have been invoked.
  • 5. This Evaluation JS have 4 invocation (execution) patterns, which allow you to execute a function. The way a function have been invoked, will define it ‘this’ evaluation. • Function Invocation Pattern • Method Invocation Pattern • Apply Invocation Pattern • Constructor Invocation Pattern 2 exceptions! Bound function (via bind) And es6 arrow functions
  • 6. Let’s take a look at this function add(num){ this.count += num; }
  • 7. Function Invocation Applies when a function is called via simple parenthesis call. ‘this’ - evaluation will depend on the js mode. Normal: ‘this’ - will be the global window object. Strict Mode: ‘this’ - will be the undefined. add(1);
  • 8. Method Invocation Applies when a method is executed via an object. ‘this’ - will be the invoking object. var counter = { count : 0, add: add } counter.add(1);
  • 9. Apply Invocation Applies when a function is executed via the apply or call methods. ‘this’ - will evaluated, based on the given parameter to the apply/call call. Apply: (this, [ param1, param2, ... ] ) Call: (this, param1,param2, ….) var counter = { count : 0 } add.call(counter, 1); // output 1 add.apply(counter, [1]) // output 1 add.call({ count: 10}, 1) // output 11
  • 10. Constructor Invocation Applies when a function executed with the new operator. ‘this’ - will be a new created object, that will be returned by the function. The new keyword is doing quite a few things, and will not be in the scope of this lecture. new add(1); // output NaN
  • 11. Bound function We can create bound functions, via the bind method. Bound functions have a fixed `this` that is defined once, and it won’t be affected by any invocation pattern. This can be very useful when we want to pass a function, and keep our context. var boundAdd = add.bind({ count: 5}); var counter = { count: 0, add: boundAdd }; boundAdd(1); // 6 counter.add(1); // 7
  • 12. ES 6 Arrow Functions Arrow function keeps a lexical this, meaning they do not receive a new this for themselves, but they are always using the this given from the enclosing context, also, arrow functions do not receive arguments object. var count = 10; var add = (num) => this.count + num; add(1); // 11 add.call({ count: 0 }, 1) // 11