关于javascript作用域的常见面试题分享
作者：这麻雀
字体：[ ] 类型：转载 时间：
关于JS作用域问题，是面试的时候面试官乐此不疲的面试题，有时候确实是令人抓狂，下面这篇文章主要给大家分享了关于javascript作用域的一些常见面试题，需要的朋友可以参考借鉴，下面来一起看看吧。
本文主要给大家分享了关于javascript作用域面试题的相关内容，分享出来供大家参考学习，下面来一起看看吧。
一、作用域:
在了解作用域之前，首先需要明白一些基础概念：
每一个变量、函数都有其作用的范围，超出作用不得使用，这个叫做作用域。
二、全局变量、局部变量：
1.全局变量：
&&&& （1）在全局范围内声明的变量，如var a=1;
&&&& （2）只有赋值没有声明的值，如a=2; （注：如果a=2在函数环境中，也是全局变量）
2.局部变量：
&&&&& 写入函数中的变量，叫做局部变量。
&&&&&（1）程序的安全。
&&&&&（2）内存的释放。
三、作用域链：
查找量的过程。先找自己局部环境有没有声明或者是函数，如果有，则查看声明有无赋值或者是函数的内容，如果没有，则向上一级查找。
四、预解析顺序：
每个程序都要做的工作，程序开始先预解析语法，标点符号是否有误，解析内存是否可容纳，解析变量……直到解析无误了，才开始按正常的流程顺序走。试想一下，如果没有预解析顺序，直接按流程顺序走，可能程序执行到最后一个函数，发现了语法错误，才开始报错，那性能要有多差啊！
顺序内容：
&&&&& 1.文件内引用的&script&块依次解析，从上到下连成一片。
&&&&& 2.每个script块内部的var（注意：只解析变量名，不解析值，如var a=2;将var a解析在环境的开头，并不解析后面的值，只有当程序执行到var a=2这行时，才会给变量赋值），function解析到本块的开头。
&&&&& 3.依次解析每个环境，将var,function解析到环境的开头。
五、应用场景（一些常见的作用域相关的面试题）：
var a="aa";
function test(){
alert(a);//undefined，函数执行后，在函数环境内，var a会预解析，当弹出a时，首先先找本层环境内有无声明，发现有。但是代码没有执行到赋值，所以结果是undefined。
var a="bb";//var a会预解析在函数开头，执行到这行才进行赋值
alert(a);//“bb”
alert(a);//"aa" 找全局环境下的声明，找到了var a="aa"
var a="aa";
function test(){
alert(a);//“aa”，函数执行后，在函数环境内，没有找到本层环境关于a的声明，所以开始向上一层环境查找。
a="bb";//执行到这行开始改变全局a的量
alert(a);//"bb" 全局环境的a在函数执行时已经被改变
function test(){
b();//函数b会被预解析，因此可以调用，执行了输出1；
function b(){
console.log(1);
console.log(a);//undefined
六、总结：
要搞清楚一个变量的作用域，重点是搞清楚预解析顺序，然后再判断作用域的范围，这些都是有套路可言：先找本层环境有无声明，有的话，看是否进行了赋值；只有声明没有执行赋值，就是undefined。没有声明也没有赋值的话，就再向上一层查找，直到找到为止。如果所有的执行环境都没有找到，那么控制台就会报错变量找不到。
函数的话就更简单了：找本层环境是否有预解析的函数，有的话即可执行。没有的话还是向上查找。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具&&&&&&&&&分享几个 常见的 js 面试题
分享几个 常见的 js 面试题
这篇文章主要为大家分享几个JavaScript面试题，希望本文可以帮助大家比较顺利的通过面试，感兴趣的码农可以参考一下。
1.创建JavaScript对象的两种方法是什么？
这是一个非常简单的问题，如果你用过JavaScript的话。你至少得知道一种方法。但是，尽管如此，根据我的经验，也有很多自称是JavaScript程序员的人说不知道如何回答这个问题。
使用&new&关键字来调用函数。
open/close花括号。
var o = {};
你也可以继续提问，&使用new关键字，什么情况下创建对象？&但是，由于我只是想淘汰一些人，所以这些问题我会等到真正面试的时候去问。
2.如何创建数组？
这和&如何创建对象&是相同级别的问题。然而，也有一些人回答得了第一个问题，却不能回答这个问题。
用下面的代码，简简单单就能创建一个数组：
var myArray = new Array();
创建数组是一个很复杂的过程。但是我希望能从应聘者口中听到使用方括号的答案。
var myArray = [];
当然，我们还可以继续问其他问题，比如如何高效地删除JavaScript数组中的重复元素等，但是由于我们只需要知道应聘人员是否值得进一步的观察，关于数组的问题我会到此结束。
再来针对如何高效地删除JavaScript数组中的重复元素说一说：js 如何实现数组去重整理出5种方法。
具体的方法介绍：
1）.遍历数组法
最简单的去重方法， 实现思路：新建一新数组，遍历传入数组，值不在新数组就加入该新数组中；注意点：判断值是否在数组的方法&indexOf&是ECMAScript5 方法，IE8以下不支持，需多写一些兼容低版本浏览器代码，源码如下：
// 最简单数组去重法
function unique1(array){
var n = []; //一个新的临时数组
//遍历当前数组
for(var i = 0; i & array. i++){
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
if (n.indexOf(array[i]) == -1) n.push(array[i]);
// 判断浏览器是否支持indexOf ，indexOf 为ecmaScript5新方法 IE8以下（包括IE8， IE8只支持部分ecma5）不支持
if (!Array.prototype.indexOf){
// 新增indexOf方法
Array.prototype.indexOf = function(item){
var result = -1, a_item =
if (this.length == 0){
for(var i = 0, len = this. i & i++){
a_item = this[i];
if (a_item === item){
2）.对象键值对法
该方法执行的速度比其他任何方法都快， 就是占用的内存大一些；实现思路：新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，不是的话给对象新增该键并放入新数组。注意点： 判断是否为js对象键时，会自动对传入的键执行&toString()&，不同的键可能会被误认为一样；例如： a[1]、a[&1&] 。解决上述问题还是得调用&indexOf&。
// 速度最快， 占空间最多（空间换时间）
function unique2(array){
var n = {}, r = [], len = array.length, val,
for (var i = 0; i & array. i++) {
val = array[i];
if (!n[val]) {
n[val] = [type];
r.push(val);
} else if (n[val].indexOf(type) & 0) {
n[val].push(type);
r.push(val);
3）.数组下标判断法
还是得调用&indexOf&性能跟方法1差不多，实现思路：如果当前数组的第i项在当前数组中第一次出现的位置不是i，那么表示第i项是重复的，忽略掉。否则存入结果数组。
function unique3(array){
var n = [array[0]]; //结果数组
//从第二项开始遍历
for(var i = 1; i & array. i++) {
//如果当前数组的第i项在当前数组中第一次出现的位置不是i，
//那么表示第i项是重复的，忽略掉。否则存入结果数组
if (array.indexOf(array[i]) == i) n.push(array[i]);
4）.排序后相邻去除法
虽然原生数组的&sort&方法排序结果不怎么靠谱，但在不注重顺序的去重里该缺点毫无影响。实现思路：给传入数组排序，排序后相同值相邻，然后遍历时新数组只加入不与前一值重复的值。
// 将相同的值相邻，然后遍历去除重复值
function unique4(array){
array.sort();
var re=[array[0]];
for(var i = 1; i & array. i++){
if( array[i] !== re[re.length-1])
re.push(array[i]);
5）.优化遍历数组法
源自外国博文，该方法的实现代码相当酷炫；实现思路：获取没重复的最右一值放入新数组。（检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）
// 思路：获取没重复的最右一值放入新数组
function unique5(array){
var r = [];
for(var i = 0, l = array. i & i++) {
for(var j = i + 1; j & j++)
if (array[i] === array[j]) j = ++i;
r.push(array[i]);
3.什么是变量提升（Variable Hoisting）？
这个问题稍微难一点，我也并不要求对方一定得回答出来。但是，通过这个问题能够快速确定应聘者的技术水平：他们是否真的像他们声明得那样理解这门编程语言？
变量提升指的是，无论是哪里的变量在一个范围内声明的，那么JavaScript引擎会将这个声明移到范围的顶部。如果在函数中间声明一个变量，例如在某一行中赋值一个变量：
function foo()
// 此处省略若干代码
var a = "abc";
实际上会这样运行代码：
function foo()
// 此处省略若干代码
a = "abc";
4.全局变量有什么风险，以及如何保护代码不受干扰？
全局变量的危险之处在于其他人可以创建相同名称的变量，然后覆盖你正在使用的变量。这在任何语言中都是一个令人头疼的问题。预防的方法也有很多。其中最常用的方法是创建一个包含其他所有变量的全局变量：
var applicationName = {};
然后，每当你需要创建一个全局变量的时候，将其附加到对象上即可。
applicationName.myVariable = "abc";
还有一种方法是将所有的代码封装到一个自动执行的函数中，这样一来，所有声明的变量都声明在该函数的范围内。
(function(){
var a = "abc";
在现实中，这两种方法你可能都会用到。
5.如何通过JavaScript对象中的成员变量迭代？
for(var prop in obj){
// bonus points for hasOwnProperty
if(obj.hasOwnProperty(prop)){
// do something here
6.什么是闭包（Closure）？
闭包允许一个函数定义在另一个外部函数的作用域内，即便作用域内的其他东西都消失了，它仍可以访问该外部函数内的变量。如果应聘者能够说明，在for/next循环中使用闭包却不声明变量来保存迭代变量当前值的一些风险，那就应该给对方加分。
7.请描述你经历过的JavaScript单元测试。
关于这个问题，其实我们只是想看看应聘人员是否真的做过JavaScript单元测试。这是一个开放式问题，没有特定的正确答案，不过对方至少得能讲述进程中的一些事情。
原文地址：
Javascript知识点必读【内附答案】各大企业JavaScript笔试面试题汇总！
今天分享一篇关于百度、阿里巴巴、腾讯Java面试笔试题，所有内容来自作者亲身经历，建议看完收藏，对你以后面试会有很大帮助。
注：明天分享文章“各大互联网公司HTML+CSS面试题”！
很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧，不仅适用于求职者，对于巩固复习js更是大有裨益。
而更多的题目是我一路以来收集的，也有往年的，答案不确保一定正确，如有错误或有更好的解法，还请斧正。
前面几题是会很基础，越下越有深度。
初级Java：
1.Java是一门什么样的语言，它有哪些特点？
没有标准答案。
2.Java的数据类型都有什么？
基本数据类型：String,boolean,Number,Undefined, Null
引用数据类型：Object(Array,Date,RegExp,Function)
那么问题来了，如何判断某变量是否为数组数据类型？
方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效
方法二.obj instanceof Array 在某些IE版本中不正确
方法三.方法一二皆有漏洞，在ECMA 5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：
Array.isArray===
"undefined")
Array.isArray =
function(arg){
Object.prototype.toString.call(arg)===
"[object Array]"
3.已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)
1 document.getElementById(“ ID”) .value
4.希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)
1vardomList = document.getElementsByTagName(‘input’) 2varcheckBoxList = []; 3varlen = domList. //缓存到局部变量4while(len--) { //使用while的效率会比for循环更高5if(domList[len].type == ‘checkbox’) { 6checkBoxList.push(domList[len]); 7} 8}
5.设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)
1vardom = document.getElementById(“ID”); 2dom.innerHTML = “xxxx” 3dom.style.color = “ #000”
6.当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：&div onclick=”test()”&&/div&
在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)
那么问题来了，Java的事件流模型都有什么？
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
7.什么是Ajax和JSON，它们的优缺点。
Ajax是异步Java和XML，用于在Web页面中实现异步数据交互。
可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
避免用户不断刷新或者跳转页面，提高用户体验
对搜索引擎不友好（
要实现ajax下的前后退功能成本较大
可能造成请求数的增加
跨域问题限制
JSON是一种轻量级的数据交换格式，ECMA的一个子集
优点：轻量级、易于人的阅读和编写，便于机器（Java）解析，支持复合数据类型（数组、对象、字符串、数字）
8.看下列代码输出为何？解释原因。
1vara; 2alert( typeofa); // undefined3alert(b); // 报错
解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。
9.看下列代码,输出什么？解释原因。
1vara = null; 2alert( typeofa); //object
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。
10.看下列代码,输出什么？解释原因。
1 2undefined == //true31== true; //true42== true; //false50== false; //true60== ''; //true7NaN == NaN; //false8[] == false; //true9[] == ![]; //true
undefined与null相等，但不恒等（===）
一个是number一个是string时，会尝试将string转换为number
尝试将boolean转换为number，0或1
尝试将Object转换成number或string，取决于另外一个对比量的类型
所以，对于0、空字符串的判断，建议使用 “===” 。“===”会先判断两边的值类型，类型不匹配时为false。
那么问题来了，看下面的代码，输出什么，foo的类型为什么？
1varfoo = "11"+ 2- "1"; 2console.log(foo); 3console.log( typeoffoo);
执行完后foo的值为111，foo的类型为Number。
1var foo = "11"+ 2+ "1"; //体会加一个字符串 '1'和 减去一个字符串 '1'的不同 2console.log(foo); 3console.log( typeoffoo);
执行完后foo的值为113，foo的类型为String。
11.看代码给答案。
1vara = newObject(); 2a. value= 1; 3b = 4b. value= 2; 5alert(a. value);
答案：2（考察引用数据类型细节）
12.已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。
答案：alert(stringArray.join(“”))
已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。
1functioncombo(msg){ 2vararr=msg.split( "-"); 3for( vari= 1;i&arr.i++){ 4arr[i]=arr[i].charAt( 0).toUpperCase()+arr[i].substr( 1,arr[i].length -1); 5} 6msg=arr.join( ""); 7return 8}
(考察基础API)
13.var numberArray = [3,6,2,4,1,5]; （考察基础API）
1) 实现对该数组的倒排，输出[5,1,4,2,6,3]
2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]
1varnumberArray = [ 3, 6, 2, 4, 1, 5]; 23numberArray.reverse(); // 5,1,4,2,6,345numberArray.sort( function(a,b){ //6,5,4,3,2,16returnb-a; 7})
14.输出今天的日期，以YYYY-MM-DD的方式，比如今天是日，则输出
1vard = newDate(); 2// 获取年，getFullYear()返回4位的数字3varyear = d.getFullYear(); 4// 获取月，月份比较特殊，0是1月，11是12月5varmonth = d.getMonth() + 1; 6// 变成两位7month = month & 10? '0'+ month : 8// 获取日9varday = d.getDate(); 10day = day & 10? '0'+ day : 11alert(year + '-'+ month + '-'+ day);
15.将字符串”&tr&&td&{$id}&/td&&td&{$name}&/td&&/tr&”中的{$id}替换成10，{$name}替换成Tony （使用正则表达式）
答案：”&tr&&td&{$id}&/td&&td&{$id}_{$name}&/td&&/tr&”.replace(/{$id}/g, ’10′).replace(/{$name}/g, ‘Tony’);
16.为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将&, &, &, “进行转义
1functionescapeHtml(str) { 2returnstr.replace( /[&&”&]/g, function(match) { 3switch(match) { 4case“&”: 5return“&”; 6case“&”: 7return“&”; 8case“&”: 9return“&”; 10case“””: 11return“"”; 12} 13}); 14}
17.foo = foo||bar ，这行代码是什么意思？为什么要这样写？
答案：if(!foo) foo = //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
18.看下列代码，将会输出什么?(变量声明提升)
1varfoo = 1; 2function(){ 3console.log(foo); 4varfoo = 2; 5console.log(foo); 6}
答案：输出undefined 和 2。上面代码相当于：
1varfoo = 1; 2function(){ 3var 4console.log(foo); //undefined5foo = 2; 6console.log(foo); // 2; 7}
函数声明与变量声明会被Java引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。
19.用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。
1variArray = []; 2funtion getRandom(istart, iend){ 3variChoice = istart - iend + 1; 4returnMath.floor( Math.random() * iChoice + 5} 6for( vari= 0; i& 10; i++){ 7iArray.push(getRandom( 10, 100)); 8} 9iArray.sort();
20.把两个数组合并，并删除第二个元素。
1vararray1 = [ 'a', 'b', 'c']; 2varbArray = [ 'd', 'e', 'f']; 3varcArray = array1.concat(bArray); 4cArray.splice( 1, 1);
21.怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
1）创建新节点
createDocumentFragment() //创建一个DOM片段
() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
22.有这样一个URL：/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
1function serilizeUrl(url) { 2varresult = {}; 3url = url. split( "?")[ 1]; 4varmap= url. split( "&"); 5for( vari = 0, len = map. i & i++) { 6result[ map[i]. split( "=")[ 0]] = map[i]. split( "=")[ 1]; 7} 8return 9}
23.正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？
答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即”表示”），并且还需要双反斜杠（即表示一个）。使用正则表达字面量的效率更高。
邮箱的正则匹配：
1varregMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
24.看下面代码，给出输出结果。
1for( vari= 1;i&= 3;i++){ 2setTimeout( function(){ 3console.log(i); 4}, 0); 5};
答案：4 4 4。
原因：Java事件处理器在线程空闲之前不会运行。那么问题来了，如何让上述代码输出1 2 3？
1for( vari= 1;i&= 3;i++){ 2setTimeout(( function(a){ //改成立即执行函数3console.log(a); 4})(i), 0); 5}; 671//输出8293
25.写一个function，清除字符串前后的空格。（兼容所有浏览器）
使用自带接口trim()，考虑兼容性：
1if(! String.prototype.trim) { 2String.prototype.trim = function() { 3returnthis.replace( /^s+/, "").replace( /s+$/, ""); 4} 5} 67// test the function 8varstr = " tn test string ".trim(); 9alert(str == "test string"); // alerts "true"
26.Java中callee和caller的作用？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
那么问题来了？如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）
1varresult=[]; 2functionfn(n){ //典型的斐波那契数列3if(n== 1){ 4return1; 5} elseif(n== 2){ 6return1; 7} else{ 8if(result[n]){ 9returnresult[n]; 10} else{ 11//argument.callee()表示fn()12result[n]= arguments.callee(n -1)+ arguments.callee(n -2); 13returnresult[n]; 14} 15} 16} 中级Java：
1.实现一个函数clone，可以对Java中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚
考察点2：是否知道如何判断一个变量是什么类型的
考察点3：递归算法的设计
// 方法一：
Object.prototype.clone =
function(){
this.constructor ===
Array? [] : {};
this[e] ===
this[e].clone() :
//方法二：
/**12 * 克隆一个对象13 * @param Obj14 * @returns15 */
functionclone(Obj) {
instanceof
19buf = [];
//创建一个空的数组
vari = Obj.
while(i--) {
22buf[i] = clone(Obj[i]);
instanceof
26buf = {};
//创建一个空对象
//为这个对象添加新的属性
28buf[k] = clone(Obj[k]);
//普通变量直接赋值
2.如何消除一个数组里面重复的元素？
1vararr=[ 1, 2, 3, 3, 4, 4, 5, 5, 6, 1, 9, 3, 25, 4]; 2functiondeRepeat(){ 3varnewArr=[]; 4varobj={}; 5varindex= 0; 6varl=arr. 7for( vari= 0;i&l;i++){ 8if(obj[arr[i]]== undefined) 9{ 10obj[arr[i]]= 1; 11newArr[index++]=arr[i]; 12} 13elseif(obj[arr[i]]== 1) 14continue; 15} 16returnnewA 1718} 19varnewArr2=deRepeat(arr); 20alert(newArr2); //输出1,2,3,4,5,6,9,25
3.小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：
1functionDog() { 2this.wow = function() { 3alert(’Wow’); 4} 5this.yelp = function() { 6this.wow(); 7} 8}
小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）
1functionMadDog(){ 2this.yelp = function(){ 3varself= 4setInterval( function(){ 5self.wow(); 6}, 500); 7} 8} 9MadDog.prototype = newDog(); 1011//for test12vardog = newDog(); 13dog.yelp(); 14varmadDog = newMadDog(); 15madDog.yelp();
4.下面这个ul，如何点击每一列的时候alert其index?（）
1 &ulid=”test”&2 &li&这是第一条 &/li&3 &li&这是第二条 &/li&4 &li&这是第三条 &/li&5 &/ul&
1// 方法一：2varlis= document.getElementById( '2223').getElementsByTagName( 'li'); 3for( vari= 0;i& 3;i++) 4{ 5lis[i].index=i; 6lis[i].onclick= function(){ 7alert( this.index); 8}; 9} 1011//方法二：12varlis= document.getElementById( '2223').getElementsByTagName( 'li'); 13for( vari= 0;i& 3;i++) 14{ 15lis[i].index=i; 16lis[i].onclick=( function(a){ 17returnfunction() { 18alert(a); 19} 20})(i); 21}
5.编写一个Java函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。
/*** @param selector {String} 传入的CSS选择器。* @return {Array}*/
答案：（过长，点击打开）
6.请评价以下代码并给出改进意见。
1if( window.addEventListener){ 2varaddListener = function(el,type,listener,useCapture){ 3el.addEventListener(type,listener,useCapture); 4}; 5} 6elseif( document.all){ 7addListener = function(el,type,listener){ 8el.attachEvent( "on"+type, function(){ 9listener.apply(el); 10}); 11} 12}
不应该在if和else语句中声明addListener函数，应该先声明；
不需要使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测；
由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下
改进如下：
1 functionaddEvent(elem, type, handler){ 2 if(elem.addEventListener){ 3 elem.addEventListener( type, handler, false); 4 } elseif(elem.attachEvent){ 5 elem[ 'temp'+ type+ handler] = 6 elem[ type+ handler] = function(){ 7 elem[ 'temp'+ type+ handler].apply(elem); 8 }; 9 elem.attachEvent( 'on'+ type, elem[ type+ handler]); 10 } else{11 elem[ 'on'+ type] =12 }13 }
7.给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：
addSpace(“”) // -& ‘h e l l o w o r l d’
1String.prototype.spacify = function(){ 2returnthis.split( '').join( ' '); 3};
接着上述答题，那么问题来了
1）直接在对象的原型上添加方法是否安全？尤其是在Object对象上。(这个我没能答出？希望知道的说一下。)
2）函数声明与函数表达式的区别？
答案：在Jav中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。（函数声明提升）
8.定义一个log方法，让它可以代理console.log的方法。
可行的方法一：
1functionlog(msg) { 2console.log(msg); 3} 45log( "hello world!") // hello world!6
如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是：
1functionlog(){ 2console.log.apply( console, arguments); 3};
那么问题来了，apply和call方法的异同？
对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。 如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3]) 。
9.在Java中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
假设接第八题题干，我们要给每个log方法添加一个”(app)”前缀，比如’hello world!’ -&’(app)hello world!’。方法如下：
1functionlog(){ 2varargs = Array.prototype.slice.call( arguments); //为了使用unshift数组方法，将argument转化为真正的数组3args.unshift( '(app)'); 45console.log.apply( console, args); 6};
10.对作用域上下文和this的理解，看下列代码：
1varUser= { 2count: 1, 34getCount: function() { 5returnthis. count; 6} 7}; 89console.log( User.getCount()); // what?1011varfunc= User.getCount;12 console.log(func()); // what?
问两处console输出什么？为什么？
答案是1和undefined。
func是在winodw的上下文中被执行的，所以会访问不到count属性。
那么问题来了，如何确保Uesr总是能访问到func的上下文，即正确返回1。
答案：正确的方法是使用Function.prototype.bind。兼容各个浏览器完整代码如下：
1Function.prototype.bind = Function.prototype.bind || function(context){ 2varself = this; 34returnfunction(){ 5returnself.apply(context, arguments); 6}; 7} 89varfunc = User.getCount.bind(User); 10console.log(func());
11.原生JS的window.与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？
window.()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
1/* 2 * 传递函数给whenReady() 3 * 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用 4 */5varwhenReady = ( function() { //这个函数返回whenReady()函数6varfuncs = []; //当获得事件时，要运行的函数7varready = false; //当触发事件处理程序时,切换为true89//当文档就绪时,调用事件处理程序10functionhandler(e) { 11if(ready) return; //确保事件处理程序只完整运行一次1213//如果发生onreadystatechange事件，但其状态不是complete的话,那么文档尚未准备好14if(e.type === 'onreadystatechange'&& document.readyState !== 'complete') { 15return; 16} 1718//运行所有注册函数19//注意每次都要计算funcs.length20//以防这些函数的调用可能会导致注册更多的函数21for( vari= 0; i&funcs. i++) { 22funcs[i].call( document); 23} 24//事件处理函数完整执行,切换ready状态, 并移除所有函数25ready = true; 26funcs = null; 27} 28//为接收到的任何事件注册处理程序29if( document.addEventListener) { 30document.addEventListener( 'DOMContentLoaded', handler, false); 31document.addEventListener( 'readystatechange', handler, false); //IE9+32window.addEventListener( 'load', handler, false); 33} elseif( document.attachEvent) { 34document.attachEvent( 'onreadystatechange', handler); 35window.attachEvent( '', handler); 36} 37//返回whenReady()函数38returnfunctionwhenReady(fn) { 39if(ready) { fn.call( document); } 40else{ funcs.push(fn); } 41} 42})();
如果上述代码十分难懂，下面这个简化版：
1functionready(fn){ 2if( document.addEventListener) { //标准浏览器3document.addEventListener( 'DOMContentLoaded', function() { 4//注销事件, 避免反复触发5document.removeEventListener( 'DOMContentLoaded', arguments.callee, false); 6fn(); //执行函数7}, false); 8} elseif( document.attachEvent) { //IE9document.attachEvent( 'onreadystatechange', function() { 10if( document.readyState == 'complete') { 11document.detachEvent( 'onreadystatechange', arguments.callee); 12fn(); //函数执行13} 14}); 15} 16};
12.（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）
回答出概念即可，下面是几个要点
给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
mousedown事件触发后，开始拖拽
mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
mouseup时，拖拽结束
需要注意浏览器边界的情况
1functionsetcookie(name,value,days){ //给cookie增加一个时间变量2varexp = newDate(); 3exp.setTime(exp.getTime() + days* 24* 60* 60* 1000); //设置过期时间为days天4document.cookie = name + "="+ escape (value) + ";expires="+ exp.toGMTString(); 5} 6functiongetCookie(name){ 7varresult = ""; 8varmyCookie = ""+document.cookie+ ";"; 9varsearchName = "+name+"= ";10 var startOfCookie = myCookie.indexOf(searchName);11 var endOfC12 if(satrtOfCookie != -1){13 startOfcookie += searchName.14 endOfCookie = myCookie.indexOf("; ",startOfCookie);15 result = (myCookie.substring(startOfCookie,endOfCookie));16 }1718 }19 (function(){20 var oTips = document.getElementById('tips');//假设tips的id为tips21 var page = {22 check: function(){//检查tips的cookie是否存在并且允许显示23 var tips = getCookie('tips');24 if(!tips || tips == 'show')//tips的cookie不存在25 if(tips == "never_show_again ")26 },27 hideTip: function(bNever){28 if(bNever) setcookie('tips', 'never_show_again', 365);29 oTips.style.display = "none ";//隐藏30 },31 showTip: function(){32 oTips.style.display = "inline ";//显示，假设tips为行级元素33 },34 init: function(){35 var _this =36 if(this.check()){37 _this.showTip();38 setcookie('tips', 'show', 1);39 }40 oTips.onclick = function(){41 _this.hideTip(true);42 };43 }44 };45 page.init();46 })();
14.说出以下函数的作用是？空白区域应该填写什么？
1//define 2( function(window){ 3functionfn(str){ 4this.str= 5} 67fn.prototype.format = function(){ 8vararg = ______; 9returnthis.str.replace(_____, function(a,b){ 10returnarg[b]|| ""; 11}); 12} 13window.fn = 14})( window); 1516//use17( function(){ 18vart = newfn( '&p&&a href="{0}"&{1}&/a&&span&{2}&/span&&/p&'); 19console.log(t.format( '', 'Alibaba', 'Welcome')); 20})();
答案：访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容，返回一个格式化后的结果：
第一个空是：arguments
第二个空是：/{(d+)}/ig
15.用面向对象的Java来介绍一下自己。（没答案哦亲，自己试试吧）
答案： 对象或者Json都是不错的选择哦
* 链接：/coco1s/p/4029708.html
?? 达内web前端免费课程
针对零基础设置的HTML5+CSS3+Java入门课程，只要你喜欢且想了解web前端，但是不知道自己学的会不？适不适合自己学？都可以通过这样无成本的方式，对自己进行一次全面的检测，点击“阅读原文”直接抢达内12月份免费训练营~，给自己一个接触互联网高薪技术的机会。
达内上市集团
每年10万人选择达内培训
选择的人多自然是好培训
长按二维码关注我们
点击下方“阅读原文”抢web前端免费课程名额 ！
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
今日搜狐热点}