刷题之旅-4399前端笔试题

2017-08-09 本文已影响741人始悔不悟

选择题

以下代码输出的结果为:

function test() {
    var n = 4399;

    function add() {
        n++;
        console.log(n);
    }

    return {
        n: n,
        add: add,
    }
}

var result = test();
var result2 = test();
result.add(); // 闭包 4400
result.add(); // 闭包 4401
console.log(result.n); // 返回对象自身的n 4399
result2.add(); //闭包 4400

以下关于BFC描述错误的是

BFC的区域会与float的元素区域重叠 // 错误不会重叠
计算BFC的高度时，浮动子元素也参与计算 // overflow:hidden清除浮动的原理
BFC就是页面上的一个隔离的独立容器，容器里面的子元素是不会影响到外面的元素 // 正确
BFC意为”块级格式化上下文” // 正确

ajax状态码

0 : 未初始化. 尚未调用open()方法
1 : 启动. 已经调用open()方法, 但未用send()方法.
2 : 发送. 已经调用send()方法, 但未接收到响应.
3 : 接收. 已经接收到部分相应数据.
4 : 完成. 已经接收到全部响应数据, 而且已经可以在客户端使用了.

以下 javascript 代码，在浏览器中运行的结果是

var foo = {
    n: 1,
}

(function(foo){
    console.log(foo.n);
    foo.n = 3;
    var foo = {
        n: 2,
    }
    console.log(foo.n);
})(foo);
console.log(foo.n)

等价于:

var foo;
foo = {
    n: 1,
}
(function(foo){
    var foo;  // 优先级低于形参，无效。
    console.log(foo.n); // 1
    foo.n = 3; // 形参与实参foo指向的内存空间里的n的值被改为3
    foo = { // 形参foo指向了新的内存空间，里面n的值为2.
        n: 2,
    }
    console.log(foo.n); // 输出新的内存空间的n的值 2
})(foo);
console.log(foo.n) // 实参foo的指向还是原来的内存空间，里面的n的值为3.

输出结果为: 1 2 3

AMD 与 CMD

链接：https://www.nowcoder.com/questionTerminal/6ddbcdea36724f50ac73fa350bf70b4f
来源：牛客网

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS。主要有两个Javascript库实现了AMD规范：require.js和curl.js。参考链接：http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。 CMD是SeaJS在推广过程中对模块定义的规范化产出。
区别：

对于依赖的模块，AMD 是提前执行，CMD是延迟执行。
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()
    ... 
})

Cookie localStorage sessionStorage

数据的生命期:
cookie: 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效
localStorage: 除非被清除，否则永久保存
sessionStorage: 仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小:
cookie: 4k左右
localStorage: 一般为5MB
sessionStorage: 同上
与服务器端通信:
cookie: 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
localStorage: 仅在客户端（即浏览器）中保存，不参与和服务器的通信
sessionStorage: 同上
易用性:
cookie: 需要程序员自己封装，源生的Cookie接口不友好
localStorage: 原生接口可以接受，亦可再次封装来对Object和Array有更好的支持
sessionStorage: 同上

Object.defineProperty()

使用object.defineProperty可向对象添加或者修改属性

var obj = {
    test:"hello"
}
//对象已有的属性添加特性描述
Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});
//对象新添加的属性的特性描述
Object.defineProperty(obj,"newKey",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});

CSS继承

肯定有很多人不知道什么是继承，继承就是指子节点默认使用父节点的样式属性。
不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。这么来记很轻松的呀！不要被下边的吓到了哦~

所有元素可继承: visibility  cursor
内联元素可继承: letter-spacing  word-spacing  white-space  line-height  color  font  font-family  font-size  font-style  font-variant  font-weight  text-decoration  text-transform  direction
终端块状元素可继承：text-indent和text-align
列表元素可继承：list-style  list-style-type  list-style-position  list-style-image

跨域

在前端数据访问过程中，由于同源策略的限制，往往会遇到一些跨域的问题，以下哪些手段可以解决跨域的问题:

利用HTML5 postMessage
利用document.domain+iframe的设置
通过服务端niginx配置跨域
利用iframe+location.hash
windows,name实现跨域数据传输

在一个html静态网站里A页面需要跳转并传递相关数据到B页面（两个页面处于同个域名下）请按照你对此场景的理解写出N中页面之前传参的代码（只需写出A页面传递参数及B页面接收参数的js关键代码）

方法一: url截取

a.html

<input type="text" id="txt" />
<button id="submit">submit</button>
<script>
    var val=document.getElementById("txt").value;
    var button=document.getElementById("submit");
    button.onclick=function(){
        location.href="b.html?"+"txt="+encodeURI(val);
    };
</script>

b.html

<script language="javascript" type="text/javascript">
    var loc = location.href;
    var n1 = loc.length;//地址的总长度
    var n2 = loc.indexOf("=");//取得=号的位置
    var id = decodeURI(loc.substr(n2+1, n1-n2));//从=号后面的内容
    alert( id);
    //document.write(id)
</script>

方法二: html5 postmessage

调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。

需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

方法三: localStorage sessionStorage Cookie

方法四: window.name

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

更多内容戳这里