1: Scope scope
The code copy is as follows:
(function() {
var a = b = 5;
})();
console.log(b);
What will be printed on the console?
answer
The above code will print 5.
The trick to this problem is that there are two variable declarations here, but a declared using the keyword var. Represents that it is a local variable of a function. In contrast, b becomes a global variable.
Another trick to this problem is that it does not use strict mode ('use strict';). If strict mode is enabled, the code will raise a ReferenceError error: B is not defined. Remember that strict mode, you need to specify explicitly in order to implement global variable declarations. For example, you should write:
The code copy is as follows:
(function() {
'use strict';
var a = window.b = 5;
})();
console.log(b);
2: Create a "native" method
Define a repeatify function for the string object. When an integer n is passed in, it returns the result of the string repeated n times. For example:
The code copy is as follows:
console.log('hello'.repeatify(3));
hellohellohello should be printed.
answer
A possible implementation is as follows:
The code copy is as follows:
String.prototype.repeatify = String.prototype.repeatify || function(times) {
var str = '';
for (var i = 0; i < times; i++) {
str += this;
}
return str;
};
The current problem tests developers' knowledge points about JavaScript inheritance and prototype. This also verifies whether the developer knows if the built-in object is extended (although this shouldn't be done).
Another point here is that you need to know how to not override the functionality that may have been defined. Test the function definition does not exist before:
The code copy is as follows:
String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};
This technique is especially useful when you are asked to be compatible with JavaScript functions.
3: Declare the promotion (Hoisting)
Execute this code and output the result.
The code copy is as follows:
function test() {
console.log(a);
console.log(foo());
var a = 1;
function foo() {
return 2;
}
}
10: test();
answer
The result of this code is undefined and 2.
The reason is that both the variable and the function declaration are advanced (moved to the top of the function), but the variable does not assign any value. So when printing the variable it exists in the function (it is declared), but it is still undefined. In other words, the above code is equivalent to the following:
The code copy is as follows:
function test() {
var a;
function foo() {
return 2;
}
console.log(a);
console.log(foo());
a = 1;
}
test();
4: How this works in JavaScript
What results will the following code output? Give your answer.
The code copy is as follows:
var fullname = 'John Doe';
var obj = {
fullname: 'Colin Ihrig',
prop: {
fullname: 'Aurelio De Rosa',
getFullname: function() {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());
answer
The answers are Aurelio De Rosa and John Doe. The reason is that in a function, the behavior of this depends on how the JavaScript function is called and defined, not just how it is defined.
In the first console.log() call, getFullname() is called as a function of the obj.prop object. So, the context refers to the latter, and the function returns the fullname of the object. In contrast, when getFullname() is assigned to the test variable, the context refers to the global object (window). This is because test is an attribute that is implicitly set as a global object. For this reason, the function returns the fullname of the window, that is, the value defined on the first line.
5: call() and apply()
Now let you solve the previous problem and make the last console.log() print Aurelio De Rosa.
answer
The problem can change the function context by forcing call() or apply(). Below I'll use call(), but in this case apply() will output the same result:
The code copy is as follows:
console.log(test.call(obj.prop));