1. Type
10 + 20/0
//Infinity
'10' + 20/''
//10Infinity
2. Variate
(1) not defined
var foo = "hello";
(function(){
var bar = " world";
alert(foo + bar);
})();
alert(foo + bar);
//-hello world
//-error: bar is not defined
如果var 了bar,但没有赋值,才是 undefined。
没有var 就是 not defined。
(2) Are the following statements equivalent, if not, what’s the difference
var a = b = c = 1;
var c = 1, b = c, a = b;
//No, the former one creates global variables b and c.
3. SetTimeout
(function () {
console.log(1);
setTimeout(function () {
console.log(2);
}, 100);
console.log(3);
setTimeout(function () {
console.log(4);
}, 0);
console.log(5);
})()
//1, 3, 5, 4, 2
4. Join
(function () {
var a = [1];
function bar() {
if (!a) {
var a = [1, 2];
}
console.log(a.join());
}
bar();
})()
//1, 2
没有块级作用域,只有函数作用域。作用域中变量声明会前置。
5. Write the ‘add’ function that makes the following statement true:
add(3,4) === add(3)(4)
function add() {
var arg1 = arguments [0];
return arguments.length == 2 ? arg1 + arguments[1] : function (arg2) {
return arg1 + arg2;
}
}
如何理解这样的代码?我们做一个翻译
function add(){
var value;
var arg1 = arguments[0];
if(arguments.length==2){
value = arg1+arguments[1];
}else{
value = function(arg2){
return arg1+arg2;
}
}
return value;
}
if的部分很好理解,主要在于else部分。疑惑主要存在于,arg2并没有赋值,如何获得第二个参数的值。
add(3)
//运行结果为
function(arg2){
return arg1+arg2;
}
//add(3)(4)等价于(仅帮助理解,但有区别)
//如下取不到arg1的值,因为arg1的作用域在add()中)
(function(arg2){
return arg1+arg2;
})(4)
6. Write the ‘increase’ function that makes the following statements true (hint: please use JavaScript closure):
increase() === 0;
increase() === 1;
increase() === 2;
…
var increase=(function(){
var count=0;
return function(){
return count++;
}
})();
运用闭包,count变量不会被释放,在定义后会一直在内存中。到底定义的increase是什么样的。运行increase,可以看到,它实际是一个函数。
//increase
function(){
return count++;
}
7. Write a plugin that dynamically sets the background-image of a DIV element
called c-hero. This plugin should work generically for any website project. You may use CoffeeScript or regular JS syntax for your code.
You should consider best practices in your solution.
使用jQuery的plugin来写,另外,图片做示例不方便,下代码改为用颜色代替image。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="c-hero" style="height: 200px;width: 200px;">
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
(function($){
$.fn.setBackground= function(options){
var settings = $.extend({
mobile: "#000",
desktop: "#f0f"
},options);
var img;
if(window.innerWidth < 768){
img = settings.mobile;
}else{
img = settings.desktop;
}
return this.css({
backgroundColor: img
});
}
})(jQuery);
$('.c-hero').setBackground();
</script>
</html>