前端基础面试题(JavaScript部分)

1、什么是JavaScript?

基于对象和事件驱动可解释性脚本语言

2、JavaScript与ECMAScript的关系?

JavaScript是ECMAScript的表现,ECMAScript是JavaScript的规范

3、变量的命名规则?

1.名字见名知义,遵循驼峰标识。例:userName passWord

2.变量名只能以字母,_,$开头

3.不能使用关键和保留字

4.变量名不要相同(后面的会覆盖前面)

4、window.onload的作用?

window.onload是等文档和资源都加载完成后调用的事件,保证js获取元素的时候,已经加载。

5、js数据类型?

基本数据类型:Number String Boolean null undefined

复杂类型:Object(array,function,object)

6、js有哪些内置对象?

数据封装类对象:Object、Array、Boolean、Number 和 String

其他对象:Function、Arguments、Math、Date、RegExp、Error

7、this对象的理解

this存在任何地方,不同环境代表不同的含义,取决于调用时的环境。

A.事件处理函数中的this---触发事件的对象

document.onclick = function(){ alert(this) }

B.普通函数中的this---window

function sum(){ alert(this)} sum()

8、eval是做什么的?

它的功能是把对应的字符串解析成JS代码并运行;

应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。

由JSON字符串转换为JSON对象的时候可以用eval,var obj =eval('('+ str +')')。

9、null和undefined的区别?

undefined:

(1)变量被声明了,但没有赋值时,就等于undefined。

(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。

(3)对象没有赋值的属性,该属性的值为undefined。

(4)函数没有返回值时,默认返回undefined。

Undefined:访问一个未初始化变量(声明完没有赋值的变量)返回的值,表示空变量

null:

(1) 作为函数的参数,表示该函数的参数不是对象。

(2) 作为对象原型链的终点。

Null访问一个不存在对象返回的值,表示空对象,转为数值时为NaN。

10、运算符的种类?

算术运算符,赋值运算符,比较运算符,逻辑运算符,三目运算符

4、☆var a = 10;var b = a++; a、b最后的结果是?

a=11 b=10

11、“==”与“===”的区别?

==,判断相等,判断的过程中会隐式转换为number类型进行比较 “10”==10 true

=== 恒等,严格相等,“10”===10 false

12、☆console.log(0.1+0.2 == 0.3)。

False,有些小数在运算的过程中会出现偏差,因此最好不要用小数作为判断条件

13、☆NaN会在什么样的情况下出现呢?列举出现这种情况的代码。

NaN:not a number

A.自己定义

B.运算过程中出现错误,原本应该是数字的地方出现一些不能转换为数字的值

10+“s” ,Number(“s”),

14、☆列举三种强制类型转换和2种隐式类型转换。

Number(“10”); 强转为Number

parseInt(“10.5”);强转为number,取整

parseFloat(“10.5”);强转为number,保留小数

String(10); 强转为字符串

10.toString(); 强转为字符串

“10”+20 ; 1020 +号遇到字符串变成连接符,20隐式转换为字符串

1+true; 2 true隐式转换为1

10==“10” “10”隐式转换为10

15、document.write()与innerHTML的区别?

document.write:

操作body的内容

会覆盖之前已经存在的body中的内容,document.write添加的内容会叠加

innerHTML:

操作所有闭合标签的内容

会覆盖之前的所有内容

16、写一个获取非行间样式的函数

function getStyle(elem,attr) {//elem元素,attr属性
if(elem.currentStyle){//ie
return elem.currentStyle[attr];
}else{//标准
return getComputedStyle(elem)[attr];
}
}

17、说说你对作用域链的理解?

作用域链是js中的一种查找机制,从当前作用域查找,当前作用域没有往上一级作用域查找,一直到最外层,如果都找不到则是is not define

作用域链是js中的一种查找机制,从当前作用域查找,当前作用域没有往上一级作用域查找,一直到最外层,如果都找不到则是is not define

18、请解释变量提升?

浏览器解析js代码至少会经过两个过程,预解析和逐步执行
预解析:找东西var,function,如果找到var,会在内存中存储变量没有值,function则会存储整个函数
逐步执行:逐行执行代码
console.log(a); //undefined 不会报错 找到var存储了变量a,但是没有赋值默认为undefined
var a = 10; //给内存中的a赋值10
console.log(a); //10

//2.function
console.log(sum); //整个函数,找到函数会将整个函数都存储在内存中
sum(); //存储了整个函数,因此可以在前面调用
function sum() {
console.log(10+20);
}

19、JavaScript两种变量范围有什么不同?

Js中两种变量,全局变量和局部变量

全局变量:函数外声明,在任何地方都能被修改和访问,会一直存储在内存中

局部变量:函数内声明,只能在函数内部使用,出了函数{}就会被销毁

20、定时器的分类?他们的区别及用法是什么?

Js中有两种定时器:setInterval:间歇执行,setTimeout:延迟执行

setInterval(函数,时间) 时间单位ms,

语法:setInterval(function(){},1000); 隔一秒执行函数一次

一般用于倒计时,轮播图

setTimeout(函数,时间) 时间单位ms,

语法:setTimeout(function(){},1000); 延迟一秒执行函数一次,只会执行一次

一般用于广告,广告弹出层

21、js有哪些对象?

原生对象:Object,Function ,Array, String, Date, Boolean, Number,RegExp,Error

内置对象:Global(全局 window,documet),Math

宿主对象:DOM BOM

全局对象:window

22、有这样一个url:http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e,请写
一段js程序提取url中各个get参数(参数名和参数个数不确定),将其key-value
形式返回到一个json结构中,如{a:“1”,b:“2”,c:“”,d:“xxx”,e:undefined}

var str = "http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e";
var json = {}; //存储
var arr = str.substring(str.indexOf("?")+1).split("&");//获取?后面的,并且按&分割
for(var i = 0;i var a = arr[i].split("=");
json[a[0]] = a[1]||"";
}
console.log(json);

var json = {}; //存储

var arr = str.substring(str.indexOf("?")+1).split("&");//获取?后面的,并且按&分割

for(var i = 0;i

var a = arr[i].split("=");

json[a[0]] = a[1]||"";

}

console.log(json);

23、DOM怎样添加、移除、移动、复制、创建和查找节点

获取子节点

父节点.children

父节点.childNodes

获取父节点

子节点.parentNode

子节点.offsetParent

创建

document.createElement(‘标签名’)

document.createTextNode(‘文本内容’)

添加

父节点.appendChild(子节点)

父节点.insertBefore(newChild,refChild)

复制

被复制的节点.cloneNode(true)

删除:

节点.remove()

父节点.removeChild(子节点)

替换

父节点.replaceChild(newChild,refChild)

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

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

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

(3)新创建的对象由 this 所引用,并且最后隐式的返回 this 。

25、JSON 的了解?

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

格式:采用键值对,例如:{'age':'12', 'name':'back'}

26、call() 和 apply() 的区别和作用?

apply()函数有两个参数:第一个参数是上下文,第二个参数是参数组成的数组。如果上下文是null,则使用全局对象代替。

如:function.apply(this,[1,2,3]);

call()的第一个参数是上下文,后续是实例传入的参数序列。

如:function.call(this,1,2,3);

27、哪些常见操作会造成内存泄漏?

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

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

28、如何解决跨域问题

JSONP:
原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。
由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
优点是兼容性好,简单易用,支持浏览器与服务器双向通信。缺点是只支持GET请求。
JSONP:json+padding(内填充),顾名思义,就是把JSON填充到一个盒子里

29、javascript垃圾回收方法

标记清除(mark and sweep)

这是JavaScript最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”。

垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了

引用计数(reference counting)

在低版本IE中经常会出现内存泄露,很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数,当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1,如果该变量的值变成了另外一个,则这个值得引用次数减1,当这个值的引用次数变为0的时 候,说明没有变量在使用,这个值没法被访问了,因此可以将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

30、创建对象的方式?

1.字面量创建
var obj = {
name:"web",
eat:function(){}
}
缺点:代码冗余,适合单个对象创建

2.实例创建
var obj = new Object();
obj.name = "web";
obj.eat = function(){}
缺点:代码冗余,适合单个对象创建

3.工厂模式创建
function createObj(name){
var obj = new Object();
obj.name = name;
obj.eat = function(){}
return obj
}
createObj(“web”);
缺点:识别不明确

4.构造函数创建
function Student(name){
//new Object
this.name = name;
this.eat = function(){}
}
new Student(name)
缺点:浪费内存

5.原型创建
原型对象:prototype ,构造函数中,共享的一块区域
原型属性:proto,实例对象中,指向原型对象
function Student(){}
Student.prototype.name = "web";
Student.prototype.eat = function(){}

new Student();
缺点:不能传参

6.混合创建,构造函数(可变的)+原型(共享,不变的)
function Student(name){
this.name = name;
}
Student.prototype.eat = function(){

}

31、列举IE 与其他浏览器不一样的特性?

(1)IE支持currentStyle,FIrefox使用getComputStyle

(2)IE 使用innerText,Firefox使用textContent

(3)滤镜方面:IE:filter:alpha(opacity= num);Firefox:-moz-opacity:num

(4)事件方面:IE:attachEvent:火狐是addEventListener

(5)鼠标位置:IE是event.clientX;火狐是event.pageX

(6)IE使用event.srcElement;Firefox使用event.target

(7)IE中消除list的原点仅需margin:0即可达到最终效果;FIrefox需要设置margin:0;padding:0以及list-style:none

(8)CSS圆角:ie7以下不支持圆角

32、怎么解决跨域问题?

通过jsonp解决跨域,即通过script标签的src属性引入一个js文件,通过回调函数将数据返回

$(“head”).append(‘

同理,如果你的页面是utf-8的,引入的js是gbk的,那么就需要加上charset="gbk".

33、javascript继承的6种方法

(1)原型链继承

(2)借用构造函数继承

(3)组合继承(原型+借用构造)

(4)原型式继承

(5)寄生式继承

(6)寄生组合式继承

34、创建ajax的过程

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

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

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

(4)发送HTTP请求.

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

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

35、ajax的缺点

(1)ajax不支持浏览器back按钮。

(2)安全问题 AJAX暴露了与服务器交互的细节。

(3)对搜索引擎的支持比较弱。

(4)破坏了程序的异常机制。

(5)不容易调试。

40、说说严格模式的限制

严格模式主要有以下限制:

变量必须声明后再使用

函数的参数不能有同名属性,否则报错

不能使用with语句

不能对只读属性赋值,否则报错

不能删除不可删除的属性,否则报错

禁止this指向全局对象

36、例举强制类型转换和隐式类型转换?

强制(parseInt,parseFloat,number)

隐式(== – ===)

37、数组方法pop() push() unshift() shift()

Push()尾部添加,pop()尾部删除;Unshift()头部添加,shift()头部删除

38、ajax请求的时候get 和post方式的区别

①一个在url后面,一个放在虚拟载体里面;

②有大小限制;

③安全问题;

39、ajax请求时,如何解释json数据

使用eval parse,鉴于安全性考虑,使用parse更靠谱。

40、javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合

41、JavaScript原型,原型链 ?

js原型?

js每声明一个function,都有prototype原型,prototype原型是函数的一个默认属性,在函数的创建过程中由js编译器自动添加。

也就是说:当生产一个function对象的时候,就有一个原型prototype。

当你定义一个函数对象的时候,其内部就有这样一个链表关系。实例化的对象,自带了proto的属性,而这个属性指向了prototype,从而实现对象的扩展(例如继承等操作)。

42、Javascript作用链域?

JavaScript中所有的量都是存在于某一个作用域中的

除了全局作用域, 每一个作用域都是存在於某个作用域中的

在试图访问一个变量时JS引擎会从当前作用域开始向上查找直到Global全局作用域停止

43、什么是闭包(closure),为什么要用它?

闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数内部的变量和方法传递到外部。

闭包的特性:

(1)函数内再嵌套函数

(2)内部函数可以引用外层的参数和变量

(3)参数和变量不会被垃圾回收机制回收

44、documen.write和 innerHTML的区别?

write是DOM方法,向文档写入HTML表达式或JavaScript代码,可列出多个参数,参数被顺序添加到文档中 ;innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。

45、谈一下Jquery中的bind(),live(),delegate(),on()的区别?

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

$("a").bind("click",function(){alert("ok");});

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的

$("a").live("click",function(){alert("ok");});

delegate(selector,[type],[data],fn) 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

$("#container").delegate("a","click",function(){alert("ok");})

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

差别:

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。

.delegate()则是更精确的小范围使用事件代理,性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

46、你有用过哪些前端性能优化的方法?

(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。

(2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数

(3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。

(4) 当需要设置的样式很多时设置className而不是直接操作style。

(5) 少用全局变量、缓存DOM节点查找的结果。

(6) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

(7) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。

47、JS变量命名规则和规范

声明变量:var

当创建一个变量时会在内存中的栈区开辟一个新的空间

变量命名规则和规范:

规则:

1.由字母、数字、下划线、$符号组成,不能以数字开头

2.不能是关键字和保留字,例如:for,while,this,name

3.区分大小写

规范:

1.变量名必须有意义

2.遵守驼峰命名法

3.建议不要用$作为变量名

53、window.onload()和$(function(){});的区别

1、window.onload必须等到页面中所有元素加载完之后才会执行(包括图片、视频等)而$(function(){});是在结构绘制完毕之后执行,二者的执行时机是不同的,一般来说后者会首先执行

2、window.onload只能存在一个,即时存在多个也只会执行一个;而$(function(){})则可以存在多个,且多个都会执行;

3、window.onload只有一种写法,而(document).ready(function(){});效果一样。

484、js预解析?

在当前作用域下,js运行之前,会把带有var和function关键字的事先声明,并在内存中安排好。然后再从上到下执行js语句

49、js字符串常用方法

charAt(num) // 得到指定索引位置的单字符

charCodeAt(num) // 得到指定索引位置字符的Unicode值

indexOf("str") // 取str第一次出现的索引

replace( "oldStr" , "newStr" ) // 找到oldStr替换为newStr

slice( start , end ) // 其对象可以是字符串or数组 , 记得其范围不包括end

substr( start , length ) // 从索引start开始取length个字符 , length不可小于0否则返回空字符串

50、数组去重?

var arr = [1,1,2,3,4,2,2,2];

for(var i=0;i

console.log(arr);

51、Table 对象集合有哪些?

cells[] 返回包含表格中所有单元格的一个数组。

语法:tableObject.cells[]

rows[] 返回包含表格中所有行的一个数组。

rows 集合返回表格中所有行的一个数组。该集合包括 thead、tfoot 和 tbody 中定义的所有行。

tBodies[] 返回包含表格中所有 tbody 的一个数组。

52、BOM对象里面的常用方法

close():关闭窗口

print():打印窗口

open([url],[name],[options]):打开一个新窗口

window.setTimeout(“code”,1000);

53、BOM对象有哪些,列举window对象?

1、window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性;

2、document对象,文档对象;

3、location对象,浏览器当前URL信息;

4、navigator对象,浏览器本身信息;

5、screen对象,客户端屏幕信息;

6、history对象,浏览器访问历史信息;

54、 jQuery 库中的 $() 是什么?

() 函数是 jQuery() 函数的别称,乍一看这很怪异,还使 jQuery 代码晦涩难懂。一旦你适应了,你会爱上它的简洁。() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数,它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。这个问题我已经见过好几次被提及,尽管它非常基础,它经常被用来区分一个开发人员是否了解 jQuery。

55、$(this) 和 this 关键字在 jQuery 中有何不同?(答案如下)

这对于很多 jQuery 初学者来说是一个棘手的问题,其实是个简单的问题。(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等。而 this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被() 函数包裹,例如 $(this)。

56、JQuery有几种选择器?

(1)、基本选择器:#id,class,element,*;

(2)、层次选择器:parent>child,prev+next,prev~siblings

(3)、基本过滤器选择器::first,:last,:not,:even,:odd,:eq,:gt,:lt

(4)、内容过滤器选择器::contains,:empty,:has,:parent

(5) 、可见性过滤器选择器::hidden,:visible

57、jQuery 有哪些好处?

jQuery 是轻量级的 javascript 框架

强大的选择器

出色的 DOM 操作的封装

可靠的事件处理机制

完善的 ajax 封装

出色的浏览器的兼容性

支持链式操作,隐式迭代

支持丰富的插件

58、为什么要使用jquery?

因为jQuery是轻量级的框架,大小不到30kb,它有强大的选择器,出色的DOM操作的封装,有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠),完善的ajax(它的ajax封装的非常的好,不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题。) 出色的浏览器的兼容性。 而且支持链式操作,隐式迭代。行为层和结构层的分离,还支持丰富的插件,jquery的文档也非常的丰富。

59、jquery对象和dom对象是怎样转换的?

jquery转DOM对象:jQuery 对象是一个数组对象,可以通过[index]的丰富得到相应的DOM对象还可以通过get[index]去得到相应的DOM对象。DOM对象转jQuery对象:$(DOM对象)

60、如何使用jquery中的ajax的?

如果是一些常规的ajax程序的话,使用load(),.post(),就可以搞定了,一般我会使用的是.post() 方法。如果需要设定beforeSend(提交前回调函数),error(失败后处理),success(成功后处理)及complete(请求完成后处理)回调函数等,这个时候我会使用.ajax()

61、在jquery中你是如何去操作样式的?

addClass() 来追加样式 ,removeClass() 来删除样式,toggle() 来切换样式

62、jquery中的动画,是怎样用的?

hide() 和 show() 同时修改多个样式属性。像高度,宽度,不透明度。 fadeIn() 和fadeOut() fadeTo() 只改变不透明度

slideUp() 和 slideDown() slideToggle() 只改变高度

animate() 属于自定义动画的方法.

63、jquery中使用过哪些插入节点的方法,它们的区别是什么?

append(),appendTo(),prepend(),prependTo(),after(),insertAfter(),before(),insertBefore() 大致可以分为 内部追加和外部追加append() 表式向每个元素内部追加内容。appendTo()表示 讲所有的元素追加到指定的元素中。例$(A)appendTo(B) 是将A追加到B中下面的方法解释类似。

64、js去除字符串空格(空白符)

使用js去除字符串内所带有空格,有以下三种方法:

( 1 ) replace正则匹配方法

去除字符串内所有的空格:str = str.replace(/\s*/g,"");

去除字符串内两头的空格:str = str.replace(/^\s|\s$/g,"");

去除字符串内左侧的空格:str = str.replace(/^\s*/,"");

去除字符串内右侧的空格:str = str.replace(/(\s*$)/g,"");

( 2 ) str.trim()方法

trim()方法是用来删除字符串两端的空白字符并返回,trim方法并不影响原来的字符串本身,它返回的是一个新的字符串。

缺陷:只能去除字符串两端的空格,不能去除中间的空格

65、什么是window对象? 什么是document对象?

window是js中最大的对象,表示窗口,包含document

document文档对象,表示HTML

66、offsetWidth、clientWidth、scrollTop的区别?

offsetWidth:占位宽,包含 内容宽+左右padding+左右border

clientWidth:可视宽,包含 内容宽+左右padding

scrollTop:页面被卷去的高

67、如何获取url地址中搜索内容?

window.location.search

68、事件、IE与火狐的事件机制有什么区别?

IE的事件流是冒泡流,而火狐同时支持冒泡流和捕获流。

69、如何阻止冒泡?

ev.stopPropagation?ev.stopPropagation():ev.cancelBubble = true;

70、事件绑定和普通事件有什么区别。

标签.事件:如果给同一个元素添加同一个事件,后面的会覆盖前面

事件绑定:可以给同一个元素添加同一个事件,不会被覆盖

71、如何用原生js给元素绑定两个click事件?

oDiv.addEventListener('click',fun1);

oDiv.addEventListener('click',fun2);

72、解释一下事件流?

事件捕获阶段:当事件发生的时候,将事件从window依次往子元素传递

确定目标阶段:确定事件目标

事件冒泡阶段:事件目标开始处理事件,处理完以后会将事件依次传递给父元素,一直到window

事件都是在事件冒泡处理,ie只有冒泡

73、事件委托是什么。

将所有的操作交给父元素,将事件添加给父元素,父元素接收到这个事件的发生,找到具体触发事件的子元素,让子元素处理事件

oUl.onclick = function (ev) {

var ev = window.event || ev;

var target = ev.target || ev.srcElement;//ev.srcElement:ie获取事件目标

target.style.background = "orange";

}

74、给10000个li添加点击事件。

oUl.onclick = function (ev) {

var ev = window.event || ev;

var target = ev.target || ev.srcElement;//ev.srcElement:ie获取事件目标

target.style.background = "orange";

}

75、阻止默认行为的三种方式。

元素.事件添加的事件:retrun false 阻止

元素.addEventListener:ev.preventDefault(); 阻止

元素.attachEvent:ev.retrunValue = false 阻止

76、拖拽效果中有几种事件?

按下onmousedown,拖拽onmousemove,弹起onmouseup

77、什么是回调函数?

回调函数是某个操作某个动作做完以后调用的函数

78、使用正则表达式验证邮箱。

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

79、cookie的利弊?

优点:极高的扩展性和可用性

1.通过良好的编程,控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术(SSL),减少cookie被破解的可能性。

3.只在cookie中存放不敏感数据,即使被盗也不会有重大损失。

4.控制cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点:

1.Cookie数量和长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉。

2.安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

因为这些弊端(主要是cookie的大小和多少都受限制,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用),IE8以后,就出现一个web storage;它仅仅是为了本地缓存数据而存在;但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在。

80、JavaScript原型,原型链 ?

js每声明一个function,都有prototype原型,prototype原型是函数的一个默认属性,在函数的创建过程中由js编译器自动添加。

也就是说:当生产一个function对象的时候,就有一个原型prototype。原型中存储对象共享的属性和方法。

原型链:

当你定义一个函数对象的时候,其内部就有这样一个链表关系。声明foo对象,自带了proto的属性,而这个属性指向了prototype,从而实现对象的扩展(例如继承等操作)

81、什么是闭包,闭包有什么作用,说说你对闭包的理解。

闭包:就是能够读取其他函数内部变量的函数(函数里面套函数,内部函数访问外部函数变量),

在本质上,闭包是将函数内部和函数外部连接起来的桥梁。

作用:闭包中使用的变

量会一直存储在内存中,类似全局变量 ,避免全局污染,可以解决全局变量的问题。

82、ajax请求的时候get 和post方式的区别,什么时候用post。

1、GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中,这种区别对用户是不可见的

2、GEt传输数据容量小,不安全,post传输数据内容大,更加安全;

当向服务器发送一些数据的时候选择post比较安全

83、ajax请求时,如何解释json数据。

如果是字符串形式的json:eval("("+ajax.response+")")

如果是本地的json文件:JSON.parse(data)

84、同步和异步的区别?

异步:客户端与服务器请求数据的过程中,可以做其他的事情

同步:客户端与服务器请求数据的过程中,不能做其他的事情

85、常见的http状态码?

不需要知道全部,常见的就可以,比如200 404 503

200状态码:表示请求已成功,请求所希望的响应头或数据体将随此响应返回

201状态码:表示请求成功并且服务器创建了新的资源,且其 URI 已经随Location 头信息返回。假如需要的资源无法及时建立的话,应当返回 '202 Accepted'

202状态码:服务器已接受请求,但尚未处理

301状态码:被请求的资源已永久移动到新位置。服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。

302状态码:请求的资源临时从不同的URI响应请求,但请求者应继续使用原有位置来进行以后的请求

304自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过,您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。

301状态码:被请求的资源已永久移动到新位置。服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。

302状态码:请求的资源临时从不同的URI响应请求,但请求者应继续使用原有位置来进行以后的请求

304自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过,您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。

401状态码:请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。

403状态码:服务器已经理解请求,但是拒绝执行它。与401响应不同的是,身份验证并不能提供任何帮助,而且这个请求也不应该被重复提交。

404状态码:请求失败,请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话,应当使用410状态码来告知旧资源因为某些内部的配置机制问题,已经永久的不可用,而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。

500状态码:服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器的程序码出错时出现。

503状态码:由于临时的服务器维护或者过载,服务器当前无法处理请求。通常,这个是暂时状态,一段时间会恢复

86、eval的作用是?

eval:计算某个字符串,并且执行其中的JavaScript代码

console.log(eval("2+3")); //5

console.log(res); //'["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]'

console.log(eval(res)); //(4) ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"]

87、js哪些操作会造成内存泄露?

1)意外的全局变量引起的内存泄露

function leak(){

leak="xxx";//leak成为一个全局变量,不会被回收

}

2)被遗忘的定时器或者回调

3)闭包引起的内存泄漏

88、$(document).ready() 方法和window.onload 有什么区别?

1.执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

2.编写个数不同

window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个

$(document).ready()可以同时编写多个,并且都可以得到执行

3.简化写法不同

window.onload没有简化写法

(function(){});

89、jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?

在默认情况下,通过$.extend()合并操作不是递归的(浅拷贝);如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而,如果将 true 作为该函数的第一个参数,那么会在对象上进行递归的合并(深拷贝)。

浅拷贝(false 默认):如果第二个参数对象有的属性第一个参数对象也有,那么不会进行相同参数内部的比较,直接将第一个对象的相同参数覆盖。

深拷贝(true):如果第二个参数对象有的属性第一个参数对象也有,还要继续在这个相同的参数向下一层找,比较相同参数的对象中是否还有不一样的属性,如果有,将其继承到第一个对象,如果没有,则覆盖。

90、().prop()的区别?

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

$("#chk1").prop("checked") == false

$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined

91、jquery中.post()提交有区别吗?

get一般用来进行查询操作,url地址有长度限制,请求的参数都暴露在url地址当中,如果传递中文参数,需要自己进行编码操作,安全性较低。

post请求方式主要用来提交数据,没有数据长度的限制,提交的数据内容存在于http请求体中,数据不会暴漏在url地址中。

你可能感兴趣的:(前端基础面试题(JavaScript部分))