11.17 面试复盘(60min)

AmsChan ... 2021-11-17 21:59 面试
  • 学习
  • 面试
大约 5 分钟

# 值引用、对象引用和包装引用

被问到的时候完全懵了,脑海里“检索不到”相关的知识,面试完之后,好像又想起来了。。感觉 C++白学了

# 值引用

就是最普通的形参,函数传进来的参数是像 number、boolean 这种非引用类型的变量,即使在函数内部改变参数值也不会改变原来变量的值

let a = 1;
function change(b) {
  b = 10;
}
change(b);
console.log(a); // 1
1
2
3
4
5
6

# 对象引用

就是说函数的参数如果传进来是一个对象的话,那么在函数内部改变的传进来的这个对象内部属性的时候,外部的对象也会随之改变

什么意思呢,就是说传进来的对象并不是新的对象,指向的地址没有改变,有点像浅拷贝?

下面这个例子就是对象引用

let o = {
  a: 1,
};
function change(obj) {
  obj.a = 2;
}
change(o);
console.log(o.a); // 2
1
2
3
4
5
6
7
8

# 包装引用

包装类型自动创建原始值的对应对象,在其内部封装了一些方法,所以它也是属于引用类型的一种,但是和普通的引用对象不一样的是它的生存期不同。

摘自思否

对于引用类型的数据,在执行流离开当前作用域之前都会保存在内存中,而对于自动创建的基本包装类型的对象,只存在于一行代码的执行瞬间,执行完毕就会立即被销毁。

所以下面的例子是不会改变滴~~虽然但是,其实还没有特别理解这个,暂作保留 😁

let num = new Number(1);
function change(n) {
  n = 10;
}
change(num);
console.log(num); // [Number: 1]
1
2
3
4
5
6

# typeof 和 instanceof

typeof 是用于判断数据类型的,js 分为基本数据类型和引用类型,虽然知道 null 是引用类型,但是当时想着它是属于基本数据类型,应该也能判断出来 😢,然而不是。

instanceof 用于判断引用类型,根据对象的原形链往上找,如果原形链上有右边对象的原型,返回 true,否则返回 false。 比如 A instanceof B,只要 B 的原型对象出现在 A 的原型链中就返回 true。

# position

我以为自己已经掌握了它,没想到被问深一点点就自闭了。 虽然给了提示还是答错,卒。。。。

主要是 relativeabsolute 相对于谁定位的知识有点混乱了。

# relative

相对于自身在正常流中的位置进行定位,不脱离文档流。

# absolute

相对于最近的一个祖先进行定位,该祖先满足:position 的值是非 static 以外的值,若没有这样的祖先则相对于 body 进行定位,偏移值由其 topbottomleftright 值确定,元素脱离文档流。

# fixed

相对于浏览器窗口进行定位,这个还行,没有答错

# static

默认值,意思是没有定位,正常文档流,本身不能被继承。忽略 top, bottom, left, right 或者 z-index 声明。

# sticky

粘性定位,基于用户的滚动位置来定位。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

缺点:兼容性,Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix。

# inherit

踩大坑了这个,之前在浏览器看元素的 css 时经常看到 position: inherit 这个样式,以为就是默认值。。原来不是,错得好离谱。

但 position 设置为这个值时,规定应该从父元素继承 position 属性的值。

# option 请求

周末刚看了这个请求的主要,面试时没完全想起来,面试完之后就想起来了(人间真实。。。

option 主要是一个预检的作用,探测目标是否有什么约束。比如跨域,浏览器先发送 option 请求询问服务端是否允许跨域,得到跨域允许的返回后在进行正式请求。

option 也可以用于探测服务端支持那种 HTTP 方法,是否需要携带 cookie。

另外,option 在简单请求中是没有的,在复杂请求中才会有 option 这种预检的请求方式。

# vue key 的作用 | computed 和 watch 的区别

key 的作用:看面试官的反应,好像我之前的理解不是特别透彻?或者说有偏差。

computed(依赖改变是否一定更新):当时没太懂面试官的更新是什么意思,如果是说 computed 监听的那个属性是否会更新,那么答案应该是会,当依赖发生变化的时候一定会重新计算并且更新的。

摘自 Vue 官网

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

做了个小小的试验

<html>
  <body>
    <div id="app">
      <div>{{sum}}</div>
      <input v-model="tem" />
      <button @click="change(tem)">change</button>
    </div>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          a: 1,
          b: 1,
          tem: 0,
        };
      },
      computed: {
        sum: {
          get: function() {
            console.log('change');
            return this.a + this.b;
          },
        },
      },
      methods: {
        change(target) {
          console.log(`a has been changed from ${this.a} to ${target}`);
          this.a = target;
        },
      },
    });
  </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

computed

还有 computed 是如何实现的?这个是打算和 vue 的响应式原理那块一起学的,奈何腾不出时间,被问到也很无奈

这块的知识点这里先不搞,和 vue 的相关原理一起冲!