中高级web前端面试题2

1.IE与标准浏览器对事件处理的区别？

1.监听
标准
element.addEventListener('click',observer, useCapture);
element.removeEventListener('click',observer, useCapture);
IE
element.attachEvent('onclick',observer);
element.detachEvent('onclick',observer);
2.阻止冒泡
标准
event.stopPropagation();
IE
event.cancelBubble = true;
3.阻止默认
标准
event.preventDefault();
IE
event.returnValue = false;
4.event
标准
event
IE8以下
window.event
5.触发当前事件的源对象
event.target  //Firefox,Chrome
event.srcElement   //IE,Chrome

2.new操作符具体干了什么

三步：

var Person = function(name) {
    this.name = name;
}
var p = new Person();
new操作符的操作是
var p = {}  //创建了一个空对象
p.__proto__ =  Person.prototype  //将这个对象的__proto__成员指向了Person.prototype
Person.call(p)  //将Person函数的this指针指向替换成p，然后再调用Person函数。

var Person = function () { };

var Programmer = function () { };
Programmer.prototype = new Person();

var p = new Programmer();

p.__proto__=Programmer.prototype;
Programmer.prototype.__proto__=Person.prototype;

3.null和undefined区别

null表示一个“无”的对象，typeof为object，转换为数值是0；undefined表示一个“无”的原始值，typeof为undefined，转换为数值是NaN。

null目前用法

• 作为函数的参数，表示该函数的参数不是对象
• 作为对象原始链的终点  //Object.getPrototypeOf(Object.prototype);返回null

undefined目前用法

• 变量声明了，但没有别赋值，就等于undefined
• 调用函数时，应该提供的参数没有提供，该参数等于undefined
• 对象没有赋值的属性
• 函数没有返回值时，默认返回undefined

4.delete用法

用于对象属性的删除
var obj = {
    name: 'Lily'
};
delete obj.name;
obj.name   //undefined
不能删除变量、原型中的变量、函数

5.reactjs主要方法

render()
getInitialState() //组件挂载之前调用一次
getDefaultProps() //在组件类创建的时候调用一次
propTypes() //对象允许验证传入到组件的props
生命周期方法
componentWillMount() //服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用
componentDidMount() //在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）
componentWillReceiveProps(object nextProps) //在组件接收到新的 props 的时候调用
shouldComponentUpdate(object nextProps,object nextState) //在接收到新的props或者state，将要渲染之前调用。返回true或者false
componentWillUpdate(object nextProps,object nextState) //在接收到新的props或者state之前立刻调用。
componentDidUpdate(object prevProps,object prevState) //在组件的更新已经同步到DOM中之后立刻被调用
componentWillUnmount() //在组件从DOM中移除的时候立刻被调用

6.Array()数组函数

pop()  //删除最后一位并返回删除的元素
push()  //添加到队尾元素，并返回数组长度

7.cookie和localstorage、sessionstorage区别

1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2.HTML5本地存储中每个域的存储大小默认是5M，比起Cookie的4K要大的多。
3.数据有效期不同，cookie：只在设置的过期时间之前一直有效，即使窗口或浏览器关闭（默认为是到浏览器关闭）；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持。
4.接口使用：下段显示获取cookie方法。Web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。接口举例：setItem(key,value)、getItem(key)、removeItem(key)、clear(); 
5.cookie更安全：浏览器支持使用HTTPONLY来保护Cookie不被XSS攻击获取到，而Web Storage没有任何抵御机制。
6.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage和cookie在所有同源窗口中都是共享的。

var allcookies = document.cookie;
function getCookie(cookie_name){
    var allcookies = document.cookie;
    var cookie_pos = allcookies.indexOf(cookie_name);   //索引的长度  
    if (cookie_pos != -1){
        //把cookie_pos放在值的开始，只要给值加1即可。
        //注indexOf(searchValue,fromIndex),fromIndex开始检索的位置
        var cookie_end = allcookies.indexOf(";", cookie_pos);  
        if (cookie_end == -1){
            cookie_end = allcookies.length;
        }  
        var value = unescape(allcookies.substring(cookie_pos, cookie_end));         //这里就可以得到你想要的cookie的值了。。。
    }
    return value;
} 
// 调用函数
var cookie_val = getCookie("username");

8.针对json数组，根据某一个值排序 

var arrJson = [
    {flight: "ERWIO",price: 350},
    {flight: "WW250",price: 120},
    {flight: "QQ350",price: 100},
    {flight: "SDJIN",price: 300},
    {flight: "MH370",price: 120}
];
function sortByKey(array, key) {
    return array.sort(function(a, b) {
        var x = a[key]; var y = b[key];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
}
arrJson = sortByKey(arrJson, 'price');

 9.ajax是同步还是异步？

可以同步也可以异步，jquery默认为异步，也推荐异步执行。可通过async: true修改。