经典的 Web 前端或者 JavaScript 面试笔试题有哪些

一、经典的 Web 前端或者 JavaScript 面试笔试题有哪些

一、不定项选择题（每题3分，共30分）\x0d\x0a1.声明一个对象，给它加上name属性和show方法显示其name值，以下代码中正确的是（D）\x0d\x0aA.varobj=[name:"zhangsan",show:function(){alert(name);}];\x0d\x0aB.varobj={name:”zhangsan”,show:”alert(this.name)”};\x0d\x0aC.varobj={name:”zhangsan”,show:function(){alert(name);}};\x0d\x0aD.varobj={name:”zhangsan”,show:function(){alert(this.name);}};\x0d\x0a2.以下关于Array数组对象的说法不正确的是（CD）\x0d\x0aA.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数\x0d\x0aB.reverse用于对数组数据的倒序排列\x0d\x0aC.向数组的最后位置加一个新元素，可以用pop方法\x0d\x0aD.unshift方法用于向数组删除第一个元素\x0d\x0a3.要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（A）\x0d\x0aA.window.status=”已经选中该文本框”\x0d\x0aB.document.status=”已经选中该文本框”\x0d\x0aC.window.screen=”已经选中该文本框”\x0d\x0aD.document.screen=”已经选中该文本框”\x0d\x0a4.点击页面的按钮，使之打开一个新窗口，加载一个网页，以下JavaScript代码中可行的是（AD）\x0d\x0aA.\x0d\x0aB.\x0d\x0aC.\x0d\x0aD.\x0d\x0a\x0d\x0a\x0d\x0a5.使用JavaScript向网页中输出hello，以下代码中可行的是（BD）\x0d\x0aA.\x0d\x0adocument.write(hello);\x0d\x0a\x0d\x0aB.\x0d\x0adocument.write(“hello”);\x0d\x0a\x0d\x0aC.\x0d\x0ahello\x0d\x0a\x0d\x0aD.\x0d\x0a\x0d\x0adocument.write(“hello”);\x0d\x0a\x0d\x0a\x0d\x0a6.分析下面的代码：\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0afunctionwriteIt(value){document.myfm.first_text.value=value;}\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a以下说法中正确的是（CD）\x0d\x0aA.在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，第一个文本框的内容不变\x0d\x0aB.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容\x0d\x0aC.在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，将在第一个文本框中复制第二个文本框的内容\x0d\x0aD.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变\x0d\x0a7.下面的JavaScript语句中，（D）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空\x0d\x0aA.for(vari=0;i\x0d\x0a\x0d\x0a\x0d\x0afunctioncloseWin(){\x0d\x0a//在此处添加代码\x0d\x0aif(confirm(“确定要退出吗？”)){\x0d\x0awindow.close();\x0d\x0a}\x0d\x0a}\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a2、写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉（15分）\x0d\x0avarstr=“这里是div

里面的段落

二、有哪些经典的 Web 前端或者 JavaScript 面试笔试题

一、不定项选择题（每题3分，共30分）

1.声明一个对象，给它加上name属性和show方法显示其name值，以下代码中正确的是（ D）

A. var obj= [name:"zhangsan",show:function(){alert(name);}];

B. var obj={name:”zhangsan”,show:”alert(this.name)”};

C. var obj={name:”zhangsan”,show:function(){alert(name);}};

D. var obj={name:”zhangsan”,show:function(){alert(this.name);}};

2.以下关于Array数组对象的说法不正确的是（ CD）

A.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数

B. reverse用于对数组数据的倒序排列

C.向数组的最后位置加一个新元素，可以用pop方法

D. unshift方法用于向数组删除第一个元素

3.要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（ A）

A. window.status=”已经选中该文本框”

B. document.status=”已经选中该文本框”

C. window.screen=”已经选中该文本框”

D. document.screen=”已经选中该文本框”

4.点击页面的按钮，使之打开一个新窗口，加载一个网页，以下JavaScript代码中可行的是（ AD）

A.<input type=”button” value=”new”

onclick=”open(‘new.html’,‘_blank’)”/>

B.<input type=”button” value=”new”

onclick=”window.location=’new.html’;”/>

C.<input type=”button” value=”new”

onclick=”location.assign(‘new.html’);”/>

D.<form target=”_blank”action=”new.html”>

<inputtype=”submit” value=”new”/>

三、面试问js原型怎么理解

JavaScript对象是动态的属性“包”（指其自己的属性）。JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依此层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。下面的代码将演示，当访问一个对象的属性时会发生的行为：

//假定有一个对象o,其自身的属性（ownproperties）有a和b：

//o的原型o.[[Prototype]]有属性b和c：

//最后,o.[[Prototype]].[[Prototype]]是null.

//这就是原型链的末尾，即null，

//根据定义，null没有[[Prototype]].

//{a:1,b:2}--->{b:3,c:4}--->null

//a是o的自身属性吗？是的，该属性的值为1

//b是o的自身属性吗？是的，该属性的值为2

//o.[[Prototype]]上还有一个'b'属性,但是它不会被访问到.这种情况称为"属性遮蔽(propertyshadowing)".

//c是o的自身属性吗？不是，那看看o.[[Prototype]]上有没有.

//c是o.[[Prototype]]的自身属性吗？是的,该属性的值为4

//d是o的自身属性吗？不是,那看看o.[[Prototype]]上有没有.

//d是o.[[Prototype]]的自身属性吗？不是，那看看o.[[Prototype]].[[Prototype]]上有没有.

//o.[[Prototype]].[[Prototype]]为null，停止搜索，

创建一个对象它自己的属性的方法就是设置这个对象的属性。唯一例外的获取和设置的行为规则就是当有一个getter或者一个setter被设置成继承的属性的时候。

JavaScript并没有其他基于类的语言所定义的“方法”。在 JavaScript里，任何函数都可以添加到对象上作为对象的属性。函数的继承与其他的属性继承没有差别，包括上面的“属性遮蔽”（这种情况相当于其他语言的方法重写）。

当继承的函数被调用时，this指向的是当前继承的对象，而不是继承的函数所在的原型对象。

//当调用o.m时,'this'指向了o.

//p是一个对象,p.[[Prototype]]是o.

//调用p.m时,'this'指向p.

//此时的'this.a'即p.a，即p的自身属性'a'

二、使用不同的方法来创建对象和生成原型链

EDIT

//o这个对象继承了Object.prototype上面的所有属性

//所以可以这样使用o.hasOwnProperty('a').

//hasOwnProperty是Object.prototype的自身属性。

//Object.prototype的原型为null。

//o--->Object.prototype--->null

//(indexOf,forEach等方法都是从它继承而来).

//a--->Array.prototype--->Object.prototype--->null

//函数都继承于Function.prototype

//(call,bind等方法都是从它继承而来):

//f--->Function.prototype--->Object.prototype--->null

在 JavaScript中，构造器其实就是一个普通的函数。当使用new操作符来作用这个函数时，它就可以被称为构造方法（构造函数）。

//g是生成的对象,他的自身属性有'vertices'和'edges'.

//在g被实例化时,g.[[Prototype]]指向了Graph.prototype.

ECMAScript 5中引入了一个新方法：Object.create()。可以调用这个方法来创建一个新对象。新对象的原型就是调用create方法时传入的第一个参数：

//a--->Object.prototype--->null

//b--->a--->Object.prototype--->null

console.log(b.a);//1(继承而来)

//c--->b--->a--->Object.prototype--->null

console.log(d.hasOwnProperty);//undefined,因为d没有继承Object.prototype

ECMAScript6引入了一套新的关键字用来实现class。使用基于类语言的开发人员会对这些结构感到熟悉，但它们是不一样的。 JavaScript仍然是基于原型的。这些新的关键字包括class,constructor,static,extends,和super.

在原型链上查找属性比较耗时，对性能有副作用，这在性能要求苛刻的情况下很重要。另外，试图访问不存在的属性时会遍历整个原型链。遍历对象的属性时，原型链上的每个可枚举属性都会被枚举出来。

检测对象的属性是定义在自身上还是在原型链上，有必要使用hasOwnProperty方法，所有继承自Object.proptotype的对象都包含这个方法。

hasOwnProperty是 JavaScript中唯一一个只涉及对象自身属性而不会遍历原型链的方法。

注意：仅仅通过判断值是否为undefined还不足以检测一个属性是否存在，一个属性可能存在而其值恰好为undefined。

6.不好的实践：扩展原生对象的原型

一个经常被用到的错误实践是去扩展Object.prototype或者其他内置对象的原型。该技术被称为 monkey patching，它破坏了原型链的密封性。尽管，一些流行的框架（如 Prototype.js）在使用该技术，但是并没有足够好的理由要用其他非标准的方法将内置的类型系统搞乱。我们去扩展内置对象原型的唯一理由是引入新的 JavaScript引擎的某些新特性，比如Array.forEach。