JavaScript面试题

JS相关问题

1.解释下 JavaScript中`this`是如何工作的。

JavaScript 有一套完全不同于其它语言的对this的处理机制。在五种不同的情况下，this 指向的各不相同。

1、全局范围内this将会指向全局对象，默认是 window；
2、函数调用时，this也会指向全局对象；
3、方法调用时，this指向的是调用此方法的对象；
4、调用构造函数（如果函数倾向于和 new 关键词一块使用，则我们称这个函数是构造函数时，在函数内部，this指向新创建的对象；
5、显式设置 this，当使用 Function.prototype上的call()或者apply() 方法时，函数内的this将会被显式设置为函数调用的第一个参数。如下的代码中，
```
				
					var n = 0;
					function output(){
						alert(this.x);
					}
					var bar = {};
					bar.n = 1;
					bar.s = output;
					bar.s.apply();//0
					bar.s.apply(bar);//1
				
			
```
apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为 0；把apply()的参数为bar 后，运行结果就变成了1，说明这时this代表的是对象bar。

2.解释下事件代理。

当页面中存在大量元素，而且每一个都要一次或多次绑定事件处理器（比如 onclick）时，由于每绑定一个事件处理器都是有代价的，所以这种情况会随着 DOM 元素的增多而严重影响页面性能。

一个简单而优雅的处理 DOM 事件的技术是事件代理（event delegation）机制。它是基于这样一个事实：事件逐层冒泡并能被父级元素捕获。使用时间代理，只需给外层元素绑定一个处理器，就可以处理在其子元素上出发的所有事件。

3.解释下原型继承的原理。

JavaScript 中的对象是基于原型的。对象通过一个内部属性绑定到它的原型。默认情况下，所有对象都是对象 Object的实例，并继承了所有基本方法，比如 toString()。同时，也可以定义并使用构造器来创建另一种类型的原型：

			
				// 定义
				function Book(title, publisher) {
				    this.title = title;
				    this.publisher = publisher;
				}

				Book.prototype.sayTitle = function () {
				    alert(this.title);
				};

				var book1 = new Book("JavaScript: The Good Parts", "Yahoo! Press");

				book1.sayTitle();
				aler(book1.toString());

构造器Book用来创建一个新的Book实例，叫book1。实例book1的原型是Book.prototype，而Book.prototype的原型是Object。这个过程创建了一个原型链。

4.AMD、CMD、ComonJS

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。异步方式加载模块，模块的加载不影响它后面语句的执行。所有依赖这个模块的语句，都定义到一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD规范使用define方法定义模块：

	 define(["/libs/jquery"], function(jquery){
        function log(){
            alert("hello world!");
        }
        return {
            log: log
        }
    });

当然AMD也允许输出模块兼容CommonJS规范:


	define(function(require, exports, module){
        var module = require("module");
        module.doSometing( );
        exports.do = function(){
            module.doSometing( );
        }
    });

Commonjs是用在服务器端的，同步的。一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。
在CommonJS中有一个全局性方法 require(),用于加载模块。

	 //example.js
    module.exports = function( ){ };
    example.message = "hi";
    //main.js
    var example = require("./example");

CommonJS加载模块是同步的，只有加载完成，才能执行后面的操作，主要是由于服务端的编程模块文件都存在于本地硬盘，所以加载较快。

CMD是SeaJS 在推广过程中对模块定义的规范化产出

对于依赖的模块AMD是提前执行，CMD是延迟执行。不过RequireJS从2.0开始，也改成可以延迟执行(根据写法不同，处理方式不通过)。

CMD推崇依赖就近，AMD推崇依赖前置。

	//AMD 
	define(['./a','./b'], function (a, b) { 
	    //依赖一开始就写好 
	    a.test(); 
	    b.test(); 
	}); 
	
	
		//CMD 
	define(function (requie, exports, module) { 
	    //依赖可以就近书写 
	    var a = require('./a'); 
	    a.test(); 
	    ... 
	    //软依赖 
	    if (status) { 
	        var b = requie('./b'); 
	        b.test(); 
	    } 
	});

AMD的api默认是一个当多个用，CMD严格的区分推崇职责单一。例如：AMD里require分全局的和局部的。CMD里面没有全局的 require,提供seajs.use()来实现模块系统的加载启动。CMD里每个API都简单纯粹。

5.你是如何测试 JavaScript 代码的？

一、利用 FireBug 或 Chrome Developer Tool 进行测试。二、使用单元测试工具 QUnit、YUI Test 等。

6.什么是哈希表

哈希表是一种根据关键字直接访问存储位置的数据结构。如 PHP 中的关联数组、Python 中的字典等，都是属于哈希表结构的数据类型。

7.解释下为什么接下来这段代码不是 IIFE（立即调用的函数表达式）：`function foo(){ .. }()`。要做哪些改动使它变成 IIFE？

将其改为如下的匿名函数即可实现 IIFE：


    	(function () {
    		// code
		})();

8.描述以下变量的区别：`null`，`undefined` 或 `undeclared`？该如何检测它们？

null 表示“没有对象”，即该处不应该有值。典型用法是：1、作为函数的参数，表示该函数的参数不是对象；2、作为对象原型链的终点。
undefined 表示“缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：1、变量被声明了，但没有赋值时，就等于 undefined；2、调用函数时，应该提供的参数没有提供，该参数等于 undefined；3、对象没有赋值的属性，该属性的值为 undefined；4、函数没有返回值时，默认返回 undefined。

9.什么是闭包，如何使用它，为什么要使用它？

闭包就是由函数创造的一个词法作用域，里面创建的变量被引用后，可以在这个词法环境之外自由使用。闭包通常用来创建内部变量，使得这些变量不能被外部随意修改，同时又可以通过指定的函数接口来操作。详解地址下面是一个闭包：


		var Counter = function () {
		    var count = 0;
		    return function () {
		        return count++;
		    }
		}
		var a = Counter();
		a();        // 0
		a();        // 1

10.请举出一个匿名函数的典型用例？

匿名函数可以用作回调函数执行，可以防止全局变量污染。
此外在 JS 框架中常使用匿名函数来避免全局变量的污染。

11.指出下列代码的区别：

		
		function Person(){} 
		var person = Person(); 
		var person = new Person();

第一行是定义了一个函数Person()；第二行代码是执行函数Person()并将其返回值复制给变量person，如果Person()是一个构造器函数的话，新的对象将不会被创建，并且this 将被绑定到全局对象上；第三行代码是用构造函数 Person()构造一个实例对象person。

12.`.call`和`.apply`的区别是什么？

Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments)

13.例举3种强制类型转换和2种隐式类型转换?

强制（parseInt,parseFloat,number） 隐式（== ===）

14.`document load`和`document ready`的区别

document.onload是在结构和样式加载完才执行js。document.ready原生种没有这个方法，jQuery中有$().ready(function)

15.”==”和“===”的不同

前者会自动转换类型后者不会

16.JavaScript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化内置对象为gload Math等不可以实例化的宿主为浏览器自带的document,window等

17.事件委托是什么?

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行。

18.JavaScript的同源策略

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

19.如何阻止事件冒泡和默认事件

canceBubble return false

20.ajax请求的时候get 和post方式的区别

一个在url后面一个放在虚拟载体里面有大小限制安全问题应用不同一个是论坛等只需要请求的，一个是类似修改密码的

21.JavaScript的`typeof`返回哪些数据类型

Object number function boolean underfind

22.`split()`、`join()`的区别

前者是切割成数组的形式，后者是将数组转换成字符串

23.数组方法`pop()push()unshift()shift()`

push()尾部添加 pop()尾部删除 Unshift()头部添加 shift()头部删除

24.你如何从浏览器的 URL 中获取查询字符串参数

var query = window.location.search

25.请指出 .bind()，.live() 和 .delegate() 的区别。

.bind()直接将事件处理函数绑定到元素上。 .live()和.delegate() 则是将事件处理函数绑定到一个特定父元素上，当事件冒泡到这个级时，再对目标元素执行事件处理函数，其中.live()默认绑定到 document。

		
			$('a').bind('click', function () { alert('That tickles!') });
			$('a').live('click', function () { alert('That tickles!') });
			$('.container').delegate('a', 'click', function () { alert('That tickles!') });

26.请指出`$`和`$.fn`的区别，或者说出`$.fn`的用途

首先需要知道的是，$是一个封装好的jQUery类，而$.fn是 $.prototype的简写形式。$.fn常用作给 jQuery实例扩展方法，在编写jQuery插件时使用。

27.请指出 .get()，[]，.eq() 的区别。

.eq()返回的是一个jQuery对象，所以可以使用jQuery对象的方法，而.get()返回一个原生 DOM 对象。

Top