关于javascript面试和笔试题

来源：互联网发布：淘宝上买药靠谱吗编辑：程序博客网时间：2024/05/21 10:50

1、js中的call和apply方法的描述？

更改对象的内部指针，即改变对象的this指向的内容

call和apply的第一参数是要传入给当前对象的对象，即函数内部的this，第二个参数是传递给当前对象的参数

call的第二个参数是参数列表

apply的第二个参数是数组

var func=newfunction(){this.a="fun"};var myfunc=function(s){var a="myfunc"; console.log(this.a);console.log(a);console.log(s); }; myfunc.call(func,"test");//fun myfunc test myfunc.apply(func,["test"]);//fun myfunc test myfunc.call(func,["test"]);//fun myfunc ["test"] myfunc('444')//undefined myfunc 444

2、闭包解释？举例？

闭包：有权访问另外一个函数作用域内部的变量的函数

实现：函数作为返回值，函数作为参数

核心：函数调用完成之后，其执行上下文环境不会接着被销毁

在动态执行环境中，数据实时地发生变化，为了保持这些非持久型变量的值，我们用闭包这种载体来存储这些动态数据。这就是闭包的作用。也就说遇到需要存储动态变化的数据或将被回收的数据时，我们可以通过外面再包裹一层函数形成闭包来解决。

<!DOCTYPE html>

<html>

<head>

<title>闭包</title>

<script type="text/javascript"><!--闭包

window.onload = function() {

var liList = document.getElementsByTagName("li");

for (var i = 0; i < liList.length; i++) {

liList[i].onclick = (function(i) {

return function() {

alert(i);

}

})(i);

}

}

// --></script>

<!-- 没有闭包

<script type="text/javascript">

window.onload = function() {

var liList = document.getElementsByTagName("li");

for (var i = 0; i < liList.length; i++) {

liList[i].onclick = function() {

alert(i);

}

}

}

</script> -->

</head>

<body>

<ul>

<li id="a1">aa</li>

<li id="a2">aa</li>

<li id="a3">aa</li>

</ul>

</body>

</html>

3、事件代理或者事件委托？（事件冒泡，事件默认行为）

http://www.cnblogs.com/leejersey/p/3801452.html

事件委托：事件就是点击事件，鼠标移入，移除，onclik,onmouseover,onmouseout等，委托就是让别人来做，事件加在某些元素上，然后你却加到别人身上来做，完成这件事。

这就是：利用事件冒泡的原来，把事件加到父级上，触发执行效果

<input type="button" id="btn" />

<ul id="ul">

 <li>aaaaaaaa</li>

 <li>bbbbbbbb</li>

<li>cccccccc</li>

</ul>

/*这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。

ie：window.event.srcElement标准下:event.targetnodeName:找到元素的标签名*/

window.onload = function(){

<span style="white-space:pre"></span>var oUl = document.getElementById("ul");

<span style="white-space:pre"></span> var aLi = oUl.getElementsByTagName("li");

<span style="white-space:pre"></span>var oBtn = document.getElementById("btn");

<span style="white-space:pre"></span>var iNow = 4;

<span style="white-space:pre"></span>oUl.onmouseover = function(ev){

<span style="white-space:pre"></span>var ev = ev || window.event;

<span style="white-space:pre"></span> var target = ev.target || ev.srcElement;

<span style="white-space:pre"></span> //alert(target.innerHTML);

<span style="white-space:pre"></span>if(target.nodeName.toLowerCase() == "li"){

<span style="white-space:pre"></span>target.style.background = "red";

<span style="white-space:pre"></span>}  }

<span style="white-space:pre"></span>oUl.onmouseout = function(ev){

<span style="white-space:pre"></span>var ev = ev || window.event;

<span style="white-space:pre"></span> var target = ev.target || ev.srcElement;

<span style="white-space:pre"></span>//alert(target.innerHTML);

<span style="white-space:pre"></span>if(target.nodeName.toLowerCase() == "li"){

<span style="white-space:pre"></span>target.style.background = "";    }

<span style="white-space:pre"></span>}

<span style="white-space:pre"></span>oBtn.onclick = function(){

<span style="white-space:pre"></span> iNow ++;

<span style="white-space:pre"></span>var oLi = document.createElement("li");

<span style="white-space:pre"></span>oLi.innerHTML = 1111 *iNow;

<span style="white-space:pre"></span>oUl.appendChild(oLi);  }}

1.阻止事件冒泡,使成为捕获型事件触发机制.

function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else//否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; }

2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.

function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else//否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; }

4、null和undefined的区别

undefined：定义了一个变量但是为初始化时，其值为undefined。undefined用作数字时类型表现为NaN, 用作布尔时表现为false。

null：如果定义变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值。Null 用成数字时会表现为0，做布尔时表现为false

null是一个表示"无"的对象，转为数值时为0； undefined是一个表示"无"的原始值，转为数值时为NaN。 
当声明的变量还未被初始化时，变量的默认值为undefined。 
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。 
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是： 
1. 变量被声明了，但没有赋值时，就等于undefined。
2. 调用函数时，应该提供的参数没有提供，该参数等于undefined。
3. 对象没有赋值的属性，该属性的值为undefined。
4. 函数没有返回值时，默认返回undefined。
null表示"没有对象"，即该处不应该有值。典型用法是： 
1. 作为函数的参数，表示该函数的参数不是对象。
2. 作为对象原型链的终点。

5、new操作符具体做了什么？

F function(){}

var f = new F();

1)新建一个对象

f=new Object();

2)设置原型链

f.__proto__ = F.prototype;

3)让F中的this指向f，执行F函数体

var obj = {};

obj.__proto__ = Base.prototype;
Base.call(obj);

6、document.write和innerHTML的区别

document.write重绘整个页面

innerHTML重绘页面的一部分

7、ajax请求过程是怎样？

//(1)创建xmlHttprequest对象

var xmlHttp;

if(window.XMLHttpRequest){

xmlHttp= new XMLHttpRequest();

}else if(window.ActiveXObject){

xmlHttp = new ActiveXObject;

}else{

xmlHttp = null;

}

//(2)建立链接

var data = "name=mimi&address=street";

var url = “”;

xmlHttp.open("POST",url,true);

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencode");

//(3)发送请求

xmlHttp.send(data);

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState==4&&xmlHttp.status==200){

alert("success"+xmlHttp.responseText);

}else{

alert("error");

}

}

8、post请求和get请求的区别

get：使用url传递参数，对所发送信息的数量有限（索取数据）

post：通过提交表单传值，修改服务器上的资源，向服务器发送大量的数据，更稳定可靠（提交数据）。POST把提交的数据则放置在是HTTP包的包体中。

Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求

10、js作用域，原型，原型链？有什么特点，如何实现继承？__proto__和prototype的区别

作用域：js没有块级作用域，除了全局作用域，还有函数作用域，作用域熟名地盘。上下级关系的确定就看在哪个作用域下创建的。作用域最大的好处就是隔离变量，不同作用域下同名变量不会有冲突。

原型链就是访问一个对象的属性时，先在基本属性中查找，如果没有，在沿着__proto__这条链上找，f1.__proto__指向的是Foo.prototype。

继承：原型链是继承的方式,实例拥有其对应原型上的属性和方法

__proto__对象内部的原型，每个对象都有一个隐形的属性__proto__，这个属性引用了这个对象的函数的prototype

prototype构造器的原型，每一个函数都有一个prototype属性，prototype的属性值是一个对象，包含constructor属性和一些自定义的属性

如：function Fn(){}

var fn = new Fn();

var obj = new Object();

Object.prototype确实一个特例——它的__proto__指向的是null，切记切记！

1)所有的内置构造器及自定义构造器/函数的__proto__都指向Function.prototype，它是一个空函数。包括自定义的构造器、函数

Number.__proto__ === Function.prototype  // true

RegExp.__proto__ === Function.prototype  // true

Error.__proto__ === Function.prototype   // true

Date.__proto__ === Function.prototype    // true

Math.__proto__ === Object.prototype  // true

JSON.__proto__ === Object.prototype  // true

所有的构造器都来自于Function.prototype，甚至包括根构造器Object及Function自身。所有构造器都继承了Function.prototype的属性及方法。如length、call、apply、bind（ES5）。

Function.prototype也是唯一一个typeof XXX.prototype为 “function”的prototype。其它的构造器的prototype都是一个对象。如下

console.log(typeof Function.prototype) // function

console.log(typeof Object.prototype)   // object

console.log(typeof Number.prototype)   // object

2)所有构造器的实例对象的__proto_都指其构造器的prototype

var reg = /hello/g

var date = new Date

var err = new Error('exception')

console.log(reg.__proto__ === RegExp.prototype) // true

console.log(date.__proto__ === Date.prototype)  // true

console.log(err.__proto__ === Error.prototype)  // true

12、==和===区别，关于’‘，0，undefined，null，false

基本不可变的类型进行的是值比较，而对象等可变类型进行的是引用比较，即使内容完全相同，地址不同也不相等（==和===都不相等）

===比价数值和类型

null==undefined //true

null===undefined //false

"3"==3//true

"3"===3//false

alert(0 == '');//truealert(0 ==false);//truealert(false == ''); //truealert(null == undefined); //truealert(!0);//truealert(!false);//truealert(!undefined);//truealert(!null);//truealert(!'');//truealert(0 == undefined);//falsealert(0 ==null);//falsealert(false == null);//falsealert(false == undefined);//falsealert('' ==null);//falsealert('' == undefined);//false

13、pop()函数

删除数组中的最后一个元素

unshift()向数组前面添加元素

14、过滤掉原型链上的属性

hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。

isPrototypeOf:是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。

15、JavaScript创建对象的几种方式？

this:

function Car(color,door){

this.color = color;

this.doors = door;

this.showColor =function(){

alert(this.color)

};

}

var car1 =new Car(“red”,4);

var car2 =new Car(“blue”,4);

原型：

function Car(){

}

Car.prototype.color = “red”;

Car.prototype.doors = 4;

Car.prototype.showColor =function(){

alert(this.color);

}

var car1 =new Car();

var car2 =new Car();

16、数组和字符串有哪些原生方法，列举一下？

数组：

push()

pop()

unshift()

shift()

reverse()

sort()

concat()

join()数组--字符串

toString()

valueOf()

splice()添加，删除

字符串：

concat()

toLowerCase()

toUpperCase()

slice()

substr()

substring()

charAt()

indexOf()

lastIndexOf()

replace()

split()将字符串--数组

join()和split()区别

join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

split()方法：用于把一个字符串分割成字符串数组. 

stringObject.split(a,b)这是它的语法

a是必须的决定个从a这分割

b不是必须的，可选。该参数可指定返回的数组的最大长度 。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

注意返回的数组中不包括a本身；

17、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？

按照HTML5标准中的HTML语法规则，如果在</body>后再出现<script>或任何元素的开始标签，都是parse error，浏览器会忽略之前的</body>，即视作仍旧在body内。所以实际效果和写在</body>之前是没有区别的。

总之，这种写法虽然也能work，但是并没有带来任何额外好处，实际上出现这样的写法很可能是误解了“将script放在页面最末端”的教条。所以还是不要这样写为好。

18、json理解

json是一种轻量级的数据交换格式，键值对的形式存在，通过{}花括号标识

json和字符串的转换：JSON.parse(jsonstr);JSON.stringify(jsonObj);

eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号 

注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。

19、JSON.parse()和eval()的区别

参考：http://outofmemory.cn/code-snippet/1741/JSON-parse-eval-differentiate

JSON.parse()是用于将字符串转化为json对象，会对字符串进行检测，格式不正确就不进行转换，键值用双引号，整个字符串用单引号，一定是标准的json格式，如

var json=JSON.parse('{"name":"lili"}');

如果不是标准的

JSON.parse('{name:"张三"}');

JSON.parse('{\'name\':"张三"}');

JSON.parse('{"name":\'张三\'}')；

会报系统错误

eval()是动态执行js代码，以上都可以转换，转换格式

如eval('('+'{name:"lili"}'+')')，但是eval()是不安全的，可以执行任何的字符串，可怕的是如果用恶意用户在json字符串中注入了向页面插入木马链接的脚本，用eval也是可以操作的，而用JSON.parse()则不必担心这个问题。

JSON.stringify({a:1});

结果：“{“a”:1}”

21、两个json对象合为一个

var json = {};

var json1= {'a':1};

var json2 = {'b':2};

json = JSON.parse((JSON.stringify(json1)+JSON.stringify(json2)).replace(/}{/,','));

20、js内置对象，浏览器对象、html DoM对象

参考：http://www.cnblogs.com/luckyXcc/p/5892896.html

1）js本地对象：

Date、string、boolean、number、RegExp、Math、Array、Object、Function、Arguments、Global、Event和各种错误类对象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。

Global对象是ECMAScript中最特别的对象，因为实际上它根本不存在，但大家要清楚，在ECMAScript中，不存在独立的函数，所有函数都必须是某个对象的方法。类似于isNaN()、parseInt()和parseFloat()方法等，看起来都是函数，而实际上，它们都是Global对象的方法。而且Global对象的方法还不止这些。有关Global对象的具体方法和属性，感兴趣的同学可以看一下这里：JavaScript 全局对象参考手册

2）宿主对象：即浏览器对象，包括BoM和Dom

Bom对象：window、screen、navigator、history、location

html DOM对象：document、form、img

3）自定义对象

22、javascript数据类型

基本数据类型：String,boolean,Number,Undefined, Null 
引用数据类型：Object(Array,Date,RegExp,Function) 

23、this的理解

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。 
但是有一个总原则，那就是this指的是调用函数的那个对象。 
this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象 

24、”use strict”

ECMAScript 5提供了严格模式。在严格模式中，JavaScript代码会更加简洁，会有更少不安全的特性，

更多的警告和更加合理的代码。普通模式（也叫作非严格模式）有时候也被称作“宽松模式”。 

设立"严格模式"的目的，主要有以下几个：
•   消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
•   消除代码运行的一些不安全之处，保证代码运行的安全；
•   提高编译器效率，增加运行速度；
•   为未来新版本的Javascript做好铺垫。
注：经过测试IE6,7,8,9均不支持严格模式。
缺点：
现在网站的JS 都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被 merge 后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

25、DOM操作

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

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

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

26、iframe的优缺点

<iframe>优点：
•   解决加载缓慢的第三方内容如图标和广告等的加载问题
•   Security sandbox
•   并行加载脚本
<iframe>的缺点：
•   iframe会阻塞主页面的Onload事件；
•   即时内容为空，加载也需要时间
•   没有语意

27、javascript中callee和caller的作用

caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

28、AMD和CMD规范区别

详情请见：详解JavaScript模块化开发 

29、网站重构

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。 
对于传统的网站来说重构通常是： 
表格(table)布局改为DIV+CSS
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
对于移动平台的优化
针对于SEO进行优化
深层次的网站重构应该考虑的方面： 
减少代码间的耦合
让代码保持弹性
严格按规范编写代码
设计可扩展的API
代替旧有的框架、语言(如VB)
增强用户体验
通常来说对于速度的优化也包含在重构中： 
压缩JS、CSS、image等前端资源(通常是由服务器来解决)
程序的性能优化(如数据读写)
采用CDN来加速资源加载
对于JS DOM的优化
HTTP服务器的文件缓存

30、js操作获取和设置cookie

//创建cookie
function setCookie(name, value, expires, path, domain, secure) {
  var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
  if (expires instanceof Date) {
    cookieText += '; expires=' + expires;
  }
  if (path) {
    cookieText += '; expires=' + expires;
  }
  if (domain) {
    cookieText += '; domain=' + domain;
  }
  if (secure) {
    cookieText += '; secure';
  }
  document.cookie = cookieText;
}

//获取cookie
function getCookie(name) {
  var cookieName = encodeURIComponent(name) + '=';
  var cookieStart = document.cookie.indexOf(cookieName);
  var cookieValue = null;
  if (cookieStart > -1) {
    var cookieEnd = document.cookie.indexOf(';', cookieStart);
    if (cookieEnd == -1) {
      cookieEnd = document.cookie.length;
    }
    cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
  }
  return cookieValue;
}

//删除cookie
function unsetCookie(name) {
  document.cookie = name + "= ; expires=" + new Date(0);
}

31、数据比较

function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}

//阻止浏览器的默认行为
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}

0 0