JavaScript(一)

get请求传参长度的误区

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

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

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

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

说一下闭包

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

说一下类的创建和继承

类的创建（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或省略不写时，在事件冒泡阶段调用事件处理函数。

事件委托

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

图片的懒加载

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

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

mouseover和mouseenter的区别

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

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

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

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

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);

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) ;

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的区别）

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

主要应用场景：

call 经常做继承
apply 经常跟数组有关系。例如用于借助于数组对象实现数组最大值最小值
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:延迟执行（运行到需加载，根据顺序执行）

前端复习记录（前端基础 JavaScript）一相关推荐

前端复习HTML+CSS+JavaScript（必问面试题）
前端复习 HTML 常见的几种图片格式以及他们之间的区别是什么? JPG:支持有损压缩.不支持透明.不支持动画.色彩还原度较好 PNG:不支持压缩.支持透明.半透明.不透明.不支持动画 GIF:支持有 ...
Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
前端学习记录 —— JavaScript（一）
前端学习记录 -- JavaScript(一) 前言一.初识 JavaScript JavaScript 的特点 JavaScript的作用编程语言与标记语言的区别 HTML/CSS/JS 的关系 ...
Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
学习前端需要掌握什么基础？
学习前端需要掌握什么基础?前端基础包含HTML.CSS层叠样式表.JavaScript.HTML5.CSS3.jQuery等内容.掌握了HTML+CSS+Javascript这三门技术就算入门前端了, ...
自学和参加web前端培训班需要什么基础
web前端是目前IT行业中比较热门的一个分支.因为web前端入门相对比较简单,所以经常有学员想要了解能不能自学.自学和参加web前端培训班,都是可以考虑的学习方法,但是要结合自身的情况来看.接下来,w ...
前端复习8：JS高级
前端复习8:JS高级 1.对象 1.1 面向过程与面向对象 1.2 对象与类 2 构造函数和原型 2.1 构造函数 2.2 构造原型prototype 2.2 对象原型 2.3 constructor ...
大型医院云HIS系统：采用前后端分离架构，前端由Angular语言、JavaScript开发；后端使用Java语言开发融合B/S版电子病历系统
一套医院云his系统源码采用前后端分离架构,前端由Angular语言.JavaScript开发:后端使用Java语言开发.融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知 ...

前端复习记录（前端基础 JavaScript）一