常见的面试题

//请实现一个遍历至 100 的 for loop 循环，
//在能被 3 整除时输出 "fizz"，在能被 5 整除时输出 "buzz"，
//在能同时被 3 和 5 整除时输出 "fizzbuzz"。
for (var i = 1; i <= 30; i++) {

    if (i % 3 === 0) {
        if (i % 5 === 0) {
            alert('fizzbuzz' + i);
            continue;
        }
        alert('fizz' + i);
        continue;
    } else if (i % 5 === 0) {
        if (i % 3 === 0) {
            alert('fizzbuzz' + i);
            continue;
        }
        alert('buzz' + i);
        continue;
    }
}


// 问题：如何实现以下函数？

// add(2, 5); // 7
// add(2)(5); // 7
function add(a, b) {
    return a + b;
}
add(2, 5);

function add(a) {
    return function(b) {
        return a + b;
    }
}
add(2)(5);

// 问题：下面的语句的返回值是什么？"i'm a lasagna hog".split("").reverse().join("");
"goh angasal a m'i"

// 问题：window.foo的值是什么？
(window.foo || (window.foo = "bar")); // 'bar'


// 问题：下面两个 alert 的结果是什么？
var foo = "Hello";
(function() {
    var bar = " World";
    alert(foo + bar);
})();
alert(foo + bar);
'Hello World'
ReferenceError: bar is not defined(…)

// 问题：foo.x的值是什么？
var foo = {
    n: 1
};
var bar = foo;
foo.x = foo = {
    n: 2
};
Object {
    n: 2
}

// 问题：下面代码的输出是什么？
console.log('one');
setTimeout(function() {
    console.log('two');
}, 0);
console.log('three');
// 'one' 'three' 'two'



// 事件代理
// 事件代理根据事件冒泡原理机制通过将事件添加到父节点触发函数
// 
< ul id = "parent-list" >
    < li id = "post-1" > Item 1 < /li> < li id = "post-2" > Item 2 < /li> < li id = "post-3" > Item 3 < /li> < li id = "post-4" > Item 4 < /li> < li id = "post-5" > Item 5 < /li> < li id = "post-6" > Item 6 < /li> < /ul>
    // 不好的做法
function addListeners4Li(liNode) {
    liNode.onclick = function clickHandler() {...
    };
    liNode.onmouseover = function mouseOverHandler() {...
    }
}

window.onload = function() {
    var ulNode = document.getElementById("parent-list");
    var liNodes = ulNode.getElementByTagName("Li");
    for (var i = 0, l = liNodes.length; i < l; i++) {
        addListeners4Li(liNodes[i]);
    }
}

// 获取父节点，并为它添加一个click事件
document.getElementById("parent-list").addEventListener("click", function(e) {
    // 检查事件源e.targe是否为Li
    if (e.target && e.target.nodeName.toUpperCase == "LI") {
        // 真正的处理过程在这里
        console.log("List item ", e.target.id.replace("post-"), " was clicked!");
    }
});

// 原型
// 每个对象都有一个prototype属性，prototype是指向其他对象的引用
// 原型链 当试图去引用对象的属性时，会触发一个‘Get’操作，检查对象是否有这个属性，当没有找到时
// 就试图prototype所引用的对象中找直到找到为止，这个寻找的路径就是原型链
// 原型继承
function Foo(name) {
    this.name = name;
}
Foo.prototype.myName = function() {
    return this.name;
}

function Bar(name, label) {
    Foo.call(this, name);
    this.label = label;
}

Bar.prototype = Object.create(Foo.prototype);
Bar.prototype.myLabel = function() {
    return this.label;
}
var a = new Bar('Monica', 'student');
a.myName(); // 'Monica'
a.myLabel(); // 'student'



// 请解释 JavaScript 中 this 是如何工作的
// 默认绑定
var a = 2;

function foo() {
    return this.a;
}
foo(); // 2

// 隐式绑定
function foo() {
    return this.a;
}
var obj = {
    a: 3,
    foo: foo
}
obj.foo(); // 3
foo.call(obj); // 3

// 隐式丢失
var bar = obj.foo;
bar(); // 2


// new 绑定
function foo(a) {
    this.a = a;
}
var bar = new foo(5);
bar.a; // 5

// 闭包
function a() {
    for (var i = 0; i < 3; i++) {
        setTimeout(function timer() {
            console.log(i);
        }, 1000);
    }
}

function a() {
    for (var i = 0; i < 3; i++) {
        (function(j) {
            setTimeout(function timer() {
                console.log(j);
            }, 1000);
        })(i);
    }
}
a();

// this 在匿名函数的执行环境具有全局性
var name = "The Window";　　
var object = {　　　　
    name: "My Object",
    　　　　getNameFunc: function() {　　　　　　
        return function() {
            alert(window === this);　　　　　　　　
            return this.name;　　　　　　
        };　　　　
    }　　
};　　
alert(object.getNameFunc()()); // "The Window"


function add() {
    var i = 0;

    function q() {
        return i++;
    }
    return q;
}
var f = add();
f();
f();

function addHandlers(nodes) {
    for (var i = 0; i < nodes.length; i++) {
        nodes[i].onclick = function() {
            alert(i);
        }
    }
}

function addHandlers(nodes) {
    function helper(i) {
        return function() {
            alert(i);
        }
    }
    for (var i = 0; i < nodes.length; i++) {
        nodes[i].onclick = helper(i);
    }
}