一些非常实用的JS前端面试题

1.谈一谈你理解的函数式编程

简单说，“函数式编程”是一种“编程范式”，也就是如何编写程序的方法论

它具有以下特性：闭包和高阶函数、惰性计算、递归、函数是“第一等公民”、只用“表达式”

2.说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，访问到window对象即会终止，作用域链向下访问是不被允许的

作用域就是变量与函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期

3.什么是JavaScript原型，原型链?有什么特点?

每个对象都在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

关系：instance.constructor.prototype = instance.__proto__

JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变

当我们需要一个属性时，JavaScript引擎会先看当前对象中是否有这个属性，如果没有就会找他的prototype中是否有这个属性，如此递推下去，直到Object内建对象

4.说说什么是事件代理?

事件代理，又称之为事件委托。是JavaScript中绑定事件的常用技巧。顾名思义，“事件代理”就是把原本需要监听的事件委托给父元素，由父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件地理的好处是可以提高性能。

可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒

可以实现新增子对象时无需再次对其绑定

5.说说Ajax原理?

Ajax的原理简单来说实在用户和服务器之间加了一个中间层(AJAX引擎)，由XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据

Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是Ajax的核心机制

Ajax的优点：

• 通过异步模式提升了用户体验
• 优化了浏览器和服务器之间的传输，减少了不必要的数据往返，减少了带宽占用
• Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载
• Ajax可以实现局部刷新

Ajax的缺点：

• 安全问题，Ajax暴露了与服务器的交互细节
• 对搜索引擎的支持比较弱

Ajax的请求过程：

// 1、创建连接
var xhr = null;
xhr = new XMLHttpRequest();
// 2、连接服务器
xhr.open('get', url, true);
// 3、发送请求
xhr.send(null);
// 4、接受请求
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            success(xhr.responseText);
        } else {
            // false
            fail && fail(xhr.status);
        }
    }
}

6.说说如何解决跨域问题?

• 首先了解下浏览器的同源策略，他是一种约定，是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，浏览器会很容易收到XSS、CSFR等攻击。所谓同源策略是值“协议+域名+端口”三者相同，即便两个不同的域名指向同一个IP地址，也非同源
• 通过jsonp跨域
• document.domain + iframe跨域
• nginx代理跨域
• nodejs中间件代理跨域
• 后端在头部信息里面设置安全域名解决跨域

7.异步加载JS的方式有哪些?

• defer，只支持IE
• async
• 创建script，插入到DOM中，加载完毕后callback

// 异步加载地图
export default function MapLoader() {
    return new Promise((resolve, reject) => {
        if (window.AMap) {
            resolve(window.AMap);
        } else {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.async = ture;
            script.src = '';
            script.onerror = reject;
            document.head.appendChild(script);
        }
        window.initAMap = () => {
            resolve(window.AMap);
        }
    })
}

 以上就是“一些非常实用的JS前端面试题”，你能回答上来吗?如果想要了解更多的相关内容，可以关注极悦Java官网。