前端开发者一定要会的知识点4

**["1", "2", "3"].map(parseInt) 答案是多少？

parseInt() 函数能解析一个字符串，并返回一个整数，需要两个参数 (val, radix)，其中 radix 表示要解析的数字的基数。【该值介于 2 ~ 36 之间，并且字符

串中的数字不能大于radix才能正确返回数字结果值】;

但此处 map 传了 3 个 (element, index, array),我们重写parseInt函数测试一下是否符合上面的规则。

 function parseInt(str, radix) {
     return str+'-'+radix;
 };
 var a=["1", "2", "3"];
 a.map(parseInt);  // ["1-0", "2-1", "3-2"] 不能大于radix

因为二进制里面，没有数字3,导致出现超范围的radix赋值和不合法的进制解析，才会返回NaN，所以["1", "2", "3"].map(parseInt)

答案也就是：[1, NaN, NaN]

**事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

 （1）我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。

（2）事件处理机制：IE是事件冒泡、Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件；

（3）ev.stopPropagation();（旧IE的方法 ev.cancelBubble = true;）

**什么是闭包（closure），为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数

创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量方

法传递到外部。

 闭包的特性：函数内再嵌套函数
                          内部函数可以引用外层的参数和变量
                          参数和变量不会被垃圾回收机制回收

//li节点的onclick事件都能正确的弹出当前被点击的li索引
  <ul id="testUL">
     <li> index = 0</li>
     <li> index = 1</li>
     <li> index = 2</li>
     <li> index = 3</li>
 </ul>
 <script type="text/javascript">
   	var nodes = document.getElementsByTagName("li");
 	for(i = 0;i<nodes.length;i+= 1){
 	    nodes[i].onclick = (function(i){
 	              return function() {
 	                 console.log(i);
 	              } //不用闭包的话，值每次都是4
 	            })(i);
 	}
 </script>

执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在，使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源

因为say667()的内部函数的执行需要依赖say667()中的变量这是对闭包作用的非常直白的描述 

 function say667() {
     // Local variable that ends up within closure
     var num = 666;
     var sayAlert = function() {
         alert(num);
     }
     num++;
     return sayAlert;
 }

  var sayAlert = say667();
  sayAlert()//执行结果应该弹出的667

**javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,

 使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。

默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;

全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；

消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;

 提高编译器效率，增加运行速度；

为未来新版本的Javascript标准化做铺垫。

**如何判断一个对象是否属于某个类？

使用instanceof （待完善）
    if(a instanceof Person){
        alert('yes');
    }

**new操作符具体干了什么呢?

（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

（2）属性和方法被加入到 this 引用的对象中。

（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

 var obj  = {};
 obj.__proto__ = Base.prototype;
 Base.call(obj);

**Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

 javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性

该属性必须是对象本身的一个成员。
 使用方法：object.hasOwnProperty(proName)

其中参数object是必选项。一个对象的实例。

proName是必选项。一个属性名称的字符串值。

 如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。

**JSON 的了解？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

如：{"age":"12", "name":"back"}

 （1）JSON字符串转换为JSON对象:

 var obj =eval('('+ str +')');
 var obj = str.parseJSON();
 var obj = JSON.parse(str);

 （2）JSON对象转换为JSON字符串：

var last=obj.toJSONString();
 var last=JSON.stringify(obj);

**[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 能解释一下这段代码的意思吗？

可在浏览器控制台输入查看效果。会发现HTML层都被使用不同的颜色添加了一个高亮的边框；

[].forEach.call()等价于Array.prototype.forEach.call()；

可以在浏览器控制台中输入$$('a')，然后就能得到一个当前页面中所有锚元素的列表；

$ $函数是许多现代浏览器命令行API中的一个部分，它等价于document.querySelectorAll,你可以将一个CSS选择器作为这个函数的参数，然后你就能够获得当前页面中所有匹配这个CSS选择器的元素列表。如果你在浏览器控制台以外的地方，你可以使用document.querySelectorAll('')来代替$ $('')；

outline属性位于CSS盒模型之外，因此它并不影响元素的属性或者元素在布局中的位置；

~~的作用相当于parseInt；

1<<24，也就是1向左移24位，也就是2的24次方；

toString(16)把数字转换成16进制的字符串；

通过上面代码可以获取到一个随机的颜色值。

**js延迟加载的方式有哪些？

 defer和async、动态创建DOM方式（用得最多）、按需异步载入js

**Ajax 是什么? 如何创建一个Ajax？

ajax的全称：Asynchronous Javascript And XML。

异步传输+js+xml。

所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后

续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

• 创建XMLHttpRequest对象,也就是创建一个异步调用对象
• 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
• 设置响应HTTP请求状态变化的函数
• 发送HTTP请求
• 获取异步调用返回的数据
• 使用JavaScript和DOM实现局部刷新

**Ajax 解决浏览器缓存问题？

• 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
• 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
• 在URL后面加上一个随机数： "fresh=" + Math.random();。
• 在URL后面加上时间戳："nowtime=" + new Date().getTime();。
• 如果是使用jQuery，直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

**同步和异步的区别?

同步的概念应该是来自于OS中关于同步的概念：不同进程为协同完成某项工作而在先后次序上调整（通过阻塞，唤醒等方式）。同步强调的是顺序性，谁先谁后，异步则不存在这种顺序性。

• 同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容，进行下一步操作。
• 异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

**如何解决跨域问题？

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域  

出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用

标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了

获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这是解决跨域问题的主流解决

方案  

**页面编码和被请求的资源编码如果不一致如何处理？

对于ajax请求传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式

不同，所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理，

后台开发 语言都有相应的解码api。对于post请求不需要进行编码

**服务器代理转发时，该如何处理cookie？

 nginx

**模块化开发怎么做？

立即执行函数、不暴露私有成员

var module1 = (function(){
     　　　　var _count = 0;
     　　　　var m1 = function(){
     　　　　　　//...
     　　　　};
     　　　　var m2 = function(){
     　　　　　　//...
     　　　　};
     　　　　return {
     　　　　　　m1 : m1,
     　　　　　　m2 : m2
     　　　　};
     　　})();

**AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

 Asynchronous Module Definition，异步模块定义，所有的模块将被异步加载，模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。

  区别：

     1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
     2. CMD 推崇依赖就近，AMD 推崇依赖前置。

// CMD
 define(function(require, exports, module) {
     var a = require('./a')
     a.doSomething()
     // 此处略去 100 行
     var b = require('./b') // 依赖可以就近书写
     b.doSomething()
     // ...
 })

 // AMD 默认推荐
 define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
     a.doSomething()
     // 此处略去 100 行
     b.doSomething()
     // ...
 })

**异步加载JS的方式有哪些？

   (1) defer，只支持IE

   (2) async：

   (3) 创建script，插入到DOM中，加载完毕后callBack
 

**documen.write和 innerHTML的区别

  document.write只能重绘整个页面

  innerHTML可以重绘页面的一部分
 

**DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

（1）创建新节点
    createDocumentFragment()    //创建一个DOM片段
    createElement()   //创建一个具体的元素
    createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入
    appendChild()
    removeChild()
    replaceChild()
    insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找
    getElementsByTagName()    //通过标签名称
    getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
    getElementById()    //通过元素Id，唯一性
 

.**call() 和 .apply() 的区别？

例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);

   注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。   

  function add(a,b)
     {
         alert(a+b);
     }

     function sub(a,b)
     {
         alert(a-b);
     }

     add.call(sub,3,1);

**jquery.extend 与 jquery.fn.extend的区别？

jquery.extend 为jquery类添加类方法，可以理解为添加静态方法

jquery.fn.extend:源码中jquery.fn = jquery.prototype，所以对jquery.fn的扩展，就是为jquery类添加成员函数
 

使用：
 jquery.extend扩展，需要通过jquery类来调用，而jquery.fn.extend扩展，所有jquery实例都可以直接调用。

**Jquery与jQuery UI 有啥区别？

 jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

 jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

**jquery 中如何将数组转化为json字符串，然后再转化回来？

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

	$.fn.stringifyArray = function(array) {
	    return JSON.stringify(array)
	}

	$.fn.parseArray = function(array) {
	    return JSON.parse(array)
	}

	然后调用：
	$("").stringifyArray(array)

**针对 jQuery 的优化方法？

（1）基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。

（2）频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。

比如：var str=$("a").attr("href");

（3）for (var i = size; i < arr.length; i++) {}

 for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：

for (var i = size, length = arr.length; i < length; i++) {}

**jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?

 jquery stop(): 如：$("#div").stop().animate({width:"100px"},100);

**那些操作会造成内存泄漏？

 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数

量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回

收。

 setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

**JQuery一个对象可以同时绑定多个事件，这是如何实现的？

 （1）多个事件同一个函数：
     $("div").on("click mouseover", function(){});

（2）多个事件不同函数
     $("div").on({
         click: function(){},
         mouseover: function(){}
     });