前言

我面试回来了.jpg

一、JavaScript部分

我没有被问到HTML, 而CSS也被放在JavaScript部分之后了, 大概就问了这些, 我记了7个让我印象比较深刻的问题.

1.JavaScript中的prototype有什么作用?

讲真我对于prototype的理解就只局限在构造函数那一块, 还是做题积累的一点知识.
我当时说: “常见的情况是使用构造函数来生成对象, 然后…函数prototype里的属性会成为生成的对象的__proto__里的属性, 也就是这个对象里的属性.”
prototype我真的就只知道这个作用了.

2.那你知道如何用prototype实现继承吗?

现在看, 其实以前接触过这个, 就是向构造函数的prototype上加属性, 然后再new这个构造函数, 这样生成的对象里救会存在这些prototype中存在的属性.
问题是我不知道这叫"继承", 我直接说了"不太清楚…"

function  function1() {}
function  function2() {}

var fun1_pro = function1.prototype;

fun1_pro.name = "name";
fun1_pro.aMethod = function () { console.log("aMethod!") }

var obj = new function2();
obj.aMethod();

3.那比如我要把一个方法添加到对象上, 让大家都可以使用它, 该怎么做?

我答的大概是下面这种方法了, 但是这种并非给baiX这个函数添加了方法, 而是单纯的给aMethod添加.

function baiX(name, age) {
  this.name = name;
  this.age = age;
}
var aMethod = new baiX();
aMethod.xxx() = function () {
  console.log("doXxx");
};

应该是这样, 直接把方法加到原型上, 我应该想到的, 刚才一直在问原型相关:

function baiX(name,age){
  this.name = name;
  this.age = age;
}
baiX.prototype.xxx = function(){
  console.log("doXxx");
}

4.ES6中如何实现类的继承?

子类继承父类使用extends:

class SuperClass {
	constructor() {
		this.name = "Super.";
	}
}
// 定义子类，并继承以上父类
class SubClass extends SuperClass {
	constructor() {
		// 在构造器中，直接用super()来调用父类的构造器
		super();
	}
}

5.深拷贝和浅拷贝的区别是什么?

浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，
深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存

6.如何实现浅拷贝, 实现深拷贝?

参考大佬的文章: 浅拷贝和深拷贝的区别

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var newobj = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      newobj[prop] = src[prop];
    }
  }
  return newobj;
}

7.你知道JavaScript是一门单线程语言吧, 那么执行过程中各种方法和函数的执行是如何来避免阻塞的, 他们的执行顺序有什么规律吗?

“您是说宏任务和微任务吗?” “嗯, 是的.”
“js执行前会对任务进行第一轮分拣, 将微任务和可以立即执行的任务出来执行, 然后原则上一轮执行会后取宏任务执行, 宏任务里如果还有微任务或者可立即执行的话会在下一轮的分拣微任务和可立即执行的时期来执行, 如果宏任务内还套着宏任务, 那么也进入下一轮的宏任务队列.”

我感觉大体是这样的, 我没有提前对这个问题做什么准备, 但是面试官似乎不太满意这个答案…

8.JavaScript的代理模式你知道吗?

“额, 没有去了解过.”
这个单独开一篇文章吧…

JS答到第三题的时候我觉得这把铁定是寄了, 啥也不会啊这…

在这里插入图片描述

二、CSS

1.说一下CSS中的Flex布局吧.

“您是说Flex的各项属性吗?” “嗯, 对.”
(依次display:flex–order–justify-content–align-items–flex-wrap)
“好了好了, 知道你比较了解了.”

2.对position布局有理解吗? 说一下absolute和relative的区别?

“relative是相对与元素原本所在的位置进行定位.”
“absolute…在父级存在定位的情况下优先相对于父级定位自身, 如果没有的话会相对于…(这里有点懵, 我知道这样它要根据body来定位, 但是当时我没想好怎么描述这个范围)网页的可见区域吧, 大概是Body.”

3.那absolute和fixed的区别呢?

“absolute定位不会随着页面的滚动改变位置, 如果页面滚出absolute定位元素的可见区域, 那么这个元素不再能看到, 但是fixed相对于浏览器窗口进行定位, 不论如何滚动都始终保持在屏幕的某个位置.”
“fixed经常拿来做’返回顶部’.”

三、Vue、Node

他能问我Node我是没想到的…这可能算给自己挖了一个坑, 不过好在坑不大啦…

1.说一下Vue相对于原生JS写法，有何优点？

我答的挺没条理的…而且没答全吧…
“Vue是一个基于类MVVM架构的框架, 相比于原生JS直接进行DOM操作, Vue更倾向于通过去改变环境来间接的影响DOM, 从代码方面来说这样可以避免在代码里进行大量的DOM操作, 在代码量很大的时候, 优点尤其可以得到展现, 就是…对后期的代码维护比较好, 之后就是不用再手动一个一个的去操作DOM也提升了开发效率.”
以下是我没答出来的: 实现单页面富应用, 有样式隔离, node模块化, 插件可以用包管理工具即时安装使用比较方便, 然后路由系统可以比较方便的自己定义.

2.Vue是如何实现的数据双向绑定？

提到数据双向绑定, 我感觉没什么好说的但是我看过v-model指令的基本原理, 然后我就说了…现在想想简直是驴唇不对马嘴…
我说v-model指令内部对一些方法进行了封装, 对于不同的元素, v-model内部有不同的方式去获取和改变它们的值, 这也是为什么对某些元素使用v-model指令会报错v-model不能使用在该元素上.
我觉得这个大佬写的很好了, 我就不在这班门弄斧了(捂脸):
如何理解Vue数据双向绑定原理