Web前端经典面试试题

1、比较typeof和instanceof

相同点：经常用来判断一个变量是否为空或者是什么类型的

不同点：typeof经常用来返回变量的类型，返回值有：number,boolean,string,function,object,undefined。但是对于Array和null，typeof一律返回null， 这也是typeof的一个缺点吧

instanceof用来判断一个变量是不是某一个对象的实例，比如：

function test(){}

var a = new test();

alert(a instanceof test);  //true

2、如何理解闭包

定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。（A返回B，B引用了父函数C的其他变量。如果B在外部被执行，就形成了闭包）而C中被引用的变量，虽然C没有被执行，而由于B被执行，所以引用的变量不会被回收。

两句话总结闭包（虽然并不规范，但是有助于理解）

• 闭包就是函数的局部变量，这些变量在函数return之后仍然可以访问
• 闭包就是函数的内存堆栈，这个堆栈在函数return之后并没有被回收

js有垃圾回收机制，正常情况下，变量或者引用在使用完之后会被回收，闭包则不同，函数执行完之后，变量没有释放形成闭包。

举个栗子?

var count=3;   //全局作用域 标记为flag1
function add(){
    var count=0;    //函数全局作用域 标记为flag2
    return function(){
        count+=1;   //函数的内部作用域
        alert(count);
    }
}
var s = add()
s();//输出1
s();//输出2

说到闭包，还有一点就是js变量作用域：全局变量与局部变量

• 函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。
• 函数内部声明变量的时候，一定要使用var命令。如果不用，那实际上就是声明了一个全局变量！

1）所以不要滥用闭包，由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）会改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

3、什么是跨域，跨域请求的方法有哪些？

只要我们请求url的协议，地址，端口任一不同都会发生跨域问题

跨域请求资源的方法：

（1）proxy代理

定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

实现方法：通过nginx代理；

注意点：1、如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。

（2）CORS 【Cross-Origin Resource Sharing】

定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法：一般需要后端人员在处理请求数据的时候，添加允许跨域的相关操作。如下：

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

（3）jsonp

定义和用法：通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

特点：通过情况下，通过动态创建script来读取他域的动态资源，获取的数据一般为json格式。

<script>
    function testjsonp(data) {
       console.log(data.name); // 获取返回的结果
    }
</script>
<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";／/这里链接是链接到了8888端口，接收成功之后回调testjsonp
    document.head.appendChild(_script);
</script>

缺点：

　　1、这种方式无法发送post请求（jsonp只能有get请求）

　　2、另外要确定jsonp的请求是否失败并不容易，大多数框架的实现都是结合超时时间来判定。

4、谈谈垃圾回收机制方式及内存管理

回收机制方式

1）、定义和用法：垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

2）、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

3）、实例如下：

function fn1() {
    var obj = {name: 'hanzichi', age: 10};
}
function fn2() {
    var obj = {name:'hanzichi', age: 10};
   return obj;
}
var a = fn1();
var b = fn2();

fn1中定义的obj为局部变量，而当调用结束后，出了fn1的环境，那么该块内存会被js引擎中的垃圾回收器自动释放；在fn2被调用的过程中，返回的对象被全局变量b所指向，所以该块内存并不会被释放。

4）、垃圾回收策略：标记清除(较为常用)和引用计数。

标记清除：

　　定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。

　　到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

引用计数：

　　定义和用法：引用计数是跟踪记录每个值被引用的次数。

　　基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

 内存管理

1）什么时候触发垃圾回收？

垃圾回收器周期性运行，如果分配的内存非常多，那么回收工作也会很艰巨，确定垃圾回收时间间隔就变成了一个值得思考的问题。

IE6的垃圾回收是根据内存分配量运行的，当环境中的变量，对象，字符串达到一定数量时触发垃圾回收。垃圾回收器一直处于工作状态，严重影响浏览器性能。

IE7中，垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整，开始回收工作。

2）合理的GC方案：(1)、遍历所有可访问的对象; (2)、回收已不可访问的对象。

3）GC缺陷：(1)、停止响应其他操作；

4）GC优化策略：(1)、分代回收（Generation GC）;(2)、增量GC

5、开发过程中遇到的内存泄露情况，如何解决的？

所谓内存泄漏就是一块已经被分配了的内存，既不能使用又不能回收，比如我们给一个按钮绑定了click事件，之后我们删除这个按钮，但是没有删除事件，就会造成内存泄漏，C#和java语言都用非常严谨的垃圾回收机制，因此不会造成内存泄漏的问题，但是由于浏览器垃圾回收方法有bug，因此会造成内存泄漏。内存泄漏有以下几种情况

（1）、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。如下：

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

解决方法：

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
    btn.onclick = null;
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

（2）、闭包会维持其函数内局部变量，因此造成内存泄漏

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
        //Even if it's a empty function
    }
}

解决方法：

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
         //Even if it's a empty function
    }
    obj=null;
}

6、 javascript面向对象中继承实现？

在心中默念面向对象的基本特征：封装、继承、多态。那在js中实现集成的方法有：

•  原型链（prototype chaining）
• call()/apply()
• 混合方式(prototype和call()/apply()结合)
• 对象冒充

1）原型链实现继承

还是来说一下原型链：Javascript中所有的对象都是Object的实例，并继承Object.prototype的属性和方法，也就是说，Object.prototype是所有对象的爸爸。（个人感觉搞清楚这一点很重要） 。

  在对象创建时，就会有一些预定义的属性，其中定义函数的时候，这个预定义属性就是prototype,这个prototype是一个普通的对象。而定义普通的对象的时候，就会生成一个__proto__，这个__proto__指向的是这个对象的构造函数的prototype.（具体可以看这篇博客，，我觉得写得很好 https://blog.csdn.net/lc237423551/article/details/80010100）

function teacher(name){
    this.name = name;
}
teacher.prototype.sayName = function(){
    console.log("name is "+this.name);
}
var teacher1 = new teacher("xiaoming");
teacher1.sayName();
 
function student(name){
    this.name = name;
}
student.prototype = new teacher()
var student1 = new student("xiaolan");
student1.sayName();
//  name is xiaoming
//  name is xiaolan

2）call()/apply()方法

个函数都包含两个非继承而来的方法：call()方法和apply()方法。

都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向。

function teacher(name,age){
this.name = name;
this.age = age;
this.sayhi = function(){
alert('name:'+name+", age:"+age);
}
}
function student(){
var args = arguments;
teacher.call(this,args[0],args[1]);
// teacher.apply(this,arguments);
}
var teacher1 = new teacher('xiaoming',23);
teacher1.sayhi();

var student1 = new student('xiaolan',12);
student1.sayhi();

// alert: name:xiaoming, age:23
// alert: name:xiaolan, age:12

4）对象冒充

function Person(name,age){
this.name = name;
this.age = age;
this.show = function(){
console.log(this.name+", "+this.age);
}
}

function Student(name,age){
this.student = Person; //将Person类的构造函数赋值给this.student
this.student(name,age); //js中实际上是通过对象冒充来实现继承的
delete this.student; //移除对Person的引用
}

var s = new Student("小明",17);
s.show();

var p = new Person("小花",18);
p.show();
// 小明, 17
// 小花, 18