前端面试题—Js

1.原型/原型链/构造函数/实例/继承

　　原型：_proto_

　　原型对象：prototype

　　用作构造函数中有prototype（原型对象），实例中有_proto_

2.有几种方式可以实现继承

　　原型继承，构造继承，实例继承，拷贝继承，组合继承，寄生组合继承，class继承

3.用原型实现继承有什么缺点，如何解决

　　所有属性都被实例所共享

4.arguments

　　函数实参的集合，是伪数组，没有数组对应的方法，但可以通过索引调用对应的值

5.数据类型的判断

　　typeof可以判断基础数据类型，Array，Object，null，Date，RegExp，Error这几个类型都被typeof判断为object，所以如果想要判断这几种类型，就不能使用typeof了。

　　instanceof也可以用来判断数据类型，但是Number，String，Boolean不能检测出他们的类型，如果要检测需要

var num = new Number(123);
var str = new String('dsfsf');
var boolean = new Boolean(false);

6. 作用域链，闭包，作用域

　　作用域分为全局作用域和局部作用域，在外层定义的变量为全局变量都可以使用，但在函数内部定义的变量为局部变量，只有函数内部能使用

　　闭包：通俗来讲就是能读取其他函数内部变量的函数，延长变量的时间，防止被垃圾回收机制回收。

　　作用域链：是一种在函数内部访问函数外部的一种机制，当在函数内部找不到相关变量的时候就会沿着作用域链访问函数外部

7.ajax的原生写法

var xhr;
if(window.XMLHttpRequest){
  xhr=new XMLHttpRequest();      
}else{
  xhr=new ActiveXObject("Microsoft.XMLHTTP");  
}

//get发送数据
xhr.open("GET",url,true);
xhr.send();
//post发送数据
xhr.open("POST",url,true)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send(data);

xhr.onreadystatechange=function(){
  if(xhr.readyState==4&&xhr.status==200){
    var result=xhr.responseText;    
}else{
     console.log("数据请求出错");  
  }
}

8.图片的懒加载和预加载

懒加载：

window.onload=function(){
//获取当前视口高度
  var viewHeight=document.documentElement.clientHeight;
  //当鼠标滚动时要调用的函数
    function lazyload(){
  //获得所有图片集合
      var imgs=document.getElementByClassName("img");
      for(let item of imgs){
            //获取图片距离视口顶部的距离    
            let imgHeight=item.getBoundingClientRect();
            //判断图片是否出现在视口中
            if(imgHeight<viewHeight){
                  //设置图片的路径
                  item.src=item.getAttribute("data-original")
             }    
        }      
    }
}

预加载：设为背景图片，最后再给标签加上相应的class

9.函数式编程

　　尽量用函数来进行操作，可以提高代码的重用性；

10.什么是同源策略，为什么要有同源策略

　　同源策略：两个页面地址中的协议，域名，端口号一致，则表示同源。

　　为什么：主要为了安全，如果没有同源限制，在浏览器中的cookie等其他数据可以任意读取，不同域下的DOM任意操作，ajax任意请求其他网站的数据，包括隐私数据。