JavaScript面试题第二弹

21、如何判断一个对象是否属于某个类？

使用instanceof

if(a instanceof Person){

alert('yes');

}

22、new操作符具体干了什么呢?

（1）创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。

（2）属性和方法被加入到this引用的对象中。

（3）新创建的对象由this所引用，并且最后隐式的返回this。

var obj = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

23、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。

使用方法：

object.hasOwnProperty(proName)

其中参数object是必选项。一个对象的实例。

proName是必选项。一个属性名称的字符串值。

如果object具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回true，反之则返回false。

24、JSON的了解？

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。

它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小

如：{"age":"12", "name":"back"}

JSON字符串转换为JSON对象:

var obj =eval('('+ str +')');

var obj = str.parseJSON();

var obj = JSON.parse(str);

JSON对象转换为JSON字符串：

var last=obj.toJSONString();

var last=JSON.stringify(obj);

[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid #"+(~~(Math.random()*(1<<24))).toString(16)})能解释一下这段代码的意思吗？

25、js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（用得最多）、按需异步载入js

26、Ajax是什么?如何创建一个Ajax？

ajax的全称：AsynchronousJavascript And XML。

异步传输+js+xml。

所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

(3)设置响应HTTP请求状态变化的函数

(4)发送HTTP请求

(5)获取异步调用返回的数据

(6)使用JavaScript和DOM实现局部刷新

27、Ajax解决浏览器缓存问题？

（1）在ajax发送请求前加上anyAjaxObj.setRequestHeader("If-Modified-Since","0")。

（2）在ajax发送请求前加上anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。

（3）在URL后面加上一个随机数："fresh=" + Math.random();。

（4）在URL后面加上时间搓："nowtime=" + new Date().getTime();。

（5）如果是使用jQuery，直接这样就可以了$.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。

28、同步和异步的区别?

同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.

同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。

异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

29、如何解决跨域问题?

jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面

30、模块化开发怎么做？

立即执行函数,不暴露私有成员

var module1 = (function(){

var_count = 0;

var m1 =function(){

//...

};

var m2 =function(){

//...

};

return {

m1 :m1,

m2 : m2

};

})();

31、AMD（Modules/Asynchronous-Definition）、CMD（CommonModule Definition）规范区别？

Asynchronous Module Definition，异步模块定义，所有的模块将被异步加载，模块加载不影响后面语句运行。所有依赖某些模块的语句均放置在回调函数中。

区别：

（1）对于依赖的模块，AMD是提前执行，CMD是延迟执行。不过RequireJS从2.0开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD推崇as lazy as possible.

（2）CMD推崇依赖就近，AMD推崇依赖前置。看代码：

// CMD

define(function(require, exports, module) {

var a = require('./a')

a.doSomething()

//此处略去100行

var b = require('./b') //依赖可以就近书写

b.doSomething()

// ...

})

// AMD默认推荐

define(['./a', './b'], function(a, b) { //依赖必须一开始就写好

a.doSomething()

//此处略去100行

b.doSomething()

// ...

})

32、异步加载JS的方式有哪些？

(1)defer，只支持IE

(2)async：

(3)创建script，插入到DOM中，加载完毕后callBack

33、documen.write和innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

34、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

（1）创建新节点

createDocumentFragment()    //创建一个DOM片段

createElement()   //创建一个具体的元素

createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

getElementsByTagName()    //通过标签名称

getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

getElementById()    //通过元素Id，唯一性

35、.call()和.apply()的区别？

例子中用add来替换sub，add.call(sub,3,1)== add(3,1)，所以运行结果为：alert(4);

注意：js中的函数其实是对象，函数名是对Function对象的引用。

function add(a,b)

{

alert(a+b);

}

function sub(a,b)

{

alert(a-b);

}

add.call(sub,3,1);

36、jquery.extend与jquery.fn.extend的区别？

* jquery.extend为jquery类添加类方法，可以理解为添加静态方法

* jquery.fn.extend:

源码中jquery.fn= jquery.prototype，所以对jquery.fn的扩展，就是为jquery类添加成员函数

使用：

jquery.extend扩展，需要通过jquery类来调用，而jquery.fn.extend扩展，所有jquery实例都可以直接调用。

37、Jquery与jQuery UI有啥区别？

*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。

提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

38、jquery中如何将数组转化为json字符串，然后再转化回来？

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

$.fn.stringifyArray = function(array) {

return JSON.stringify(array)

}

$.fn.parseArray = function(array) {

return JSON.parse(array)

}

然后调用：

$("").stringifyArray(array)

39、针对jQuery的优化方法？

*基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。

*频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。

比如：varstr=$("a").attr("href");

*for (var i = size; i < arr.length; i++){}

for循环每一次循环都查找了数组(arr)的.length属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快：

for(var i = size, length = arr.length; i < length; i++) {}

40、如何判断当前脚本运行在浏览器还是node环境中？（阿里）

this === window ? 'browser' : 'node';

通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中

41、jQuery的slideUp动画，如果目标元素是被外部事件驱动,当鼠标快速地连续触发外部元素事件,动画会滞后的反复执行，该如何处理呢?

jquery stop():如：$("#div").stop().animate({width:"100px"},100);

42、那些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

43、JQuery一个对象可以同时绑定多个事件，这是如何实现的？

*多个事件同一个函数：

$("div").on("click mouseover", function(){});

*多个事件不同函数

$("div").on({

click: function(){},

mouseover: function(){}

});

44、知道什么是webkit么?知道怎么用浏览器的各种工具来调试和debug代码么?

Chrome,Safari浏览器内核。

45、用js实现千位分隔符?

function commafy(num) {

return num && num

.toString()

.replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {

return $1 + ",";

});

}

console.log(commafy(1234567.90));//1,234,567.90

46、检测浏览器版本版本有哪些方式？

功能检测、userAgent特征检测

比如：navigator.userAgent

//"Mozilla/5.0 (Macintosh; Intel MacOS X 10_10_2) AppleWebKit/537.36

(KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36"

47、What is a Polyfill?

polyfill是“在旧版浏览器上复制标准API的JavaScript补充”,可以动态地加载JavaScript代码或库，在不支持这些标准API的浏览器中模拟它们。

例如，geolocation（地理位置）polyfill可以在navigator对象上添加全局的geolocation对象，还能添加getCurrentPosition函数以及“坐标”回调对象，

所有这些都是W3C地理位置API定义的对象和函数。因为polyfill模拟标准API，所以能够以一种面向所有浏览器未来的方式针对这些API进行开发，

一旦对这些API的支持变成绝对大多数，则可以方便地去掉polyfill，无需做任何额外工作。

48、做的项目中，有没有用过或自己实现一些polyfill方案（兼容性处理方案）？

比如：html5shiv、Geolocation、Placeholder

49、使用JS实现获取文件扩展名？

function getFileExtension(filename) {

return filename.slice((filename.lastIndexOf(".") - 1>>> 0) + 2);

}

String.lastIndexOf()方法返回指定值（本例中的'.'）在调用该方法的字符串中最后出现的位置，如果没找到则返回-1。

对于'filename'和'.hiddenfile'，lastIndexOf的返回值分别为0和-1无符号右移操作符(»>)将-1转换为4294967295，将-2转换为4294967294，这个方法可以保证边缘情况时文件名不变。

String.prototype.slice()从上面计算的索引处提取文件的扩展名。如果索引比文件名的长度大，结果为""。

京程一灯，梦起的地方，我们始终相信通过努力，可以改变自己的命运。

我们始终相信，通过坚持不懈，可以为大家解决更多的前端技术问题。

我们始终相信，时间可以证明，我们可以为广大IT从业者解决前端学习路线。

HTML5，CSS3，Web前端，jquery，javascript，前端学习路线，各类问题，我们都可以为你解决。

更多技术好文，前端问题，面试技巧，请关注京程一灯（原一灯学堂）