面试题

面试题（三）

2017-04-08  本文已影响913人  福尔摩鸡

3月15日

1. 下列JavaScript代码执行后，依次alert的结果是？

var obj = {proto: {a:1,b:2}};
function F(){};
F.prototype = obj.proto;
var f = new F();
obj.proto.c = 3;
obj.proto = {a:-1, b:-2};
alert(f.a);
alert(f.c);
delete F.prototype['a'];
alert(f.a);
alert(obj.proto.a);

1 3 undefined -1

2.下列JavaScript代码执行后的效果是？

<ul id='list'>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

var items = document.querySelectorAll('#list>li');
for(var i = 0;i < items.length; i++){
     setTimeout(function(){
           items[i].style.backgroundColor = '#fee';
    }, 5);
}

报错，因为i一直等于5，items[i]获取不到元素

3. 下列JavaScript代码执行后的li元素的数量是？

<ul>
    <li>Item</li>
    <li></li>
    <li></li>
    <li>Item</li>
    <li>Item</li>
</ul>

var items = document.getElementsByTagName('li');
for(var i = 0; i< items.length; i++){
    if(items[i].innerHTML == ''){
        items[i].parentNode.removeChild(items[i]);
    }
}

4.程序中捕获异常的方法

window.error
try{}catch(){}finally{}

5. 下列代码输出结果是什么？

<script lang="JavaScript" type="text/javascript">
    function outPut(s) {
        document.writeln(s);
    }
    var a = "lashou";
    var b = a;
    outPut(b);
    a = "拉手";
    outPut(a);
    outPut(b);
    var a_array = [1, 2, 3];
    var b_array = a_array;
    outPut(b_array);
    a_array[3] = 4;
    outPut(a_array);
    outPut(b_array);
</script>

lashou 拉手 lashou 1,2,3 1,2,3,4 1,2,3,4

6. 以下代码的输出结果是什么？

function setName(){
    name="张三";
}
setName();
console.log(name);

"张三"

7.以下代码的输出结果是什么？

//考点：1、变量声明提升 2、变量搜索机制
var a=1;
function test(){
    console.log(a);
    var a=1;
}
test();

undefined

8.以下代码的输出结果是什么？

var b=2;
function test2(){
    window.b=3;
    console.log(b);
}
test2();

3

9.以下代码的输出结果是什么？

c=5;//声明一个全局变量c 
function test3(){
    window.c=3;
    console.log(c);     //答案：undefined，原因：由于此时的c是一个局部变量c，并且没有被赋值
    var c;
    console.log(window.c);//答案：3，原因：这里的c就是一个全局变量c
}
test3();

10.以下代码的输出结果是什么？

var arr = [];
arr[0]  = 'a';
arr[1]  = 'b';
arr[10] = 'c';
alert(arr.length);  //答案：11
console.log(arr[5]);    //答案：undefined

11. 以下代码的输出结果是什么？

var a=1;
console.log(a++);       //答案：1
console.log(++a);       //答案：3

12.以下代码的输出结果是什么？

console.log(null==undefined);   //答案：true
console.log("1"==1);        //答案：true，因为会将数字1先转换为字符串1
console.log("1"===1);       //答案：false，因为数据类型不一致

13.以下代码的输出结果是什么？

typeof 1;       "number"
typeof "hello";     "string"
typeof /[0-9]/;     "object"
typeof {};      "object"
typeof null;        "object"
typeof undefined;   "undefined"
typeof [1,2,3];     "object"
typeof function(){};    //"function"

14. 以下代码的输出结果是什么？

parseInt(3.14);         //3
parseFloat("3asdf");        //3
parseInt("1.23abc456");
parseInt(true);//"true" NaN

15.以下代码的输出结果是什么？

//考点：函数声明提前
function bar() {
    return foo;
    foo = 10;
    function foo() {}
    //var foo = 11;
}
alert(typeof bar());//"function"

3月16日

1. 以下代码的输出结果是什么？

var foo = 1;
function bar() {
    foo = 10;
    return;
    function foo() {}
}
bar();
alert(foo);//答案：1

2. 以下代码的输出结果是什么？

console.log(a);//是一个函数
var a = 3;
function a(){}
console.log(a);////3

3.以下代码的输出结果是什么？

//考点：对arguments的操作
function foo(a) {
    arguments[0] = 2;
    alert(a);//答案：2，因为：a、arguments是对实参的访问，b、通过arguments[i]可以修改指定实参的值
}
foo(1);

4.以下代码的输出结果是什么？

function foo(a) {
    alert(arguments.length);//答案：3，因为arguments是对实参的访问
}
foo(1, 2, 3);

5.以下代码的输出结果是什么？

bar();//报错
var foo = function bar(name) {
    console.log("hello"+name);
    console.log(bar);
};
//alert(typeof bar);
foo("world");//"hello"
console.log(bar);//undefined
console.log(foo.toString());
bar();//报错

6.以下代码的输出结果是什么？

function test(){
    console.log("test函数");
}
setTimeout(function(){
    console.log("定时器回调函数");
}, 0)
test();
结果：
test函数
定时器回调函数

7. CSS3有哪些新特性？

8. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

  1. 拖拽释放(Drag and drop) API
  2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
  3. 音频、视频API(audio,video)
  4. 画布(Canvas) API
  5. 地理(Geolocation) API
  6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  7. sessionStorage 的数据在浏览器关闭后自动删除
  8. 表单控件，calendar、date、time、email、url、search
  9. 新的技术webworker, websocket, Geolocation
  1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
  2. 对可用性产生负面影响的元素：frame，frameset，noframes；

  1. IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：

    <!--[if lt IE 9]>

<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

9. 本地存储（Local Storage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？

Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除

10.如何实现浏览器内多个标签页之间的通信？

调用 localstorge、cookies 等本地存储方式

11.你如何对网站的文件和资源进行优化？

12.什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常

13.新的 HTML5 文档类型和字符集是？

14.HTML5 Canvas 元素有什么用？

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

15.HTML5 存储类型有什么区别？

Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

3月17日

1. CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked            单选框或复选框被选中。

2. 请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。

sss

3.描述下CSS3里实现元素动画的方法

sss

4.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计？

首先划分成头部、body、脚部；。。。。。

实现效果图是最基本的工作，精确到2px；

与设计师，产品经理的沟通和项目的参与

做好的页面结构，页面重构和用户体验

处理hack，兼容、写出优美的代码格式

针对服务器的优化、拥抱 HTML5。

5. 为什么利用多个域名来存储网站资源会更有效？

6. 请谈一下你对网页标准和标准制定机构重要性的理解。

（无标准答案）网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

7. 请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

webstorage和cookie的区别：

WebStorage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，WebStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而WebStorage仅仅是为了在本地“存储”数据而生。

sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间。

localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 数据在浏览器关闭后自动删除。

8.知道css有个content属性吗？有什么作用？有什么应用？

知道。css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。
//一种常见利用伪类清除浮动的代码
.clearfix:after {
    content:"."; //这里利用到了content属性
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; }
.clearfix { 
    *zoom:1; 
}
after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。

那么问题继续还有，知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？

css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。

9.如何在 HTML5 页面中嵌入音频？

HTML 5 包含嵌入音频文件的标准方式，支持的格式包括 MP3、Wav 和 Ogg：
<audiocontrols>
<sourcesrc="jamshed.mp3"type="audio/mpeg">
Yourbrowserdoes'ntsupportaudioembeddingfeature.
</audio>

10. 如何在 HTML5 页面中嵌入视频？

和音频一样，HTML5 定义了嵌入视频的标准方法，支持的格式包括：MP4、WebM 和 Ogg：
<videowidth="450"height="340"controls>
<sourcesrc="jamshed.mp4"type="video/mp4">
Yourbrowserdoes'ntsupportvideoembeddingfeature.
</video>

11. HTML5 引入什么新的表单属性？

Datalist   datetime   output   keygen  date  month  week  time  number   range   emailurl

12. (写)描述一段语义的html代码吧。

（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）
就是基于语义化设计原则）  
< div id="header">
< h1>标题< /h1>
< h2>专注Web前端技术< /h2>
< /div>
语义 HTML 具有以下特性：

文字包裹在元素中，用以反映内容。例如：
段落包含在 <p> 元素中。
顺序表包含在<ol>元素中。
从其他来源引用的大型文字块包含在<blockquote>元素中。
HTML 元素不能用作语义用途以外的其他目的。例如：
<h1>包含标题，但并非用于放大文本。
<blockquote>包含大段引述，但并非用于文本缩进。
空白段落元素 ( <p></p> ) 并非用于跳行。
文本并不直接包含任何样式信息。例如：
不使用 <font> 或 <center> 等格式标记。
类或 ID 中不引用颜色或位置。

13.HTML5和CSS3的新标签

14. 移动端常用类库及优缺点？

知识面宽度，多多益善

15. Zepto库和JQ区别

Zepto相对jQuery更加轻量，主要用在移动端，jQuery也有对应的jQuerymobile移动端框架

3月18日

1. Ajax 是什么? 如何创建一个Ajax？

基本步骤：
var xhr =null;//创建对象 
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
     xhr.open(“方式”,”地址”,”标志位”);//初始化请求 
     xhr.setRequestHeader(“”,””);//设置http头信息 
     xhr.onreadystatechange =function(){}//指定回调函数 
     xhr.send();//发送请求

2. 同步和异步的区别？

3. 如何解决跨域问题?

4. 页面编码和被请求的资源编码如果不一致如何处理？

对于ajax请求传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api。对于post请求不需要进行编码

5. 简述ajax 的过程。

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  3. 设置响应HTTP请求状态变化的函数
  4. 发送HTTP请求
  5. 获取异步调用返回的数据
  6. 使用JavaScript和DOM实现局部刷新

6. 阐述一下异步加载。

  1. 异步加载的方案： 动态插入 script 标签
  2. 通过 ajax 去获取 js 代码，然后通过 eval 执行
  3. script 标签上添加 defer 或者 async 属性
  4. 创建并插入 iframe，让它异步执行 js

7. 请解释一下 JavaScript 的同源策略。

同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

8. GET和POST的区别，何时使用POST？

9. ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

  1. 通过异步模式，提升了用户体验
  2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
  3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

10. Ajax的最大的特点是什么。

Ajax可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源。

11. ajax的缺点�?

  1. ajax不支持浏览器back按钮。
  2. 安全问题 AJAX暴露了与服务器交互的细节。
  3. 对搜索引擎的支持比较弱。
  4. 破坏了程序的异常机制。

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

13. 解释jsonp的原理，以及为什么不是真正的ajax

Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

14. 什么是Ajax和JSON，它们的优缺点。

15. http常见的状态码有那些？分别代表是什么意思？

3月19日

1. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：

  1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
  2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
  3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
  4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

2. ajax请求时，如何解释json数据

使用eval()或者JSON.parse()鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。

3. javascript的本地对象，内置对象和宿主对象

4.为什么利用多个域名来存储网站资源会更有效？

确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁闷访问网站，并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。

5. 请说出三种减低页面加载时间的方法

  1. 压缩css、js文件
  2. 合并js、css文件，减少http请求
  3. 外部js、css文件放在最底下
  4. 减少dom操作，尽可能用变量替代不必要的dom操作

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

jQuery可以给一个对象同时绑定多个事件，低层实现方式是使用addEventListner或attachEvent兼容不同的浏览器实现事件的绑定，这样可以给同一个对象注册多个事件。

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

8. 如何测试前端代码? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

了解BDD行为驱动开发与TDD测试驱动开发已经单元测试相关概念。

9. 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

10. 简述一下 Handlebars 的基本用法？

没有用过的话说出它是干什么的即可

11. 简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？�

学习技术不仅要会用，还有熟悉它的实现机制，这样在开发中遇到问题时才能更好的解决

12. 用js实现千位分隔符?

aaa

13. 检测浏览器版本版本有哪些方式？

IE与标准浏览器判断，IE不同版本的判断，userAgent  var ie = /*@cc_on !@*/false;

14. 我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获

对两种事件模型的理解

15. 实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

// 方法一：
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this){
  o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
}
return o;
}
//方法二：
   /**
* 克隆一个对象
* @param Obj
* @returns
*/
function clone(Obj) { 
    var buf; 
    if (Obj instanceof Array) { 
        buf = [];//创建一个空的数组 
        var i = Obj.length; 
        while (i--) { 
            buf[i] = clone(Obj[i]); 
        } 
        return buf; 
    }else if (Obj instanceof Object){ 
        buf = {};//创建一个空对象 
        for (var k in Obj) {//为这个对象添加新的属性 
            buf[k] = clone(Obj[k]); 
        } 
        return buf; 
    }else{//普通变量直接赋值
        return Obj; 
    } 
}

3月20日

1. 如何消除一个数组里面重复的元素？

var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
function deRepeat(){
    var newArr=[];
    var obj={};
    var index=0;
    var l=arr.length;
    for(var i=0;i<l;i++){
        if(obj[arr[i]]==undefined)
        {
            obj[arr[i]]=1;
            newArr[index++]=arr[i];
        }
        else if(obj[arr[i]]==1)
            continue;
    }
    return newArr;
}
var newArr2=deRepeat(arr);
alert(newArr2); //输出1,2,3,4,5,6,9,25

2. 小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：

function Dog() {
    this.wow = function() {
        alert(’Wow’);
    }
    this.yelp = function() {
        this.wow();
    }
}

小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）

function MadDog() {
this.yelp = function() {
var self = this; 
setInterval(function() {
self.wow(); 
}, 500);
}
}
MadDog.prototype = new Dog(); 
//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();

3. 下面这个ul，如何点击每一列的时候alert其index?（闭包）

<ul id=”test”>
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

// 方法一：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].onclick=function(){
alert(this.index);
};
}
//方法二：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++){
lis[i].index=i;
lis[i].onclick=(function(a){
return function() {
alert(a);
}
})(i);
}

4. 编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。

/***@paramselector{String}传入的CSS选择器。*@return{Array}*/

var query = function (selector) {
    var reg = /^(#)?(\.)?(\w+)$/img;
    var regResult = reg.exec(selector);
    var result = [];
//如果是id选择器
    if (regResult[1]) {
        if (regResult[3]) {
            if (typeof document.querySelector === "function") {
                result.push(document.querySelector(regResult[3]));
            } else {
                result.push(document.getElementById(regResult[3]));
            }
        }
    }
    //如果是class选择器
    else if (regResult[2]) {
        if (regResult[3]) {
            if (typeof document.getElementsByClassName === 'function') {
                var doms = document.getElementsByClassName(regResult[3]);
                if (doms) {
                    result = converToArray(doms);
                }
            }
            //如果不支持getElementsByClassName函数
            else {
                var allDoms = document.getElementsByTagName("*");
                for (var i = 0, len = allDoms.length; i < len; i++) {
                    if (allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
                        result.push(allDoms[i]);
                    }
                }
            }
        }
    }
    //如果是标签选择器
    else if (regResult[3]) {
        var doms = document.getElementsByTagName(regResult[3].toLowerCase());
        if (doms) {
            result = converToArray(doms);
        }
    }
    return result;
}
function converToArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes, 0);//针对非IE浏览器 
    } catch (ex) {
        array = new Array();
        for (var i = 0, len = nodes.length; i < len; i++) {
            array.push(nodes[i])
        }
    }
    return array;
}

5. 请评价以下代码并给出改进意见。

if(window.addEventListener){
var addListener = function(el,type,listener,useCapture){
el.addEventListener(type,listener,useCapture);
};
}
else if(document.all){
addListener = function(el,type,listener){
el.attachEvent("on"+type,function(){
listener.apply(el);
});
} 
}

改进如下：
function addEvent(elem, type, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handler, false);
    } else if (elem.attachEvent) {
        elem['temp' + type + handler] = handler;
        elem[type + handler] = function () {
            elem['temp' + type + handler].apply(elem);
        };
        elem.attachEvent('on' + type, elem[type + handler]);
    } else {
        elem['on' + type] = handler;
    }
}

6. 给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：addSpace(“hello world”) // -> ‘h e l l o w o r l d’。

String.prototype.spacify = function () {
    return this.split('').join(' ');
};

接着上述问题答案提问，1）直接在对象的原型上添加方法是否安全？尤其是在Object对象上。(这个我没能答出？希望知道的说一下。)　2）函数声明与函数表达式的区别？

答案：在js中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

7. 定义一个log方法，让它可以代理console.log的方法。

function log(msg)　{
console.log(msg);
}
log("hello world!") // hello world!

如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是：

function log(){
console.log.apply(console, arguments);
};

到此，追问apply和call方法的异同。

8. 在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

假设接第上题题干，我们要给每个log方法添加一个”(app)”前缀，比如’hello world!’ ->’(app)hello world!’。方法如下：

function log() {
    //为了使用unshift数组方法，将argument转化为真正的数组
    var args = Array.prototype.slice.call(arguments); 
    args.unshift('(app)');
    console.log.apply(console, args);
};

9. 对作用域上下文和this的理解，看下列代码：

var User = {
count: 1,
getCount: function() {
return this.count;
}
};
console.log(User.getCount()); // what?
var func = User.getCount;
console.log(func()); // what?

问两处console输出什么？为什么？

答案是1和undefined。

func是在winodw的上下文中被执行的，所以会访问不到count属性。

继续追问，那么如何确保Uesr总是能访问到func的上下文，即正确返回1。正确的方法是使用Function.prototype.bind。兼容各个浏览器完整代码如下：

Function.prototype.bind = Function.prototype.bind || function(context){
var self = this;
return function(){
return self.apply(context, arguments);
};
}
var func = User.getCount.bind(User);
console.log(func());

10. 原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？�

 /*
 * 传递函数给whenReady()
 * 当文档解析完毕且为操作准备就绪时，函数作为document的方法调用
 */
var whenReady = (function () { //这个函数返回whenReady()函数
    var funcs = []; //当获得事件时，要运行的函数
    var ready = false; //当触发事件处理程序时,切换为true
    //当文档就绪时,调用事件处理程序
    function handler(e) {
        if (ready) return; //确保事件处理程序只完整运行一次
        //如果发生onreadystatechange事件，但其状态不是complete的话,那么文档尚未准备好
        if (e.type === 'onreadystatechange' && document.readyState !== 'complete') {
            return;
        }
        //运行所有注册函数
        //注意每次都要计算funcs.length
        //以防这些函数的调用可能会导致注册更多的函数
        for (var i = 0; i < funcs.length; i++) {
            funcs[i].call(document);
        }
        //事件处理函数完整执行,切换ready状态, 并移除所有函数
        ready = true;
        funcs = null;
    }

    //为接收到的任何事件注册处理程序
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', handler, false);
        document.addEventListener('readystatechange', handler, false); //IE9+
        window.addEventListener('load', handler, false);
    } else if (document.attachEvent) {
        document.attachEvent('onreadystatechange', handler);
        window.attachEvent('onload', handler);
    }
    //返回whenReady()函数
    return function whenReady(fn) {
        if (ready) {
            fn.call(document);
        }
        else {
            funcs.push(fn);
        }
    }
})();

如果上述代码十分难懂，下面这个简化版：

function ready(fn){
if(document.addEventListener) {//标准浏览器
document.addEventListener('DOMContentLoaded', function() {
//注销事件, 避免反复触发
document.removeEventListener('DOMContentLoaded',arguments.callee, false);
fn();//执行函数
}, false);
}else if(document.attachEvent) {//IE
document.attachEvent('onreadystatechange', function() {
if(document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn();//函数执行
}
});
}
};

11. （设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）

回答出概念即可，下面是几个要点

  1. 给需要拖拽的节点绑定mousedown,mousemove,mouseup事件
  2. mousedown事件触发后，开始拖拽
  3. mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
  4. mouseup时，拖拽结束
  5. 需要注意浏览器边界的情况

12. 请实现如下功能：用户第一次访问网站时显示tip小提示，同一天访问不再提示，用户点击“我知道了”之后不再提示。

function setcookie(name, value, days) { //给cookie增加一个时间变量
    var exp = new Date();
    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000); //设置过期时间为days天
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function getCookie(name) {
    var result = "";
    var myCookie = "" + document.cookie + ";";
    var searchName = "+name+" = ";
    var startOfCookie = myCookie.indexOf(searchName);
    var endOfCookie;
    if (satrtOfCookie != -1) {
        startOfcookie += searchName.length;
        endOfCookie = myCookie.indexOf(";", startOfCookie);
        result = (myCookie.substring(startOfCookie, endOfCookie));
    }
    return result;
}
(function () {
    var oTips = document.getElementById('tips');//假设tips的id为tips
    var page = {
        check: function () {//检查tips的cookie是否存在并且允许显示
            var tips = getCookie('tips');
            if (!tips || tips == 'show') return true;//tips的cookie不存在
            if (tips == "never_show_again") return false;
        },
        hideTip: function (bNever) {
            if (bNever) setcookie('tips', 'never_show_again', 365);
            oTips.style.display = "none";//隐藏
        },
        showTip: function () {
            oTips.style.display = "inline";//显示，假设tips为行级元素
        },
        init: function () {
            var _this = this;
            if (this.check()) {
                _this.showTip();
                setcookie('tips', 'show', 1);
            }
            oTips.onclick = function () {
                _this.hideTip(true);
            };
        }
    };
    page.init();
})();

13. 说出以下函数的作用是？空白区域应该填写什么？

//define 
(function(window){
function fn(str){
this.str=str;
}

fn.prototype.format = function(){
var arg = ______;
return this.str.replace(_____,function(a,b){
return arg[b]||"";
});
}
window.fn = fn;
})(window);

//use
(function(){
var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));
})();

14. Javascript作用链域?

理解变量和函数的访问范围和生命周期，全局作用域与局部作用域的区别，JavaScript中没有块作用域，函数的嵌套形成不同层次的作用域，嵌套的层次形成链式形式，通过作用域链查找属性的规则需要深入理解。

15. 谈谈This对象的理解。

理解不同形式的函数调用方式下的this指向，理解事件函数、定时函数中的this指向，函数的调用形式决定了this的指向。

3月21日

1. eval是做什么的？

它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2个步骤，一次解析成js语句，一次执行）�

2. 关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

3. 什么是闭包（closure），为什么要用它？

简单的理解是函数的嵌套形成闭包，闭包包括函数本身已经它的外部作用域

使用闭包可以形成独立的空间，延长变量的生命周期，报存中间状态值

4. 如何判断一个对象是否属于某个类？

Instanceof   constructor

5. new操作符具体干了什么呢?

  1. 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
  2. 属性和方法被加入到 this 引用的对象中。
  3. 新创建的对象由 this 所引用，并且最后隐式的返回 this 。

6. 用原生JavaScript的实现过什么功能吗？

主要考察原生js的实践经验

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

8. js延迟加载的方式有哪些？

9. 模块化开发怎么做？

理解模块化开发模式：浏览器端requirejs，seajs；服务器端nodejs；ES6模块化；fis、webpack等前端整体模块化解决方案；grunt、gulp等前端工作流的使用

10. AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

理解这两种规范的差异，主要通过requirejs与seajs的对比，理解模块的定义与引用方式的差异以及这两种规范的设计原则

11. requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）

核心是js的加载模块，通过正则匹配模块以及模块的依赖关系，保证文件加载的先后顺序，根据文件的路径对加载过的文件做了缓存

12. 让你自己设计实现一个requireJS，你会怎么做？

核心是实现js的加载模块，维护js的依赖关系，控制好文件加载的先后顺序

13. 谈一谈你对ECMAScript6的了解？

ES6新的语法糖，类，模块化等新特性

14. ECMAScript6 怎么写class么，为什么会出现class这种东西?

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
     return '('+this.x+', '+this.y+')';
  }
}

15. documen.write和 innerHTML的区别?

上一篇下一篇

猜你喜欢

热点阅读