前端面试题集锦一

1. prototype与_ proto _的关系是什么
创建的对象都具有_ proto _属性，可以成为隐式原型,这个连接存在于实例与构造函数的原型之间。虽然无法访问到该属性，但是可以通过isPrototypeOf()来确定对象之间是否存在这种关系。 同时只要创建一个新函数，就会自动得到一个prototype属性，这个属性指向函数的原型对象。同时也会得到一个constructor属性，包含一个指针指向原构造函数。同时也会有[[prototype]]属性，指向function.
2. meta viewport原理
viewport< meta>标记用来指定用户是否可以缩放Web页面，主要是针对于移动端。
例子：

  <meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale=1">

 width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备     的 宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

3. ajax如何实现？readyState的五种状态？
ajax是一种异步获取数据的请求方式，可以不用刷新页面即从服务器获取数据，核心是XMLHttpRequest.
关于XMLHttpRequest的封装

   function createXHR(){
    if(typeof XMLHttpRequest!="undefined"){
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != "undefined"){
        if(typeof arguments.callee.activeXString !="string"){
            var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
            for(i = 0,len=versions.length;i<len;i++){
                try{
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                }catch(ex){

                }
            }
        }
        return new ActiveXObject(arguments.callee.activeString);
    }else{
        throw new Error("no XHR object available");
    }
} 

ajax实现模板

var xhr=new createXHR();
xhr.onreadystatechange=function () {
    if(xhr.readyState==4) {
        if (xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
};
xhr.open('GET',url,true);
xhr.send(null);

同时可以通过检测XHR对象的readyState的属性，可知道响应过程的当前活动阶段。
0：尚未初始化，未调用open（）方法；
1：启动，已经调用open()方法，但尚未调用send方法；
2：发送。已经调用send（）方法，但尚未接收到响应；
3：接收，已经接收到部分响应数据；
4：完成，已经接收到全部响应数据，而且已经在客户端调用。

4.jsonp如何实现
jsonp是一种跨越解决方案，一般是通过动态创建script标签来使用的，通知指定src属性指定跨域url.
5.get和post的区别
get一般用于请求服务器资源，Post请求一般用于提交资源到服务器，且get请求的请求字段会包含再请求头中明文传送，不适合用GET请求登录界面。
6. 编写web端cookie的设置和获取方法
cookies的构成：名称，值，域(指定哪个域是否有效)，路径(指定域的路径，应该向服务器发送cookies)，失效时间（cookie应该被删除的时间），安全标志（secure指定后，只能在SSL连接的时候发送cookie）。
cookie的格式name=value;expires=;domain=;path=/;secure;

    var CookieUtil={
    get:function (name) {//获取cookie
        var cookieName = encodeURIComponent(name)+'=',
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        if(cookieStart>-1){
            var cookieEnd = document.cookie.indexOf(';',cookieStart);
            if(cookieEnd==-1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
        }
        return cookieValue;
    },
    set:function (name,value,expires,path,domain,secure) {//设置cookies
        var cookieText = encodeURIComponent(name)+'='+encodeURIComponent(value);
        if(expires instanceof Date){
            cookieText += "; expires="+expires.toGMTString();
        }
        if(path){
            cookieText += "; path"+path;
        }
        if(domain){
            cookieText += "; domain="+ domain;
        }
        if(secure){
            cookieText +="; domain="+ secure;
        }
        document.cookie = cookieText;
    },
    unset:function (name,path,domain,secure) {//删除cookies
        this.set(name,"",new Date(0),path,domain,secure);
    }
};

7. 兼容IE的事件封装

function addHandle(element,type,handler) {
    if(element.addEventListener){
        element.addEventListener(type,handler,false);//dom2级事件
    }else if(element.attachEvent){
        element.attachEvent("on"+type,handler);//ie8之前版本
    }else{
        element["on"+type]=handler;//DOM 0级事件
    }
}

8. delegate如何实现
事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一种类型的事件。最适合采用该技术的是click,mousedown,mouseup,keydown,keyup,keypress.

9. this的应用场景
this基于函数的运行环境绑定的。
1.指向全局变量；2.构造函数的this; 3.闭包函数中的this;4.作用域的绑定；

10. 伪类和伪元素的区别
css伪类是指给某些选择器添加特殊的效果；css伪选择器是将特定的效果添加给某些选择器；