前端高频面试题

Javascript相关

1.事件冒泡
事件冒泡：子级元素的某个事件被触发，它的上级元素的该事件也被递归执行。事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。

<ul id="parent" onclick="parent_click(event)">
    <li id="child" onclick="child_click(event)">香蕉</li>
    <li>猕猴桃</li>
    <li>苹果</li>
    <li>梨子</li>
    <li>金桔</li>
</ul>

当id="child"被点击时，会触发id="parent"的onclick事件.

项目	浏览器	方法
阻止事件冒泡	IE	window.event.cancelBubble = true
	W3C	event.stopPropagation()
阻止事件的默认行为	IE	window.event.returnValue = false
	W3C	event.preventDefault()

参考：
http://blog.csdn.net/axzywan/article/details/7498443
http://www.tuicool.com/articles/Vnyaea

---

2. 类定义和prototype
用function 来定义类，对象的prototype属性的解释是：返回对象类型原型的引用。

function Fruit(name,favorite_degree){
    this.name = name;
    //对象方法
    this.show = function(){
        ...
    }
}
//类方法
Fruit.eat = function(){
    console.log("what a delicious fruit.")
}
//原型方法
Fruit.prototyope = {
    showName:function(){
        ...
    }
}

A.prototype = new Fruit() 相当于 A类 继承了Fruit类，如果A中有与Fruit中同名的方法，则优先调用A中的方法，类似于子类的方法重写；
call()可以 使用 A类 的实例 调用 Fruit类的方法：

A.prototype = new Fruit();
var a_instance = new A();

var orange = new Fruit("金桔",100);
orange.show.call(a_instance);//调用对象方法
Fruit.eat.call(a_instance);//调用类方法

---

3. 闭包

在Javascript中，只有函数内部的子函数才能读取局部变量，但是如果需要得到函数的局部变量时，可以在函数内部再定义一个函数，这就是闭包，因此可以把闭包简单理解成”定义在一个函数内部的函数”。

function foo(){
    var num = 1;
    addNum = function(){//addNum 是个全局变量
        num += 1;
    };
    function my_func(){
        console.log(num);
    }
    return my_func; 
}

var t = foo();
t(); // 1
addNum();
t(); // 2

在上述代码中，my_func被包括在foo内部，是一个闭包函数，foo函数所有的局部变量，对my_func都是可见的。t其实就是my_func函数
addNum没有用var声明，说明 addNum是一个全局变量，同时也是一个匿名函数，它也可以访问foo的局部变量，因此，它本身也是一个闭包函数。

综上所述，闭包之所以存在，是因为js中没有public,protected,private类似的访问控制，默认所有的局部变量都是private，但 又 需要把内部定义变量和方法public出来。

闭包的好处：

访问局部变量。

访问控制。可以在闭包中控制要public的方法和变量。

缓存数据。举个例子，my_func是依赖foo的，foo会一直在内存中，num的值不会被销毁，可以用来缓存数据。

垃圾回收。

参考：
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

---

4. 跨域相关
跨域调用 http://www.cnblogs.com/2050/p/3191744.html
xss攻击 http://blog.csdn.net/ghsau/article/details/17027893

---

CSS相关

圆角 http://www.studyofnet.com/news/276.html
position http://blog.jobbole.com/49320/
浏览器兼容 http://blog.csdn.net/chuyuqing/article/details/37561313/
盒模型 http://www.cnblogs.com/sunyunh/archive/2012/09/01/2666841.html