Test Record

最新推荐文章于 2024-04-22 00:02:41 发布

Joyce的前端日常

最新推荐文章于 2024-04-22 00:02:41 发布

阅读量445

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/joyce_lcy/article/details/54311672

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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>