All object in JavaScript has a prototype property, the property is a simply reference to another object.
The modern browsers do provide a way to directly access the object’s prototype, but do not use it or set it, it will cause serious performance issue.
The prototype property on a function is NOT the prototype of the function, it’s the prototype of any objects that created via function constructors.
Every execution context has a space in memory where the variables and functions that created inside of it lives. Under normal circumstances, the JavaScript engine will eventually clear this memory space out(garbage collection). But at this moment, that memory space still exist though execution context was gone(popped off the execution stack).
It means even though the function was finished, any function created inside of it still have the reference of the function’s memory space. Function is gone, its execution context is gone, but what’s in memory for that execution context isn’t, and the JavaScript engine make sure that we can still go down scope chain and find it.
As we can say, the execution context is closed in its outer variables. This phenomenon: a function closing in all the variables that it’s supposed to have access to, is called a closure.
Closures are just a feature to make sure that functions has access to their outer variables, it doesn’t matter whether the outer functions have finished running or not.
They just happens. The JavaScript engine create the closures, and we just take advantages of it.
closure example:
create a function factory:
setTimeout:
callbacks
Anywhere the syntax parser expect that semicolon will be, it will put one for you, that why semicolons seems optional, as you’re writing the code, you should always put your own semicolons, also, automatic semicolon insertion could cause big problem
by avoid this mistake, you should always put curly brackets on the same line as functions, for loops and if statements etc. instead of put them one the newline.
JavaScript do not have function overloading because functions are objects, this is something we can alternatively do about it
“arguments” is another keyword JavaScript engine create during the creation of execution context, arguments contains a list of all the values of all the parameters that passed to a function.
argument is an array-like object, it doesn’t has all the features of JavaScript array
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function MyFunc(arg1, arg2, arg3){ console.log(arguments); // [] console.log(typeof(arguments)); // Object if(arguments.length === 0){ return; } console.log(arguments[0]); } MyFunc(); |
“arguments” will become deprecated in the future, the new thing is called spread
|
1 2 3 |
function myFunc(arg1, arg2, arg3, ...other){ // avaliable in the future... } |
JavaScript engine every time an execution context is created, that is every time a function is RUN, it gives a variable called “this” pointed to a different object depends on how the function is invoked(where the function is and how it been called)
|
1 2 3 4 5 6 7 8 9 10 11 |
function greeting(){ console.log(this) } greeting(); // Window var man = { greeting: function(){ console.log(this); } } man.greeting(); // Object { greeting: greeting() } |
Weird part
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var man = { greeting: function(){ function someFunctionSitInObjectFunction(){ console.log(this); } someFunctionSitInObjectFunction(); } } man.greeting(); // Window /* ==== Solution ==== */ var man = { greeting: function(){ var self = this; // by references function someFunctionSitInObjectFunction(){ console.log(self); // look for self variable in scope chain } someFunctionSitInObjectFunction(); } } man.greeting(); // Object { greeting: greeting() } |