面试题：js

• Generator 函数:

一，function关键字与函数名之间有一个星号；

二，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();
hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }

ES6 没有规定，function关键字与函数名之间的星号，写在哪个位置。这导致下面的写法都能通过.

function * foo(x, y) { ··· }
function *foo(x, y) { ··· }
function* foo(x, y) { ··· }
function*foo(x, y) { ··· }

由于 Generator 函数仍然是普通函数，所以一般的写法是上面的第三种，即星号紧跟在function关键字后面。

• includes() 方法用来判断一个数组是否包含一个指定的值，如果是，酌情返回 true或 false。
• 遍历对象

for (let item of menu) { //for in是遍历键名，for of是遍历键值。
  if (item.route && pathToRegexp(item.route).exec(location.pathname)) {
    currentMenu = item
    break      //重要，拦截退出
  }
}

• 正则表达式()和[]有本质的区别

()表示的是一个子表达式，()本身不匹配任何东西，也不限制匹配任何东西，只是把括号内的内容作为同一个表达式来处理，例如(ab){1,3}，就表示ab一起连续出现最少1次，最多3次。如果没有括号的话，ab{1,3}表示a后面紧跟的b出现最少1次，最多3次。另外，括号在匹配模式中也很重要。

[]表示匹配的字符在[]中，并且只能出现一次，并且特殊字符写在[]会被当成普通字符来匹配。例如[(a)]，会匹配(、a、)、这三个字符。

 

• 谈谈你对webpack的看法？

webpack 是一个模块打包工具，你可以使用webpack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。

 

• 创建ajax过程？

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

 

• jsonp如何解决跨域问题？

JSONP是英文JSON with Padding的缩写，是一个非官方的协议。它允许在服务器端生成<script>标签返回至客户端，通过javascript callback的形式来实现站点访问。 JSONP是一种<script>标签的注入，将server返回的response添加到页面实现特定功能。

首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 JSON数据。然后以JavaScript 语法的方式，生成一个function, function名字就是传递上来的参数jsonp.  

然后，将JSON数据直接以入参的方式，放置到function中，这样就生成了一段 js 语法的文档，返回给客户端。 

最后，在客户端浏览器中解析script标签，并执行返回的JavaScript文档，此时数据作为参数，传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。

<script type="text/javascript">    
    function jsonpCallback(result){     
       alert(result[1].name);     
    }     
</script>  
<script type="text/javascript"src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script>  

<%  
     String callback = request.getParameter("callback");  
     out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );");  
     out.print(callback);  
%>  

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都 可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

 

• 后端如何解决跨域？

添加响应头，允许跨域 

addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 

addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

 

• <script src="js/require.js" defer async="true" ></script> 中的defer和async是什么意思?

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持async属性，只支持defer，所以把defer也写上。

 

• AMD、CMD和CommonJS规范？

AMD：异步加载模块，推崇依赖前置，在定义模块的时候就要声明其依赖的模块。只有一个主要接口 define(id,dependencies,factory)，它要在声明模块的时候指定所有的依赖dependencies，并且还要当做形参传到factory中，AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行。

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加载模块
require(['myModule'], function (my){
　 my.printName();
});

CMD：异步加载模块，推崇就近依赖，只有在用到某个模块的时候再去require 。CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的。

// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加载模块
seajs.use(['myModule.js'], function(my){

});

CommonJS：同步加载模块，但其实也有浏览器端的实现，其原理是将所有模块都定义好并通过id进行索引，这样就可以浏览器进行解析了，主要内容是：模块必须通过  module.exports导出对外的变量或接口，通过require()来导入其他模块的输出到当前模块。

// moduleA.js  
module.exports = function( value ){  
    return value * 2;  
}  


// moduleB.js  
var multiplyBy2 = require('./moduleA');  
var result = multiplyBy2(4);  

 

• 阻止事件传播和默认行为的方法？

阻止事件传播：

在W3c中，使用 e.stopPropagation() 方法；

在IE下设置window.event.cancelBubble = true；

取消默认行为：

在W3c中，使用preventDefault（）方法；

在IE下设置window.event.returnValue = false;

 

• 事件委托是什么？

利用事件冒泡的原理，使自己的所触发的事件，让它的父元素代替执行！优点：

①提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。

②动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。

 

• 事件绑定有哪些方法？

①直接在DOM里绑定事件：<div οnclick="test()"></div>

②在JS里通过onclick绑定：xxx.onclick = test 

③使用事件监听绑定事件：addEventListener(xxx, "test()", test) ，详情见下。

 

• 如何理解事件监听？

W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

起初Netscape制定了JavaScript的一套事件驱动机制（即事件捕获）。随即IE也推出了自己的一套事件驱动机制（即事件冒泡）。最后W3C规范了两种事件机制，分为捕获阶段、目标阶段、冒泡阶段。IE8以前IE一直坚持自己的事件机制（前端人员一直头痛的兼容性问题），IE9以后IE也支持了W3C规范。

W3C规范语法：element.addEventListener(event, function, useCapture)

event : （必需）事件名，如click，不加on，支持所有 DOM事件 。

function：（必需）指定要事件触发时执行的函数。

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

IE标准语法：element.attachEvent(event, function)

event：（必需）事件类型。需加“on“，例如：onclick。

function：（必需）指定要事件触发时执行的函数。

优点：

①可以绑定多个事件，依次执行，常规的onclick事件绑定只执行最后绑定的事件。

②可以解除相应的绑定，如下。

<input type="button" value="click me" id="btn5">
 
<script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
btn5.removeEventListener("click",hello2);
 
function hello1(){
 alert("hello 1");
}
function hello2(){
 alert("hello 2");
}
</script>

 

• JavaScript的window.onload事件和jQuery的ready函数有何不同？

JavaScript的window.onload事件除了要等待DOM被创建，还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在window.onload 事件上的代码在执行时有明显的延迟。

jQuery的ready()函数只需对DOM树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。

使用jQuery $(document).ready()的另一个优势是你可以在网页里多次使用它，浏览器会按它们在HTML页面里出现的顺序执行它们，相反对于onload而言，只能在单一函数里使用。鉴于这个好处，用jQuery的ready()函数比用JavaScript的window.onload 事件要更好些。

 

• jQuery页面加载初始化的3种方法？

$(document).ready(function(){ 
　　// 我是第一种写法，完整版
});
$(function(){ 
　　// 我是第二种写法，简写版 
}); 
jQuery(function($) {  
    // 我是第三种写法，简写版 
});

window.onload = function(){ 
　　// do sth 
}

①执行的时机不同 

$(document).ready()在 DOM 结构绘制完成后就可执行 ；

window.onload要等整个窗口（包括图片）都加载完才触发执行 ；
 

②编写的个数 

$(document).ready()可以编写多个，每个都生效；

window.onload 编写多个时，只有最后的那起作用；

③简化写法

$(document).ready()有两种简写方法；

window.onload 无，jQuery中真正与 window.onload完全等价的是$(window).load()方法；

 

• 页面有一个名字为name的id，设置id的内容为‘aaaa’，字体颜色设置为黑色(用原生js)？

var dom = document.getElementById("name");

dom.innerHTML = "aaaa";

dom.style.color = "#000";

 

• 如何理解js中的this？

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象。

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();