前端面试题系列---1

题目一（变量提升、函数作用域、局部变量、全局变量）

var a = 1;
var c = 10;
function b(){   
    c = 100; 
    a = 10;
    return;
    var a = 1000;
}  
b();  
console.log(a,c); 

答案：1，100

解析：

大家都知道return后面的语句是不会被执行的，但是本题return后面是var a =
1000，是一个变量声明语句，这就用到了js的变量提升–把变量声明语句提到作用域的最前面。

上面的写法等价于

function b(){   
    var a;
    c = 100; 
    a = 10;
    return;
    a = 1000;
}   

a变成了局部变量 而不是全局变量，在外层访问的还是a的全局变量值

题目二（ECMAScript的静态作用域和动态作用域）

var z = 10;
(function(funArg){
    var z = 20;
    funArg();
})(foo);
function foo(){
    console.log(z);
}

答案：10

解析

ECMAScript只用于静态作用域
静态作用于是指声明的作用域在程序正文被编译的时候就确定好的，也称为词法作用域。
动态作用域是指程序的变量所引用的对象在程序运行时刻根据程序的控制流信息确定的。
所以根据函数创建的算法，我们看到 在ECMAScript中，所有的函数都是闭包，因为它们（这里是foo）都是在创建的时候就保存了上层上下文的作用域链（除开异常的情况） （不管这个函数后续是否会激活 —— [[Scope]]在函数创建的时候就有了）
此处由于foo在创建时就将z=10保存在了其静态作用域中，所以在调用时输出10。

(function(funArg){
        var z = 20;
        funArg();
    })(foo);
    function foo(){
        console.log(z);
    }

Uncaught ReferenceError: z is not defined

记住：ECMAScipt只使用静态作用域，动态作用域是没用的，否则会冲突。

题目三

var data = [];
for(var k = 0; k < 3; k++){
    data[k] = function(){
        console.log(k);
    };
}
data[0]();
data[1]();
data[2]();

答案：3 3 3
解析

这道题本来是想对数组中的每个元素保存一个函数，这个函数返回的是其下标，但结果返回的都是3 原因就是匿名函数里的k是传递的是引用而不是值。
还有一个点就是变量k并不是一个局部变量，for循环在ECMAScript中不是一个局部作用域。每一个函数里的变量其实都是全局变量。
解决思路也可以从这两个方面出发

第一个解决办法：利用闭包解决变量作用域的问题
闭包详解

var data = [];
for(var k = 0; k < 3; k++){
    data[k] = (function(num){
        return function () {
            console.log(num);
        }
    })(k);
}
data[0]();
data[1]();
data[2]();

第二个解决办法：利用ES6的let语法把变量变为局部作用域
ES6的let语法

var data = [];
for(let k = 0; k < 3; k++){
    data[k] = function(){
        console.log(k);
    };
}
data[0]();
data[1]();
data[2]();

题目四（正则解决敏感词问题）

假设现有一篇文章，var content = “…大量文字”，
文章中触及到一些敏感词汇,如 [“习近平”,”周永康”,”中共”,”6.4”] > 等内容。
如何在文章中发现这些敏感词，并将背景设置为红色或者改变字体颜色并标示出来。

解决

function filter(content) {
    var result = content;
    var words = ["习近平", "周永康", "中共", "6.4"];
    for (var i = 0; i < words.length; i++){
        var reg = new RegExp(words[i], 'ig')
        result = result.replace(reg, "<span>"+ minWords[i] +"</span>")
    }
    return result;
}

然后给span标签设置背景红色或者设置红色字体

题目五

JQuery 中 $.fn.extend 函数的实现（实现核心代码即可）

jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。

$.fn.extend({
    alertWhileClick:function(){
        $(this).click(function(){
            alert($(this).val())
        })
    }
})
$("#input1").alertWhileClick(); // 点击这个input框就会弹出其内容

题目六

设计基于观察者模式的事件绑定机制