JavaScript(一)

get请求传参长度的误区

误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。

实际上 HTTP 协议 未规定 GET 和 POST 的长度限制，GET 的最大长度显示是因为浏览器和 web 服务器限制了 URI 的长度，不同的浏览器和WEB服务器，限制的最大长度是不一样的。

补充get和post请求在缓存方面的区别

• get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
• post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此get请求适合于请求缓存。

说一下闭包

闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。
闭包的作用是延长变量的作用域。

说一下类的创建和继承

1. 类的创建（ES5）
   创建一个animal类的例子

        function animal(name){// 属性this.name = name || 'Animal'// 实例方法this.sleep = function(){console.log(this.name + '正在睡觉');}}// 原型方法animal.prototype.eat = function(food){console.log(this.name + '正在吃：' +food);}var test = new animal('袋鼠');test.sleep()

（ES6）

        class animal {// 构造函数constructor(name) {this.name = name || 'Animal'}// 实例方法sleep () {console.log(this.name + '正在睡觉');}}avar test = new animal('袋鼠');test.sleep()

2.类的继承
原型链继承

function Cat(){ }
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true

在上述的代码中，new了一个空的对象，这个空对象指向Animal并且cat.prototype指向这个空对象，这个就是基于原型链的继承

特点：基于原型链，既是父类的实例，也是字类的实例
缺点：无法实现多继承

ES6

            class name{constructor(name){this.name = name}printName(){console.log(this.name);}}class person extends name{constructor(name){super(name)//调用父类中的构造函数，必须在字类的构造函数参数之前this.name = name}}var son = new person("kinjaze")son.printName()

如何解决异步回调问题

可以使用promise、async/await、generator（没有使用过不是很熟悉）。

前端中的事件流

• 定义：从页面中接收事件的顺序
• 一般包括这么几个阶段 事件捕获->目标阶段-> 事件冒泡阶段

如何让事件先冒泡后捕获

addEventListener(type,listenner，[userCapture])的第三个参数如果为true则在事件捕获阶段调用事件处理函数，默认为false。当为false或省略不写时，在事件冒泡阶段调用事件处理函数。

事件委托

1. 定义：不直接在事件发生的dom元素身上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素监听到子元素上事件的触发，通过判断事件发生元素dom的类型，来做出不同的响应。
2. 例子：无序列表的事件监听，例如我们在添加事件的时候，采用事件委托机制，不会在 li 标签上直接添加，而是在 ul 父元素上添加
3. 好处：适合动态元素的绑定，新添加的子元素也会有事件触发机制。

图片的懒加载

• 预加载：提前加载的图片，当用户需要查看时可直接从本地缓存中渲染
• 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求的次数或者延迟请求次数，在用户需要观看时再请求图片资源

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是缓存甚至不加载。懒加载会缓解服务器前端的压力，预加载会增加服务器前端的压力

mouseover和mouseenter的区别

• mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout
• mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave

js的new操作符做了哪些事情

new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象。

改变this指向的方法 call( ) apply( ) bind( )

1. call（）

调用这个函数,并且修改函数运行时的this指向
fun.call (thisArg, arg1, arg2, ...)1、thisArg :当前调用函数this的指向对象
2、arg1 , arg2 :传递的其他参数例子：
function fn(x, y) {console.log('我想喝手磨咖啡' );console.log(this);console.1og(x + y);
}var O={name :'andy'
};
// 1. call() 可以调用函数
// 2. call() 可以改变这个函数的this指向 此时这个函数的this就指向了o这个对象
fn.call(O, 1, 2);

2. apply（）

apply()方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的this指向。
fun.apply (thisArg, [argsArray])
●thisArg :在fun函数运行时指定的this值
●argsArray :传递的值,必须包含在数组里面
●返回值就是函数的返回值,因为它就是调用函数例子：
var o ={
name :'andy'
};
function fn(arr) {console.log(this);console.1og(arr);
};
fn.apply(o, [' pink']);
//1.也是调用函数
//2.参数必须是数组(伪数组)
//3. apply 的主要应用比如说我们可以利用apply 借助于数学内置对象求最大值
Math. max();
var arr = [1, 66, 3, 99, 4];
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min) ;

3. bind（）

bind()方法不会调用函数。但是能改变函数内部this指向
fun.bind (thisArg, arg1, arg2, .. .)●thisArg :在fun函数运行时指定的this值
●arg1 , arg2 :传递的其他参数
●返回由指定的this值和初始化参数改造的原函数拷贝例子
var o={name :'andy'
};
function fn(a,b) {console.1og(this);console.log(a+b)
};
var f = fn.bind(o,1,2);
f();
// 1.不会调用原来的函数	可以改变原来函数内部的this指向
// 2.返回的是原函数改变this之后产生的新函数

改变函数内部this指针的指向函数（bind，apply，call的区别）

1. call 和 apply 会调用函数并且改变函数内this指向
2. call 和 apply 传递的参数不一样，第一个参数都是要改变指向得对象，第二个参数call 传递参数 arg1，arg2 … 形式，apply第二个参数必须是数组
3. bind 不会调用函数，可以改变函数内部 this 指向

主要应用场景：

1. call 经常做继承
2. apply 经常跟数组有关系。例如用于借助于数组对象实现数组最大值最小值
3. bind 不调用函数但是还想改变this 指向 ，例如改变定时器内部的 this 指向。

js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别

• clientHeight：表示的是可视区域的高度，不包含border和滚动条
• offsetHeight：表示可视区域的高度，包含了border和滚动条
• scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
• clientTop：表示边框border的厚度，在未指定的情况下一般为0
• scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

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都会执行这条语句就是不需要保存缓存记录。

如何理解前端模块化

前端模块化就是复杂的文件编程一个一个独立的模块，比如js文件等等，分成独立的模块有利于重用（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问题，所以有了commonJS规范，AMD，CMD规范等等，以及用于js打包（编译等处理）的工具webpack

Commonjs、AMD和CMD

• CommonJs用在服务器端，AMD和CMD用在浏览器环境
• AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
• CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
• AMD:提前执行（异步加载：依赖先执行）+延迟执行
• CMD:延迟执行（运行到需加载，根据顺序执行）