Front End Developer Questions 前端开发人员问题(三)JavaScript部分

问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/

三、javascript
1、介绍JavaScript的基本数据类型。
答;1. Number 数字类型
2. String 字符串类型
3. Boolean 布尔类型
4. Function 函数
5. Object 对象
6. Null
7. Undefined 没有定义类型

2、说说写JavaScript的基本规范?
答:1、命名规范
1-1,javascript文件:js后缀为.js中,尽量减少html中的js代码。因为存在js代码会明显增加文件大

小,且不能对其进行缓存和压缩。
1-2,缩进单位是4个空格。避免使用tab键来缩进。因为tab始终没有统一tab长短标准,空格会增加文

件的大小,但是可以忽略。
1-3,每行长度不超过80个字符。
1-4。注释,让注释有意义
1-5,变量声明。所有变量必须在使用前通过var进行申明。
1-6,函数声明。所有函数在使用前进行声明。
1-7,命名。大小写字母,10个数字和下划线组成。

2、封装技巧
js是脚本语言。基于ECMA脚本设计的语言,还能巧妙的设计实现一些面向对象语言的基本特性。例如:

类,多态,继承。。。。

2.1类:静态类和普通类
2.1.1静态类
通过一个简单的object对象来模拟一个静态类。
//定义静态类
var
2.1.2普通类
普通类通过function来模拟的,我们通过new关键字来实现当前类的一个实例。

区别:静态类和普通类差别除了声明上和访问上不同外,普通类还有一个特点就是我们可以定义访问类

中的成员的访问级别。而静态类中所有的成员都是public。

2.2继承
js中继承是通过他本身的原型机制实现的,js下的继承分为:原型继承和原型子类继承。
2.2.1原型继承

2.2.2原型子类继承

2.3重载
由于js的方法名如果相同,方法被覆盖,所以我们只能变相实现重载。

3、jquery使用建议
3.1尽量减少jquery提供的对dom元素的访问和操作方法
3.2优先采用jquery扩展函数,并且使用jq连写和选择表达式来减少代码行数。
3.3尽量避免给dom元素绑定多个相同类型的事件处理函数,可以将多个相同类型时间处理函数合并到一

个处理函数,通过数据状态来处理分支。
3.4尽量避免使用toggle时间。

4、ajax使用
4.1页面初次加载时,尽量在web服务器一次性输出所有相关的数据,只在页面加载完成之后,用户进行

操作时采用采用ajax进行交互。
4.2同步ajax在iE上会产生页面假死的问题。所以建议采用异步ajax。
4.3尽量减少ajax请求次数
4.4ajax安全问题,对于敏感数据在服务器端处理,避免在客户端处理过滤,比如compass list数据。
对于关键的业务逻辑代码也必须放在服务器端处理。

5、JavaScript有几种类型的值?(堆:原始数据类型和 栈:引用数据类型),你能画一下他们的内存

图吗?
答:基本数据类型存储在栈中,引用数据类型(对象)存储在堆中,指针放在栈中。两种类型的区别是

:存储位置不同;原始数据类型直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于

被频繁使用数据,所以放入栈中存储;引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固

定,如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该

实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。

6、Javascript如何实现继承?
答:构造继承,原型继承,(实例继承,拷贝继承)。构造函数继承可以将构造函数的属性拷贝给实例

(*.call(this,[]))。但是缺点是无法实现函数复用。原型继承可以实现函数复用,但是所有实例共

享一个属性,任意一个实例改变原型属性都会改变其它实例的属性值。推荐采用构造函数继承传递属性

(拷贝),原型继承传递方法。

7、Javascript创建对象的几种方式?
答:1.对象字面量的方式,var obj={};{}是字面量,可以立即求值;2.用function来模拟无参的构造

函数,再定义属性;3.用function模拟构造函数,利用this;function Rectangle(w,h)

{this.width=w;this.height=h;} var rect=new Rectangle(4,8); 4.利用工厂方式(内置对象

Object,本质是方法),var obj=new Object();;5.利用原型方式来创建;6.混合方式来创建。

8、Javascript作用链域?
答;当代码在一个环境中执行时,会创建变量对象的一个作用域链。如果是个函数,则将其活动对象作

为变量对象。活动对象在最开始只包含一个arguments对象。而下一个变量对象则来自下一个包含环境

。如此一直延续到全局执行环境,这种组织形式即为作用域链。内部函数可访问外部变量,外部变量无

法访问内部函数。注意:js没有块级作用域,若要形成块级作用域,可通过(function(){})()

;立即执行的形式实现。

9、谈谈This对象的理解。
答:(1)this总是指向函数的直接调用者(而非间接调用者)
(2)如果有new关键字,this指向new出来的那个对象
(3)在事件中,this指向触发这个事件的对象,特殊的是IE的attachEvent中的this总是指向全局对象

window。

10、eval是做什么的?
答:计算某个字符串,并执行其中的js代码。eval(string),这样避免使用eval,不安全,耗性能。

由json字符串转换成json对象可以使用eval,var obj=eval('('+ str +')')

11、什么是window对象? 什么是document对象?
答:window对象代表浏览器中打开的一个窗口。document对象代表整个html文档。实际上,document对

象是window对象的对象属性。

12、null,undefined的区别?
答:null表示一个对象被定义了,但存放了空指针。undefined表示这个值不存在。typeof(null)--

object;typeof(undefined)--undefined

13、写一个通用的事件侦听器函数(机试题)。
答:// event(事件)工具集,来源:github.com/markyun
markyun.Event = {
// 页面加载完成后
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数: 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件目标
getTarget : function(event) {
return event.target || event.srcElement;
},
// 获取event对象的引用,取到事件的所有信息,确保随时能使用event;
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};

14、["1", "2", "3"].map(parseInt) 答案是多少?
答;为何返回不是 [1,2,3] 却是 [1,NaN,NaN]?原因:parseInt接收的是两个参数,map传递的是3个参

数。
(1)parseInt函数:parseInt(string, radix);string: 需要转化的字符,如果不是字符串会被转换,

忽视空格符。radix:数字2-36之前的整型。默认使用10,表示十进制。需要注意的是,如果radix在2

-36之外会返回NaN。
(2)map函数:arr.map(callback[,thisArg]);

15、关于事件,IE与火狐的事件机制有什么区别? 如何阻止冒泡?
答:IE为事件冒泡,Firefox同时支持事件捕获和冒泡事件。但并非所有浏览器都支持事件捕获。

jQuery中使用event.stopPropagation()方法可阻止冒泡;(旧ie的方法 ev.cancelBubble = true;)

16、什么是闭包(closure),为什么要用它?
答:闭包指的是一个函数可以访问另一个函数作用域中变量的函数。常见的构造方法,是在一个函数内

部定义另外一个函数。内部函数可以引用外层的参数和变量;参数和变量不会被垃圾回收机制回收。注

意,闭包的原理是作用域链,所以闭包访问的上级作用域中的变量是个对象,其值为其运算结束后的最

后一个值。除非用立即执行函数来解决。

17、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么?
答:除了正常模式运行外,ECMAscript添加了第二种运行模式:“严格模式”。
区别:(1)消除js不合理,不严谨地方,减少怪异行为
(2)消除代码运行的不安全之处,
(3)提高编译器的效率,增加运行速度
(4)为未来的js新版本做铺垫。

18、如何判断一个对象是否属于某个类?
答:使用instanceof 即if(a instanceof Person){alert('yes');}

19、new操作符具体干了什么呢?
答:1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。p._proto_ =

Base.prototype;
2、属性和方法被加入到 this 引用的对象中。Base.call(p/this)
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。

20、用原生JavaScript的实现过什么功能吗?
答:(1)显示和隐藏
jq:
$(el).show();
$(el).hide();

js:
el.style.display = '';
el.style.display = 'none';

(2)淡入淡出
jq:$(el).fadeIn();  
js:function fadeIn(el) {
var opacity = 0;

el.style.opacity = 0;
el.style.filter = '';

var last = +new Date();
var tick = function() {
opacity += (new Date() - last) / 400;
el.style.opacity = opacity;
el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';

last = +new Date();

if (opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick,

16);
}
};

tick();
}

fadeIn(el);

21、Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?
答:Object.hasOwnProperty(proName):是用来判断一个对象是否有你给出名称的属性或对象。不过需

要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。
判断对象是否有某个特定的属性。必须用字符串指定该属性。(例如,o.hasOwnProperty("name"))。

22、对JSON的了解?
答:JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是

键值对的形式(key:value)。
是js的一个严格的子集,一种轻量级的数据交换格式,类似于xml。数据格式简单,易于读写,占用带

宽小。两个函数:JSON.parse(str)<检查代码 str--js对象>;JSON.stringify(obj);eval('('+json

+')')<不会检查代码,会直接执行>

23、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*

(1<<24))).toString(16) }) 能解释一下这段代码的意思吗?
答;获取页面中所有的元素,然后遍历每个元素,为元素的style属性增加一个颜色边框。\

24、js延迟加载的方式有哪些?
答:js的延迟加载有助与提高页面的加载速度。
(1)使用setTimeout延迟方法的加载时间 $(function (){
setTimeout('A()', 1000); //延迟1秒
})
(2)让js最后加载
引入外部js脚本文件时,如果放入html的head中,则页面加载前该js脚本就会被加载入页面,而放入

body中,则会按照页面从上倒下的加载顺序来运行javascript的代码~~~ 所以我们可以把js外部引入的

文件放到页面底部,来让js最后引入,从而加快页面加载速度。
(3)上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里

的解决方案将是来自Google帮助页面的推荐方案。
//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
使用此段代码的步骤:
1).复制上面代码
2).粘贴代码到HTML的标签前 (靠近HTML文件底部)
3).修改“defer.js”为你的外部JS文件名
4).确保你文件路径是正确的。例如:如果你仅输入“defer.js”,那么“defer.js”文件一定与HTML

文件在同一文件夹下。

25、Ajax 是什么? 如何创建一个Ajax?
答:(1)ajax的全称:Asynchronous Javascript And XML。所谓异步,在这里简单地解释就是:向服

务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设

定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验。
(2)(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象 (考虑IE6的兼容性,new

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

("get"),"example.php",true);
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
注:http请求过程:1、建立tcp连接。2、web浏览器向web服务器发送请求指令。3、web浏览器发送请

求头信息。4、web服务器应答。5、web服务器发送应答头信息。6、web服务器向浏览器发送数据。7、

web服务器关闭tcp连接。

26、同步和异步的区别?
答:同步的概念是os中:不同进程协同完成某项工作而先后次序调整(通过阻塞、唤醒等方式),同步

强调的是顺序性,谁先谁后。。异步不存在顺序性。同步:浏览器访问服务器,用户看到页面刷新,重

新发请求,等请求完,页面刷新,新内容出现,用户看到新内容之后进行下一步操作。异步:浏览器访

问服务器请求,用户正常操作,浏览器在后端进行请求。等请求完,也买你不刷新,新内容也会出现,

永辉看到新内容。

27、如何解决跨域问题?
答:(1)同源策略:在同一个域名下或者同一域名不同文件夹,只有这两个是允许通信的。
特别注意两点:
第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,
第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个

域或两个域是否在同一个ip上。
(2)参考,写的很不错:http://www.cnblogs.com/JChen666/p/3399951.html

28、页面编码和被请求的资源编码如果不一致如何处理?
答:若请求的资源编码,如外引js文件编码与页面编码不同。可根据外引资源编码方式定义为

charset="utf-8"或"gbk"。

29、模块化开发怎么做?
答:模块化开发指的是在解决某一个复杂问题或者一系列问题时,依照一种分类的思维吧问题进行系统

性的分解以之解决。模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块

方式。对于软件行业:系统被分解为一组高内聚,低耦合的模块。
(1)定义封装的模块
(2)定义新模块对其他模块的依赖
(3)可对其他模块的引入支持
在JavaScript中出现了一些非传统模块开发方式的规范 CommonJS的模块规范,AMD(Asynchronous

Module Definition),CMD(Common Module Definition)等

AMD是异步模块定义,所有的模块将被异步加载,模块加载不影响后边语句运行。

30、AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?
答 :参考这个http://blog.chinaunix.net/uid-26672038-id-4112229.html
解释:AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
区别:
1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成

可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近,AMD 推崇依赖前置。
3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。

未完待续

上一篇:简单的Javascript图片延迟加载库Echo.js


下一篇:《JavaScript高级程序设计》笔记(1):