面试题目简单整理－完善中

面试题目整理：

1，此处a是局部变量，b和c是全局变量。

(function() {
        var a = b = c = 5;
    })();
    console.log(b); //5
    console.log(c); //5
    console.log(a); //VM56095:6 Uncaught ReferenceError: a is not defined(…)

以上代码等同于如下代码：

 (function() {
        c = 5;
        b = 5;
        var a = 5;
    })():

2，再看一个题目： console.log(a);之所以会返回undefined，是因为在函数内部定义的局部变量a被提前了，但是并没有初始化。console.log(foo());因为内部函数声明被提前，所以能正常返回2.

    function test() {
        console.log(a);
        console.log(foo());
        var a = 1;

        function foo() {
            return 2;
        }
    }
    test(); //undefined 2

 3，this指向题目：

var fullname = 'John Doe';
    var obj = {
        fullname: "Colin Ihrig",
        prop: {
            fullname: 'Aurelio De Rosa',
            getFullname: function() {
                return this.fullname;
            }
        }
    };

    console.log(obj.prop.getFullname()); //"Aurelio De Rosa"
    var test = obj.prop.getFullname;
    console.log(test()); //"John Doe"

 4，再看一个：

function Foo() {
        var i = 0;
        return function() {
            console.log(i++);
        }
    }
    var f1 = Foo();
    var f2 = Foo();
    f1(); //0
    f1(); //1
    f2(); //0

 5， 再看：

   var bb = 1;

    function aa(bb) {
        bb = 2;
        alert(bb);
    }

    aa(bb); //2
    alert(bb); //1

 6，用JS实现全选和取消全选的功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="checkbox" id="checkall"> 全选
    <div id="div">
        <input type="checkbox" name="type" value="1">这是1
        <input type="checkbox" name="type" value="2">这是2
    </div>
    <script>
    window.onload = function() {
        var checkAll = document.getElementById('checkall');
        var checkBox = document.getElementById('div').getElementsByTagName('input');
        checkAll.onclick = function() {
            for (var i = 0; i < checkBox.length; i++) {
                if (checkBox[i].checked) {
                    checkBox[i].checked = false;
                } else {
                    checkBox[i].checked = true;
                }
            }
        }
    }
    </script>
</body>

</html>

 

7， 实现左侧定宽右侧自适应的布局：左侧定宽＋浮动；右侧margin-left/padding-left，看下面代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body,
    div {
        margin: 0;
        padding: 0;
        border: 0 none;
    }

    /*左侧定宽＋浮动*/
    .left {
        width: 200px;
        height: 200px;
        background-color: #f00;
        float: left;
    }

    /*右侧用margin-left或者padding-left实现单侧固定的流体布局*/
    .right {
        margin-left: 200px;
        height: 200px;
        background-color: #ff0;
    }
    </style>
</head>

<body>
    <div class="left">左侧定宽</div>
    <div class="right">右侧自适应</div>
</body>

</html>

 效果见下图：

posted @ 2017-03-29 21:40  水墨墨心  阅读(752)  评论(2)  编辑  收藏  举报