写一份面试答卷

过年后，脑子里一团浆糊。。。转转看到了这篇文章里边的一些问题在之前我也有遇到过，在正式的工作中也用到了一些，闲来重新面试一次。

1.JS是如何实现继承的？

什么是继承？通俗讲就是孩子继承父亲：父亲有的东西，就会交给孩子。JS实现继承，看开发环境，有时只要有一个父类，子类extends父类就好；或是要使用prototype一步步继承，像是javascript之原型；或是借用apply,call实现‘偷偷’继承。看过想过却没有用过。不是因为我懒，绝不是。

2.object的prototype是什么？（接上一个问题）

一个空对象。这个对象自带了一些属性和方法，而且几乎所有的JS对象的顶层都是它。最后一点很危险，所以不要为了省事或是别的原因修改这个‘空对象’。

3.JS如何实现数据以及功能的封装。（即类是如何实现的）

我现在一般使用三种方法：工厂模式，对象定义属性和方法，class。

4.如果一个标签里面包含了10000个image，如何有效地对这10000个image实现事件绑定，比如说click事件。（考察事件冒泡机制）

每个image都添加上事件，让我想到了以前写过的图片延迟加载的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            opacity: 1;
            transition: opacity 0.3s;
        }
        img[data-original] {
            opacity: 0;
        }
    </style>
</head>
<body>
    <img data-original="./img/img1" alt="" src="../img/img1.jpg" />
    <img data-original="./img/img2" alt="" src="../img/img2.jpg" />
    <img data-original="./img/img3" alt="" src="../img/img3.jpg" />
    <img data-original="./img/img4" alt="" src="../img/img4.jpg" />
    <img data-original="./img/img5" alt="" src="../img/img5.jpg" />
    <img data-original="./img/img6" alt="" src="../img/img6.jpg" />
    <img data-original="./img/img7" alt="" src="../img/img7.jpg" />
    <img data-original="./img/img8" alt="" src="../img/img8.jpg" />
    <img data-original="./img/img9" alt="" src="../img/img9.jpg" />
    <script>
        Array.prototype.forEach.call(document.querySelectorAll('img[data-original]'), function (img) {
            img.setAttribute('src', img.getAttribute('data-original'));
            img.onload = function () {
                img.removeAttribute('data-original');
            };
        });
    </script>
</body>
</html>

View Code

至于说了是冒泡的问题 window.event ? window.event.cancelBubble = true : e.stopPropagation();即可

5.假设现在有对象A、B，A对象绑定了S事件，如何对B对象也绑定S事件？

A对象绑定了S事件，是引用了S事件，如果想给B对象也绑定S事件，那就让B对象引用S事件即可；而所谓的引用，就是《指向》同一堆内存地址。

引用是多对一的关系，谨慎修改。

var S = function () {
        alert("s")
    };
    var A = {},B = {};
    A.s = S;
    B.s = S;
    console.log(A);
    console.log(A.s === S);
    console.log(B);
    console.log(B.s === S);

View Code

6.如何实现跨域请求？你知道的有多少种方法？各有什么优缺点？

在我实际工作中，我并没有很多使用前端解决跨域问题的经验---大多由后台技术人员解决。当然，这并不说明我就一点都不了解这方面的问题。之前学习nodejs时，我在本地起了一个nodejs服务器（127.0.0.1），使用webstrom（http://localhost:63342）打开页面，这就形成了跨域。然后，在响应头上设置response.setHeader('Access-Control-Allow-Origin', "http://localhost:63342")。方法有

CORS跨域资源共享(IE8+)
通过jsonp跨域(只能实现GET请求)
通过修改document.domain来跨子域(只适用于不同子域的框架间的交互)
使用window.name来进行跨域
使用HTML5的window.postMessage方法跨域(IE8+)

方法虽多，但是都有功能和兼容限制，我只在刚开始工作的时候看过上一位FE留下的代码里有使用到document.domain，至于其他的就真真只是看看罢了。

7.当使用隐藏框架实现跨域请求时，如果框架页跟当前页不属于同个父域，是否可以实现跨域？

这个问题，至少现在不想回答。

8.如何实现私有变量？说出一种方法即可。

给它一个私有的空间，例如var a = {"a1":2}，在外部访问a1就要用a.a1的方式访问；或是在对象内写个类似getter的函数var a={"a1":2,getA1:function(){return this.a1}}，在外部访问a1就要用a.getA1的方式访问；或是闭包。

9.函数闭包使用得多吗？什么情况下需要使用函数闭包？

不多。近期有个小功能需要避免操作频繁一直请求，用了个类似lodash的debounce的函数，

 function debounce(fn, delay) {
        var timer;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(function () {
                fn();
            }, delay)
        }
    }

View Code

debounce返回一个包含外部声明变量的函数，形成闭包。这个返回的函数和变量（timer）在同一个scope中，返回的函数可以访问到变量，可以操作变量，但是每次执行返回的函数又不会重置变量，而是直接读取变量。debounce调用时第一件事就是清除掉上一次的setTimeout(这样也就清除了上一次触发的事件)，然后将本次的事件重新赋值给timer，delay就是一个时间点，超过这个时间没有别的触发，就执行fn。

10.当某个事件发生时，如果获得事件发生的对象。（ff和ie不同）var target = event.srcElement ? event.srcElement: event.target;

11.当绑定事件时，this指针指向的是？this浅看

12.当为document绑定事件时，this指针指向的是？

这个要跪

13发送ajax请求有多少个步骤？如何判定发送成功？（readyState和status）

readyState===4&&status===200

readyState:

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status常见404（not found）,403(forbidden),500(server error)

posted @ 2018-02-26 10:06 Merrys 阅读(545) 评论(3) 编辑收藏举报

刷新页面返回顶部

Merrys

life Knows who You are.

写一份面试答卷