面试知识点总结1（2019-8-30）

傷城~ 2024-04-17 19:36 71阅读 0赞

## 一、CSS定位（position属性） ##

1.  `static`：

*  正常布局，即元素正常的流式布局
 *  top、right、left、bottom、z-index在static定位元素下无效

1.  `relative`:

*  相对定位，处于文档流，是相对于其原本的位置来定位的，不影响其他div，，而relative定位的子元素会撑大父元素
 *  对`table-*`元素无效

1.  `absolute`:

*  绝对定位，脱离文档流，相对于离它最近的非static定位的父元素定位，由于已经脱离文档流，所以`absolute`定位的子元素宽度不会影响父元素的宽

1.  `fixed`

*  脱离文档流,生成`absolute`定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 "bottom"属性进行规定。
 *  fixed属性会创建新的层叠上下文
 *  当元素祖先的transform属性非none时，容器就会相对于该祖先（不是viewport）来定位.

1.  `inherit`

*  规定应该从父元素继承 position 属性的值

## 二、作用域与函数作用域链 ##

> 作用域是一套用来确定如何查找变量对象的规则。

*  如果查找的目的是赋值，`var a = 2`,对a的引用是LHS引用
 *  如果查找的目的是获取变量`console.log(a)`,对a的引用是RHS引用
    
    > LHS和RHS都会从当前作用域开始一级一级作用域的查找，直到找到或者达到作用域的顶层

> 函数作用域的含义是指属于这个函数的全部变量都可以在整个函数的范围内使用及复用

*  定义函数的方式：
    
     *  函数声明
     *  函数表达式
     *  new Function()
 *  函数声明提升：函数声明提前的时候，函数声明和函数体均提前了
 *  tips：
    
     *  函数声明优先于变量声明（包括表达式）

console.log(a);//[Function: a]
    function a(){
    	console.log("func!");
    }
    var a = 223;

*  变量声明，如果名称已存在则跳过该声明，赋值需更新其值
 *  函数声明，如果名称已存在则覆盖

## 三、闭包 ##

> 闭包是一个函数，当函数能够记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行的。

function makeFunc() {
      var a = 111;
      function resFunc() {
        console.log(a);
      }
      return resFunc;
    }
    
    var myFunc = makeFunc();
    myFunc();

`makeFunc()`返回了一个闭包，闭包由函数和它的词法环境组成，也就是说这个闭包由定义的函数`resFunc()`和变量`a`组成，此时`a`是外部函数定义的变量，但`resFunc()`存在对变量`a`的引用。当`makeFunc()`调用时，变量`a`可被访问，导致`a`内存不释放。

*  addone、addtwo都是闭包，返回一个参数为arg且返回值为arg+x的函数

function add(x) {
      return function addY(y) {
        return x+y;
      }
    }
    var addone = add(1);//返回一个参数为arg且返回值为arg+1的函数
    var addtwo = add(2);//返回一个参数为arg且返回值为arg+2的函数
    console.log(addone(999));//1000
    console.log(addtwo(999));//1001

*  闭包使用场景

1.  基于事件驱动，修改css属性，例如给onclick事件写一个回调函数

function changeBgcolor(color) {
      return function() {
        document.body.style.background = color;
      };
    }

1.  私有化属性，封装
2.  \[采用函数引用方式的setTimeout调用\]（https://www.cnblogs.com/xdouby/p/6421936.html）
3.  将函数关联到对象的实例方法。