2012春招冲刺-01.01 关于Cookie、什么是闭包、BFC与盒模型

2021春招冲刺

01.01日

1.浏览器 | 关于Cookie你知道哪些

什么是Cookie

cookie是 浏览器存储数据 的方案之一，其余的方案还有localStorage、sessionStorage、IndexedDB等。

cookie是指某些网站为了辨别用户身份、进行 session 跟踪而存储在用户本地终端上的数据（通常经过加密）。由服务器生成，客户端进行维护和存储。通过Cookie，可以让服务器知道请求是来源自哪个客户端并对客户端状态进行维护。

cookie是保存在浏览器客户端上的。其中会话cookie保存在浏览器缓存中，浏览器关闭的时候cookie消失。持久cookie则客户端硬盘文件中，浏览器关闭仍然存在，直到cookie失效。

Cookie的限制与组成

• 同源限制 Cookie在性质上是绑定在特定的域名下的。当创建了一个cookie后，再给创建它的域名发送请求时，请求头中都会包含这个cookie。这个限制确保了储存在cookie中的信息只能让批准的域访问，而无法被其他域访问。

• 个数和尺寸限制 每个域名下可绑定的cookie的个数是有限的，不同浏览器所限制的个数不同。单个cookie的大小一般限制在4kB,对于复杂的存储需求来说不够用。

• 组成数据

  • 名称和值 name = value
    Cookie是由name=value形式成对存在，并以以分号作为结束符，除了该属性必填外，其余属性皆为可选。
  • 域 domain
    表示该cookie对于哪个域是有效的，所有向该域发送的请求中都会包含这个cookie信息
  • 路径 path
    通过这个字段可以为服务器上特定的文档分配cookie
  • 失效时间 expires（max-age）
    一旦到了这个日期，就不再存储或发布这个cookie了，该cookie就会被删除。日期格式为GMT格式 Wdy, DD-Mon-YYYY HH:MM:SS GMT。
  • 安全标志 secure
    只能在协议为https的请求中携带，设置了该字段后，该cookie只有在使用SSL连接的时候才发送到服务器
  • HTTP专用 HttpOnly
    设置后不能通过js访问cookie

• document.cookie
  获取cookie时通过document.cookie返回当前页面可用的所有cookie的字符串，并且可以直接对其进行赋值来更改cookie。但是也正因为其可以在客户端直接获取到，有XSS,CSRF等安全问题

---

2.JS | 什么是闭包？使用场景？缺点

对于JavaScrip而言，函数内部可以直接读取全局变量，在函数外部无法读取函数内的局部变量。而闭包便是指 有权访问另外一个函数作用域中的变量的函数，也就是能够读取其他函数内部变量的函数。

由于链式作用域的限制，对于在函数f1中定义的f2函数来说，f1所有的局部变量，对f2都是可见的，但f2内部的局部变量，对f1就是不可见的。那么只要把f2作为f1的返回值，就可以在f1外部读取它的内部变量了。也就是说 父对象的所有变量，对子对象都是可见的，反之则不成立。

function f1(){
    var n=999; 

    function f2(){
        alert(n);
    }

    return f2;
}

var result=f1();
result(); // 999

但是要注意使用闭包时候的引用的变量可能发生变化以及this指向的问题。

• 引用变量的变化

    function outer() {
    var result = [];
    for （var i = 0； i<10; i++）{
        result.[i] = function () {
            console.info(i)
        }
    }
    return result
    }
  

  因为每个闭包函数访问变量i是outer执行环境下的变量i，随着循环的结束，i已经变成10了，所以执行每个闭包函数，结果打印10， 10， ..., 10。解决方法：

    function outer() {
        var result = [];
        for （var i = 0； i<10; i++）{
            result.[i] = function (num) {
                return function() {
                     console.info(num);    
                     
                }
            }(i)
        }
        return result
    }
  

  此时访问的num，是上层函数执行环境的num，数组有10个函数对象，每个对象的执行环境下的number都不一样。

• this的指向

    var object = {
        name: "object"，
        getName： function() {
            return function() {
                console.info(this.name)
            }
        }
    }
    object.getName()()    // underfined
  

  因为里面的闭包函数是在window作用域下执行的，也就是说，this指向windows，打印undefined。解决方案：

    var name = "The Window";
    var object = {
        name : "My Object",
        getName : function(){
            
            var that = this;
            
            return function(){
                console.info(this.name)
            };
        }
    };
    object.getName();
  

  使用that指向object,指定了匿名函数调用时的this指向对象。

闭包会使得 函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

同时闭包会在 父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

---

3.css | 什么是BFC | 什么是盒模型

什么是BFC

BFC 全称为 块格式化上下文 (Block Formatting Context) 。它是一个独立的渲染区域，有一套渲染规则，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

当一个html元素满足以下条件的时候，它便成为了了BFC环境中的元素：

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

对于BFC中的元素，其布局规则如下：

• 内部的Box会在垂直方向，一个接一个地放置。

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

• 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

• BFC的区域不会与float box重叠。

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

• 计算BFC的高度时，浮动元素也参与计

什么是盒模型

把所有的网页元素都看成一个盒子，具有：内容（content）,内边距（padding）,边框（border）,外边距（margin）四个属性。盒模型是规定了网页元素如何显示，元素间的相互关系。

盒子模型有两种形式：标准盒子模型，怪异盒子模型。两种模式可以利用box-sizing属性进行自行选择：

• 标准模式：box-sizing:content-box;
• 怪异模式：box-sizing:border-box;

标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。