面试必问但日常不愿意看的题

  • 1，做道 this 相关的题，看你对 js 的 this 掌握的如何
  • 2，BFC 这样答才完美
    • 1，什么是 BFC？其规则是什么？
    • 2，如何触发 BFC
    • 3，BFC 到底可以解决什么问题呢
  • 3，作用域
  • 4，作用域链
  • 5，闭包

1，做道 this 相关的题，看你对 js 的 this 掌握的如何

var name = 'Jerry';
var a = {
  name: 'Tom',
  say: function () {
    console.log(this.name);
  },
};
var fun = a.say;
fun();
a.say();
var b = {
  name: 'xiaowang',
  say: function (fun) {
    fun();
  },
};
b.say(a.say);
b.say = a.say;
b.say();

2，BFC 这样答才完美

BFC 算是前端面试的高频考点了，但是每次回答的都不尽人意(至少我是这样的)。

回答这个问题我们可以从三点来进行

  • 1，什么是 BFC？其规则是什么？
  • 2，怎么触发 BFC
  • 3，BFC 它能够解决什么问题

1，什么是 BFC？其规则是什么？

BFC 的全称是 Block formatting context 对应中文是：块级格式化上下文，它是一个独立的渲染区域，我们可以把 BFC 理解为一个封闭的容器，内部的元素无论怎么布局都不会影响外部，容器内的样式布局自然也不会受外界的影响。

它内部的规则有：

  • 1，BFC 就是一个块级元素，块级元素会在垂直方向一个接一个排列
  • 2，BFC 就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
  • 3，BFC 区域不会与浮动的容器发生重叠
  • 4，属于同一个 BFC 的两个相邻元素的外边距会发生重叠，垂直方向的距离由两个元素中 margin 的较大值决定
  • 5，计算 BFC 的高度时，浮动元素也会参与计算

2，如何触发 BFC

我们可以通过添加一些 css 属性来触发，常见的有：

  • overflower 除了 visible 以外的值
  • position 的值设置为 absolute 或者 fixed
  • display 的值设置为 inline-block 或者 flex

3，BFC 到底可以解决什么问题呢

  • 1，它可以阻止元素被浮动元素覆盖，比如两栏布局

    <div class="left">left</div>
    <div class="right">right</div>
    .left {
      width: 100px;
      height: 100px;
      border: 1px solid aqua;
      float: left;
    }
    .right {
      background-color: rgb(255, 200, 209);
    }

由图可以看出，由于左边的 div 浮动后脱离文档流不占空间了，就会导致右边的 div 到了最左边，同时左侧浮动的 div 还会覆盖在上面，这时候我们就可以通过把右侧的 div 设置为一个 BFC，比如可以给它添加 display: flex 来触发，就可以解决右侧被左侧覆盖的问题

.right {
  width: auto;
  background-color: rgb(255, 200, 209);
  display: flex;
}
  • 2，解决父元素没有高度，子元素设置为浮动元素时，产生的父元素高度塌陷的问题，比如一个容器内的两个 div 都是浮动元素，此时给父元素设置背景色是没有任何效果的，因为此时父元素的高度为 0 
<div class="p">
  <div>1</div>
  <div>2</div>
</div>

.p div {
  width: 100px;
  height: 100px;
  border: 1px solid aqua;
  float: left;
}
.p {
  background-color: rgb(157, 255, 0);
}

这时候我们就可以添加一个可以触发父元素 BFC 功能的属性，因为 BFC 有个规则是计算 BFC 的高度时，浮动元素也参与计算，所以触发 BFC 后，父元素的高度就会被撑开，也就是会产生清除浮动的效果

.p {
  background-color: rgb(157, 255, 0);
  overflow: hidden;
}
  • 3，可以解决 margin 边距重叠的问题，比如一个容器里有两个 div，这两个 div 分别设置了自己的 margin，一个是 10px，一个是 20px，正常两个盒子的垂直距离是 30px，不然，我们会发现两个盒子之间的垂直距离是 20px，这就是 margin 塌陷问题 
<div>
  <div class="t">1</div>
  <div class="b">2</div>
</div>
.t,
.b {
  width: 100px;
  height: 100px;
  background-color: rgb(245, 108, 73);
  margin: 10px;
}
.b {
  background-color: paleturquoise;
  margin: 20px;
}

这就是 margin 塌陷问题，此时 margin 边距的结果为两个 div 间的较大值，如果我们想让 margin 外边距变为正常的 30，可以触发一个 div 的 BFC，它的内部就会遵循 BFC 规则，这样就可以为元素包裹一个盒子形成一个完全独立的空间，做到里面的元素不受外部元素的影响

<div>
  <div class="t">1</div>
  <div style="overflow: hidden">
    <div class="b">2</div>
  </div>
</div>

3，作用域

作用城是指程序源代码中定义的范国, 分为全局作用域和局部作用域也叫函数作用域, 作用域规定了如何设置变量，也就是确定当前执行代码对变量的访问权限, 函数作用城采用词法作用域，也就是静态作用域

  • 所谓词法作用域就是在函数定义的时候, 就已经确定了

    let value = 1;
    function fn() {
      console.log(value);
    }
    function foo() {
      let value = 2;
      fn();
    }
    foo();  // 1 函数是一个静态作用域

  • 变量对象

    变量对象是当前代码段中，所有的变量(变量函数 形参 arguments)组成的一个对象，变量对象是在执行上下文中被激活的，只有变量对象被激活了，在这段代码中才能使用所有的变量，变量对象分为全局变量对象和局部变量对象 全局简称为 Variable Object VO 函数由于执行才被激活 称为 Active Object AO

    let value = 1;
    function fn() {
      console.log(value);
    }
    function foo() {
      let value = 2;
      fn();
    }
    foo();  // 1

    以上代码 VO 和 AO 示意图：

4，作用域链

在 js 中，函数存在一个隐式属性scopes，其实scopes存的就是变量的集合 VO，这个属性用来保存当前函数的执行上下文环境，由于在数据结构上是链式的，因此也被称作是作用域链，我们可以把它理解为一个数组，可以理解为是一系列的 AO 对象所组成的一个链式结构。

scopes属性在函数声明的时候产生的，在函数调用的时候更新，即在函数被调用的时候，将该函数的 AO 对象压入 scopes 中。

  • 作用域链的作用

    作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到 window 对象即被终止，作用域链向下访问变量是不被允许的 最直观的表现就是：函数内部可以访问到函数外部声明的变量

let value = 100;
function fn() {
  console.log(value);  // 100  函数内部可以访问到函数外部声明的变量
  let res = 200;
}
fn();
console.log(res);  // res is not defined  函数外部访问不到函数内部的变量

画出以下代码的作用域链：

let global;
function fn() {
  var a = 10;
  function foo() {
    var b = 100;
  }
  foo();
}
fn();
// fn定义 fn执行 foo定义 foo执行
// 如果没有fn执行会有foo定义吗？没有，所以说b定义的时候和a执行的时候作用域链是一样的

函数执行完之后会销毁，所谓的销毁就是作用域链断开。

将以上代码改为典型的闭包：

let global;
function fn() {
  var a = 10;
  function foo() {
    console.log(a);
  }
  return foo;
}
let res = fn();
res();  // 10   fn()函数调用的时候，fn函数的作用域链会断掉，即a变量会被销毁，但是foo定义的时候，foo的作用域链会连接上，所以还是可以访问到a变量的。

5，闭包

它指的是有权访问另一个函数作用域中的变量的函数。具体来说，它可以被理解为定义在一个函数内部的函数，这样内部函数就可以访问到外部函数的局部变量。

闭包的存在是为了允许我们间接访问函数内部的变量，同时也能延长这些变量的使用寿命，并减少命名空间污染

两个函数嵌套，一个函数有权访问到另一个函数中的变量就形成了闭包，这个时候会造成内存的泄漏吗？

并不一定会造成内存泄漏，造成内存泄漏的必要条件是：内部的函数要保存到外面再进行执行的时候，才会延长fn函数的作用域链才会造成内存的泄漏

1，闭包的实战应用
1，防抖节流函数是闭包
2，单例模式是闭包
3，回调函数
// 回调函数是闭包吗？是
function add(num1, num2, callback) {
  let sum = num1 + num2;
  if (typeof callback === "function") {
    callback(sum);
  }
}
add(10, 20, function (sum) {
  console.log(sum);
});  
// 30
4，手写js的方法，手写bind方法是闭包
let foo = {
  name: "xiaowang",
};
function getName() {
  console.log(this.name);
}
Function.prototype.myBind = function (obj) {
  let _t = this;
  return function () {
    return _t.call(obj);
  };
};
let getFooName = getName.myBind(foo);
getFooName();

5，定时器传参是闭包

function fn(a) {
  return fucntion (){
    console.log(a)
  }
}
setTimeout(fn(123), 1000)

6，利用闭包判断数据类型是闭包

function isType(type) {
  return function (target) {
    return `[object ${type}]` === Object.prototype.toString.call(target);
  };
}
const isArray = isType("Array");
console.log(isArray([1, 2, 3])); // true
console.log(isArray(1)); // false

7，封装私有变量和函数

function createPerson(name) {
  let age = 0;
  return {
    getName: function () {
      return name;
    },
    getAge: function () {
      return age;
    },
    setAge: function (newAge) {
      age = newAge;
    },
  };
}
let person = createPerson("xiaowang");
console.log(person.getName()); // xiaowang
console.log(person.getAge()); //0
person.setAge(18);
console.log(person.getAge()); //18
8，高阶函数
  • 高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回
  • 实现对一个数组的求和 
function sum(arr) {
  return arr.reduce(function (x, y) {
    return x + y;
  });
}
let res = sum([10, 20, 30, 40]);
console.log(res); //100
  • 但是，如果不需要立即求和，而是在后面的代码中，根据需要再计算怎么办？可以不返回求和的结果，而是返回求和的函数 
function lazy_sum(arr) {
  let sum = function () {
    return arr.reduce(function (x, y) {
      return x + y;
    });
  };
  return sum;
}
let res = lazy_sum([10, 20, 30, 40]);
console.log(res()); //100

9，迭代器(执行一次函数往下取一个值)

let arr = ["xiaowang", "xiaoli", "xiaoma"];
function incre(arr) {
  let i = 0;
  return function () {
    return arr[i++];
  };
}
let next = incre(arr);
console.log(next()); // xiaowang
console.log(next()); // xiaoli
console.log(next()); // xiaoma
console.log(next()); // undefined
10, 缓存

比如求和操作，如果没有缓存，每次调用都要重新计算，采用缓存已经执行过的去查找，查找到了就直接返回，不需要重新计算

let fn = (function () {
  let cache = {};
  let calc = function (arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i];
    }
    return sum;
  };
  return function () {
    let args = Array.prototype.slice.call(arguments, 0);
    let key = args.join(",");
    let result,
        totalCache = cache[key];
    if (totalCache) {
      // 如果缓存有
      console.log("从缓存中取", cache);
      result = totalCache;
    } else {
      result = cache[key] = calc(args);
      console.log("存入缓存：", cache);
    }
    return result;
  };
})();
fn(1, 2, 3, 4, 5, 6); // 存入缓存： {1,2,3,4,5,6: 21}
fn(1, 2, 3, 4, 5, 6); // 从缓存中取 {1,2,3,4,5,6: 21}
fn(1, 2, 3, 4, 5, 6, 7, 8); // 存入缓存： {1,2,3,4,5,6: 21, 1,2,3,4,5,6,7,8: 36}
fn(1, 2, 3, 4, 5, 6, 7, 8); // 从缓存中取： {1,2,3,4,5,6: 21, 1,2,3,4,5,6,7,8: 36}
fn(1, 2, 3, 4, 5, 6, 7, 8); // 从缓存中取： {1,2,3,4,5,6: 21, 1,2,3,4,5,6,7,8: 36}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/496991.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

pycallgraph，一个好用的 Python 代码可视化库！

pycallgraph，一个好用的 Python 代码可视化库！

目录 前言 什么是pycallgraph库&#xff1f; 安装pycallgraph库 使用pycallgraph库 pycallgraph库的功能特性 1. 支持多种输出格式 2. 支持定制化配置 3. 支持并发程序分析 示例代码 pycallgraph库的应用场景 1. 性能优化 2. 调试和错误排查 3. 代码维护和重构 4. 项目文…
阅读更多...
代码遗产：探索祖传代码的历史、挑战与现代融合艺术

代码遗产：探索祖传代码的历史、挑战与现代融合艺术

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…
阅读更多...
【算法历练】动态规划副本—路径问题

【算法历练】动态规划副本—路径问题

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;宙でおやすみ 1:02━━━━━━️&#x1f49f;──────── 2:45 &#x1f504; ◀️ ⏸ ▶️ ☰ &#…
阅读更多...
基于Python网络爬虫的IT招聘就业岗位数据分析可视化推荐系统

基于Python网络爬虫的IT招聘就业岗位数据分析可视化推荐系统

文章目录 基于Python网络爬虫的IT招聘就业岗位数据分析可视化推荐系统项目概述招聘岗位数据爬虫分析系统展示用户注册登录系统首页IT招聘数据开发岗-javaIT招聘数据开发岗-PythonIT招聘数据开发岗-AndroidIT招聘数据开发岗-其它招聘岗位数据分析算法方面运维方面测试方面招聘岗…
阅读更多...
【Python_Zebra斑马打印机编程学习笔记（三）】解决ZPL指令无法显示中文的问题

【Python_Zebra斑马打印机编程学习笔记（三）】解决ZPL指令无法显示中文的问题

解决ZPL指令无法显示中文的问题 解决ZPL指令无法显示中文的问题前言一、问题描述二、字符集、码表文件、字库文件1、字符集2、码表文件3、字库文件 三、两种设置中文字体的方式1、通过设置字符集、码表文件、字库文件改变默认字体2、通过^CF指令设置标准字体名称改变默认字体 解…
阅读更多...
进程间通信学习笔记（共享内存）

进程间通信学习笔记（共享内存）

内存映射概念&#xff1a; 共享内存可以通过mmap()映射普通文件使一个磁盘文件与内存中的一个缓冲区相映射&#xff0c;进程可以像访问普通文件一样对文件进行访问&#xff0c;不必再强调read,write。 mmap的优点&#xff1a; 实现了用户空间和内核空间的高效交互方式 mmap的…
阅读更多...
开源大模型LLM大爆发，数据竞赛已开启！如何使用FuseLLM实现大语言模型的知识融合？

开源大模型LLM大爆发，数据竞赛已开启！如何使用FuseLLM实现大语言模型的知识融合？

开源大模型LLM大爆发&#xff0c;数据竞赛已开启&#xff01;如何使用FuseLLM实现大语言模型的知识融合&#xff1f; 现在大多数人都知道LLM是什么&#xff0c;以及可以做什么。 人们讨论着它的优缺点&#xff0c;畅想着它的未来&#xff0c; 向往着真正的AGI&#xff0c;又有…
阅读更多...
unity初学问题：如何修改图片的坐标

unity初学问题：如何修改图片的坐标

如图&#xff0c;我们想要修改图片的轴心点坐标&#xff08;Pivot&#xff09; 选择图片组 打开编辑器在里面修改即可&#xff08;最下面的Custom Pivot&#xff09;
阅读更多...
C++之atexit-pthread用法详解

C++之atexit-pthread用法详解

目录 1.atexit()函数使用说明 pthread_once() 函数详解 1.atexit()函数使用说明 NAME atexit - 用来注册执行 exit()函数前执行的终止处理程序.SYNOPSIS #include <stdlib.h> int atexit(void (*function)(void))&#xff1b;DESCRIPTION atexit()用来注册终止处理程序&…
阅读更多...
51单片机（6）-----直流电机的介绍与使用（通过独立按键控制电机的运行）

51单片机（6）-----直流电机的介绍与使用（通过独立按键控制电机的运行）

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步。 目录 一. 直流电机模块介绍 1.直流电机介绍 2.电机参数 二. 程序设计…
阅读更多...
算法C++

算法C++

枚举 1.化段为点 前缀和 eg:给一个数列&#xff0c;算x到y个数的和 #include <iostream> #include <vector> using namespace std;int main() {int n;cin>>n;vector<int> a(n);vector<int> sum(n1,0);for(int i0;i<n;i){scanf…
阅读更多...
深入探究【观察者模式】：简单音乐会售票系统案例分析

深入探究【观察者模式】：简单音乐会售票系统案例分析

文章目录 1.观察者模式概述基本概念&#xff1a;工作原理&#xff1a; 2.案例-音乐会抢票2.1.具体实现2.1.1.被观察者接口2.1.2.被观察者实现类2.1.3.定义观察者接口2.1.3.定义观察者实现类2.1.4.测试观察者 3.总结3.1.优点和局限性3.2.思考 1.观察者模式概述 观察者模式是一种…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023