写一份面试答卷

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

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)

原文地址:https://www.cnblogs.com/Merrys/p/8459057.html