1.JavaScript面试

‭‭大酋长

1.26. 什么是正则表达式？在 JavaScript 中，如何应用正则表达式？

参考答案：

正则表达式(Regular Expression) 本身就是一个字符串，由一些普通字符和特殊字符

组成的，用以描述一种特定的字符规则的表达式。 正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如：词语出现频率统计、验证字符串是否符合邮箱格式、屏蔽一篇帖子中的限制性词语等。许多程序设计语言都支持利用正则表达式进行字符串操作。

在 JavaScript 中，正则表达式的应用分为两种：

1、结合 String 对象的 replace、search 和 match 方法，实现对字符串的替换、  查 找和匹配；

2、定义正则表达式对象，实现对字符串的复杂匹配操作。

1.27. 读代码，写结果

写出下列代码的输出结果：

var regexp = /\bdo\b/ig;

var data = 'He does told to Do,do.';

console.log(data.search(regexp));

参考答案：

上述代码的输出结果为 16。

String 的 search(regexp) 方法，用于返回第一次出现匹配指定正则表达式的下标， 若没有匹配则返回-1。

试题中，正则表达式 \bdo\b 表示匹配完整的单词 do，且不区分大小写。而变量 data

中，第一次出现单词 do（不区分大小写）的位置为 16。

undefined1.28. 阅读如下代码

function add(num) { try {

num = Number(num); if (isNaN(num)) {

throw new Error('Arguments is NaN');

}

console.log('try block end');

} catch (e) { console.log('catch block'); return;

} finally {

console.log('finally block');

}

console.log('function end');

}

add('10x');

上述代码运行后，输出结果为？

参考答案：

上述代码运行，会先输出 catch block；再输出 finally block。

这是因为，执行代码 num = Number(num); 时，因为传入的参数值为字符串“10x”，

无法转换为 number 类型，则产生错误，运行到 catch 语句块中，输出“catch bloc”； 而 finally 块始终会运行，因此继续输出“finally block”。程序发生异常后，将退出，因此 不再执行其他语句。

1.29 简要描述 JavaScript 中的匿名函数

参考答案：

匿名函数是指在定义时没有指定名字的函数，且定义后往往直接调用。如：

function(num1,num2) console.log( num1 + num2 );

}

这种方式所定义的匿名函数，往往需要直接调用，如：

(function (num1, num2) { console.log(num1 + num2);

})(10,20);

匿名函数常用于定义不需要重复使用的函数，用完即释放。另外，对于直接调用的匿名

函数而言，可以看成是一个临时的命名空间，其区域内定义的所有变量，不会污染到全局命 名空间。

1.30 简要描述 JavaScript 中的作用域链

参考答案：

任何一段 JavaScript 代码都对应一个作用域链，作用域链中存放一系列对象，代码中

声明的变量将作为对象的属性存放。

在 JavaScript 的顶层代码中，作用域链由一个全局对象组成；当定义一个函数时，它 保存一个作用域链，作用域链上有两个对象，一个是函数对象，一个是全局对象。

每当一个函数被调用时，会创建一个活动对象（也叫上下文对象），函数中的局部变量 将作为该对象的属性存放。

当需要使用一个变量时，将从作用域链中逐个查找对象的属性。比如：要使用变量 a， 将先查找作用域中的第一个对象是否有属性 a，如果有就使用；如果没有就查找作用域链中 下一个对象的属性，以此类推。如果作用域链上没有任何一个对象含有属性 x，则认为这段 代码的作用域链上不存在 x，将抛出引用错误异常。

当函数调用完成后，如果没有其他引用指向为此次调用所创建的上下文对象，该对象将

被回收。

1.31. 阅读如下代码

var a = 100;

function f() {

var a = 200;

function g() {

return a;

}

return g;

}

console.log(f()());

上述代码运行后，输出结果为？

参考答案：

上述代码运行，会输出 200。

上述代码意味着，先执行 f()，得到该函数内嵌套的一个函数对象 g，然后调用这个嵌 套的函数。

定义函数 f 时，它保存一个作用域链，作用域链上有两个对象，一个是函数对象，一 个是全局对象，此时，全局变量 a 是全局对象的属性，和函数对象 f 无关。

执行函数 f 时，会创建一个活动对象，其中保存变量 a 作为函数 f 的属性而存在。 而函数 g 嵌套定义在函数 f 里，对其访问变量 a 时，它没有变量 a，则继续往下查找函数 f。找到函数 f 的属性 a 并返回。因此，输出结果为 200。

这种函数将变量包裹起来，外部代码可以通过内嵌函数 g 来访问函数 f 内的局部变量

的方式，也称为闭包。

1.32. 简要描述你对闭包的理解

参考答案：

函数对象可以通过作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域

内，这种特性称为闭包。这意味着函数变量可以隐藏于作用域链之内，看起来好像是函数将 变量包裹了起来。这种方式常用于共享函数内的私有变量。

闭包有如下应用特征：

1、局部变量：在函数中定义有共享意义（如：缓存、计数器等）的局部变量（注：定 义成全局变量会对外造成污染）；

2、内嵌函数：在函数中声明有内嵌函数，内嵌函数对函数中的局部变量进行访问；

3、外部使用：函数向外返回此内嵌函数，外部可以通过此内嵌函数持有并访问声明在 函数中的局部变量，而此变量在外部是通过其他途径无法访问的。

1.33. 阅读如下代码

var n = 10;

function counter() {

var n = 0;

var g = function () {

return ++n;

};

return g;

}

var c1 = counter();

console.log(c1());

console.log(c1());

console.log(c1());

上述代码运行后的输出为？

参考答案：

上述代码运行后，分别输出数字 1、2、3。 首先从应用上分析，这是一个闭包的典型应用：模拟计数器。调用一次函数 counter，则得到一个计数器，即代码中的变量 c1，用于统计被调用的次数；每运行一次计数器 c1， 则访问次数加 1。因此分别输出数字 1、2、3。

其次从代码原理来分析：函数  counter 返回其内嵌函数 g，该函数中包裹了函数

counter 的局部变量 n，其初始值为 0；每次运行函数 g，均访问相应的局部变量 n，从 而实现累加计数的效果。

1.34. 阅读如下代码

for (var i = 0; i < 3; i++) {

setTimeout(function () { alert(i); }, 3000);

}

上述代码希望实现：3s 后弹出三次警告对话框，对话框中显示的数字分别为 0、1、2。

问，上述代码能否实现所需要的效果？如果不能，应该如何实现？

参考答案：

上述代码不能实现所需要的效果。会在 3s 后弹出三次警告对话框，对话框中的数字均 为 3。这是因为，循环结束后，变量 i 的值为 3；当 3s 后运行循环中内嵌的函数，执行语句alert(i) 时，访问的是循环中的变量 i。因此，三次弹出均为数值 3。 如果希望实现分别弹出数字 0、1、2，需要将代码修改如下：

for (var i = 0; i < 3; i++) { (function (n){

setTimeout(function () { alert(n); }, 3000);

})(i);

}

修改后的代码中，使用匿名函数封装一次性定时器的代码，并在调用匿名函数时，将变

量 i 的值作为参数传入。每次循环中，调用一次匿名函数，则启动一个定时器对象，将相 应的数字传入。3s 后执行函数时，不再访问循环中的局部变量 i，则会依次弹出 0、1、2。

1.35. 简述 JavaScript 中创建自定义对象的方式

参考答案：

自定义对象（user-defined object）指由用户创建的对象，兼容性问题需要由编写者注意。创建自定义对象的方式有：

1、对象直接量

2、new Object()

3、function 对象模板

4、Object.create()

1.36. 查看如下 JavaScript 代码：

var p = new User("mary");

alert(p.name);//弹出 mary

p.introduce();//弹出 i am mary

为使上段代码正确运行，请定义对象 User。

参考答案：

需要使用 function 模板创建对象 User，代码如下：

function User(name) {

this.name = name;

this.introduce = function () {

alert("i am " + this.name);

};

}

1.37.  JavaScript 中， this 关键字的作用是什么？

参考答案：

笼统的说，关键字 this 指向当前对象。比如，顶级代码中的 this 指向全局对象；在 指定元素事件的时候，this 指定当前发生事件的元素对象。

对于嵌套函数，如果嵌套函数作为方法被调用，其 this 指向调用它的对象；如果作为 函数调用，this 是全局对象或者为 undefined（严格模式下）。

1.38. 查看如下 JavaScript 代码：

var o = {

m: function () { console.log(this); f();

function f() { console.log(this);

}

}

};

o.m();

请描述上述代码的运行结果。

参考答案：

上述代码在浏览器中运行后，第一行的输出结果类似于：Object {m: function}，表示 this 关键字指向调用它的当前对象；第二行的输出结果为 Window，表示 this 关键字指向 全局变量。

这是因为，调用对象 o 的方法 m，在该方法中直接使用 this 关键字，则指向调用它的

对象；然后运行嵌套函数  f 时，this 指向全局对象，在浏览器中运行时，全局对象为Window 对象。需要注意的是，如果使用严格模式，则第二行会输出 undefined。

1.39. 查看如下 JavaScript 代码：

var a = 10; var foo = {

a: 20,

bar: function () { var a = 30; return this.a }

}

console.log(foo.bar()); console.log((foo.bar = foo.bar)());

上述代码运行后，输出结果是？

参考答案：

上述代码运行后，先输出 20。这是因为调用对象 foo 的 bar() 方法时，this 关键字指 向调用它的对象，即 foo，因此，输出该对象中所定义的属性值。

第二行将输出 10。这是属于函数调用，此时，非严格模式下 this 指代全局对象 window， 因此 a 的值为 10。

1.4 0. 简述你对 JavaScript 中原型的理解

参考答案：

在 JavaScript 中，函数本身就是一个包含了方法和属性的对象。每个函数中都有一个

prototype 属性，该属性所存储的就是原型对象。 原型对象用来保存共享属性和方法，可以通过原型来实现为对象扩展属性，实现继承。

1.41. 查看如下 JavaScript 代码：

function Emp(ename, salary) {

this.ename = ename;

this.salary = salary; this.toString = function(){

return this.ename + ":" + this.salary;

};

}

var emp1 = new Emp("mary",3500); var emp2 = new Emp("john", 5500);

Emp.prototype.hireDate = "2015/05/01"; delete emp1.ename;

delete Emp.prototype.hireDate; console.log(emp1.toString() + ":" + emp1.hireDate); console.log(emp2.toString() + ":" + emp2.hireDate);

上述代码运行后，输出结果是？

参考答案：

第一行输出为：undefined:3500:undefined 第二行输出为：john:5500:undefined

JavaScript 中，每个函数都有一个 prototype 属性，该属性引用着该函数的原型对象， 原型对象中包含着当前函数所有实例共享的方法和属性。

使用函数的 prototype 属性可以向函数的原型对象添加或删除属性和方法，并且这些 属性和方法是这一类对象所共享的。

可以使用 delete 关键字删除对象的属性，包括自有属性和原型属性。

1.42. 简要描述 JavaScript 中的自有属性和原型属性

参考答案：

自有属性是指，通过对象的引用添加的属性，此时，其它对象可能无此属性。对于自有

属性，是各个对象所特有的、彼此独立的属性。比如：

emp1.job = 'Coder';

原型属性是指从原型对象中继承来的属性，一旦原型对象中属性值改变，所有继承自该 原型的对象属性均改变。比如：

Emp.prototype.dept = '研发部';

当需要检测对象的自有属性时，可以使用 hasOwnProperty()方法。另，还可以使用 in

操作检测对象及其原型链中是否具备指定属性。 需要注意的是，在检测对象属性时，先检测自有属性，再检测原型属性。

1.43. 查看如下 JavaScript 代码：

function Hero() { this.name = "unknown";

}

Hero.prototype.age = 20; var hero = new Hero();

console.log('name' in hero); console.log(hero.hasOwnProperty('name')); console.log('age' in hero); console.log(hero.hasOwnProperty('age')); hero.age = 30; console.log(hero.hasOwnProperty('age'));

上述代码运行后，输出结果是？

参考答案：

输出结果分别为 true、true、true 、false 和 true。

因为在构造函数中定义了属性 name，因此变量 hero 拥有自有属性 name。因此在 对 hero 用 in 操作符检测 name 属性时，先检测 name 属性为自有属性还是原型属性， 则输出 true；使用 hasOwnProperty()进行判断也是输出 true。

使用函数的 prototype 向函数的原型添加属性时，添加的属性 age 为原型属性。因 此，下面代码：

console.log('age' in hero); console.log(hero.hasOwnProperty('age'));

使用 in 操作符判断时，先判断是否为自有属性，如果没有，则在原型链中查找属性

age，因此第一行输出 true；但是 age 并非自有属性，所以第二行输出 false。 此时，再添加代码：

hero.age = 30;

这是为 hero 定义了同名的自有属性 age，其值为 30。因此，此时再检测 hero 对象是 否有自有属性 age 时，将输出 true。

1.44. 简要描述你对原型链的理解

参考答案：

每个函数中都有 prototype 属性，该函数被 new 操作符用于创建对象。将一个函数的

prototype 属性指向某个对象，由此形成了一条链，称之为原型链。

可以使用 isPrototypeOf()方法判定一个 prototype 对象是否存在于另一个对象的原型 链中。如果是，返回 true，否则返回 false。

1.45. 简要描述 JavaScript 中的继承

参考答案：

在 JavaScript 中，继承都是源于原型，有多种实现方式。比如：

1.    修改构造函数的原型，为该构造函数创建的对象指定统一的父级对象。代码如下：

B.prototype = new A();

2.    只继承于原型（尽可能地将可重用的属性和方法添加到原型中），代码如下：

B.prototype = A.prototype;

3.    单独修改一个对象的原型，而不影响其他对象的原型。代码如下：

var b1 = new B(); Object.setPrototypeOf(b1, new A());

4.    修改构造函数，这将影响使用该构造函数创建的所有对象。代码如下：

function B() {

Object.setPrototypeOf(this, new A());

}

1.46. 查看如下 JavaScript 代码：

function Hero() { this.name = "unknown";

}

Hero.prototype.name = "Caesar";

var hero = new Hero(); console.log(hero.name);

delete hero.name; console.log(hero.name);

delete Hero.prototype.name; console.log(hero.name);

上述代码运行后，输出结果是？

上述代码运行后，首先输出 unknown；然后输出 Caesar；最后输出 undefined。 查找对象属性时，先查找自有属性，因此，第一次输出的是 hero 的自有属性 name 的值，该属性的值从构造函数中继承而来，即为“unknown“；删除 hero 的自有属性后，再试图输出 name 属性时，则查找其原型链中的属性 name 的值并输出，即为“Caesar”； 继续删除 hero 的原型属性后，则输出“undefined”。

1.47. 查看如下 JavaScript 代码：

function A() { this.name = "a";

this.toString = function () { return this.name };

}

function B() { this.name = "b";

}

var b1 = new B(); console.log(b1.toString());

B.prototype = new A(); var b2 = new B();

console.log(b2.toString());

上述代码运行后，输出结果是？

参考答案：

上述代码运行后，首先输出[object Object]；然后输出 b。

这是因为，虽然修改了 B 的原型，但是，只影响修改之后的对象。因此，对象 b1 依 然使用默认的从 Object 继承而来的 toString() 方法，因此输出对象的类型和名称。

对象 b2 是在修改了 B 的原型之后创建的，因此将使用 A 中所定义的 toString() 方 法，将输出字符“b”。

1.48. 简要描述 Call 和 apply 的区别

参考答案：

call()和 apply()都用于间接调用函数。

call 方法用于调用一个对象的一个方法，并以另一个对象替换当前对象。即，任何函 数可以作为任何对象的方法来调用，哪怕这个函数并非那个对象的方法。语法如：

call([thisObj[,arg1[, arg2[,  [,.argN]]]]])

其中，第一个参数 thisObj 要调用函数的上下文，即将被用作当前对象的对象。其他参

数为可选参数，表示将被传递方法参数序列。

apply()和 call()在作用上是相同的，但两者在参数上有区别的。它俩的第一个参数相同， 不同的是第二个参数。对于 apply()，第二个参数是一个参数数组，也就是将多个参数组合 成为一个数组传入。如：

func.call(func1,var1,var2,var3) func.apply(func1,[var1,var2,var3])

1.49. 查看如下 JavaScript 代码：

function A() {

this.name = "a";

this.introduce = function () { console.log("My name is " + this.name) };

}

function B() {

this.name = "b";

}

var a1 = new A();

var b1 = new B();

a1.introduce.call(b1);

上述代码运行后，输出结果是？

参考答案：

上述代码运行后，先弹出显示 undefined，再弹出显示 2。

第一行代码运行后，变量 a 和 b 都指向对象{n:1}，第二行代码运行，先为对象 {n:1} 添加新属性 x，其值为 {n:2}。此时，对象{n:1}形如 ｛n:1,x:{n:2}｝。然后创建新对象 {n:2}， 并将变量 a 指向这个新对象，而变量 b 依然指向原有对象。

因此，a.x 将输出 undefined，因为此时新对象中只有属性 n 没有属性 x；b.x.n 将表 示向原有对象的中的新属性，因此输出 2。