dailyquestion03前端每日一题03

jiezi

5 年前

在这里记录着每天自己遇到的一道印象深刻的前端问题，以及一道生活中随处可见的小问题。

强迫自己形成积累的习惯，鞭挞自己不断前行，共同学习。

Github 地址

ES6 class 构造以及继承的底层实现原理
《ES6 类以及继承的实现原理》

手动实现一个 new ?

function myNew(Obj, ...args) {var obj = Object.create(Obj.prototype); // 使用指定的原型对象及其属性去创建一个新的对象
  Obj.apply(obj, args); // 绑定 this 到 obj, 设置 obj 的属性
  return obj; // 返回实例
}

手动实现一个 instanceof?

instanceof 其原理就是判断实例对象的 __proto__ 是不是强等于对象的prototype 属性，如果不是继续往原型链上找，直到 __proto__ 为 null 为止。

function instanceOf(obj, object) {//obj 表示实例对象，object 表示对象
  var O = object.prototype;
  obj = obj.__proto__;
  while (true) {if (obj === null) 
          return false; 
      if (O === obj) // 这里重点：当 O 严格等于 obj 时，返回 true 
          return true; 
      obj = obj.__proto__; 
  } 
}

== 的类型转化规则
```
[] == false // true

{} == false  // false
```
1，null 和 undefined，相等。

2，数字和字符串，转化为数字再比较。

3，如果有 true 或 false，转换为 1 或 0，再比较。

4，如果有引用类型，优先调用 valueOf。

5，其余都不相等。
DOM 和 BOM 有什么区别 ?
- DOM
  Document Object Model，文档对象模型
  DOM 是为了操作文档出现的 API，document 是其的一个对象
  
  DOM 和文档有关，这里的文档指的是网页，也就是 html 文档。DOM 和浏览器无关，他关注的是网页本身的内容。
- BOM
  Browser Object Model，浏览器对象模型
  BOM 是为了操作浏览器出现的 API，window 是其的一个对象
  
  window 对象既为 javascript 访问浏览器提供 API，同时在 ECMAScript 中充当 Global 对象
doctype有什么用?
doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义（DTD）来解析文档。

声明是用来指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。声明必须是 HTML 文档的第一行，位于 html 标签之前。
浏览器本身分为两种模式，一种是标准模式，一种是怪异模式，浏览器通过 doctype 来区分这两种模式，doctype 在 html 中的作用就是触发浏览器的标准模式，如果 html 中省略了 doctype，浏览器就会进入到 Quirks 模式的怪异状态，在这种模式下，有些样式会和标准模式存在差异，而 html 标准和 dom 标准值规定了标准模式下的行为，没有对怪异模式做出规定，因此不同浏览器在怪异模式下的处理也是不同的，所以一定要在 html 开头使用 doctype。
箭头函数和普通函数有什么区别?
- 函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象，用 call apply bind 也不能改变 this 指向
- 不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。
- 不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
- 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。
- 箭头函数没有原型对象 prototype

new 一个对象经历了什么
```
function Test() {}
const test = new Test();
```
1. 创建一个对象 const obj = {}
2. 设置新对象的 constructor 属性为构造函数的名称，设置新对象的 proto 属性指向构造函数的 prototype 对象
```
obj.constructor = Test;
obj.__proto__ = Test.prototype;
```
1. 使用新对象调用函数，函数中的 this 被指向新实例对象 Test.call(obj)
2. 将初始化完毕的新对象地址，保存到等号左边的变量中
event.target 和 event.currentTarget 区别
event.target 返回触发事件的元素, event.currentTarget 返回绑定事件的元素
Vue <transition> 的类名详解？
在进入 / 离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡 / 动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡 / 动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡 / 动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡 / 动画完成之后移除。
监听页面关闭或者刷新事件？

页面加载时只执行 onload 事件。

页面关闭时，先 onbeforeunload 事件，再 onunload 事件。

页面刷新时先执行 onbeforeunload 事件，然后 onunload 事件，最后 onload 事件。

因此监听 onbeforeunload 事件，如下：
```
window.addEventListener('beforeunload', e => this.beforeunloadFn(e));
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e));
```
如何实现点击按钮下载文件？

这个时候就需要给 a 标签添加一个属性“download”，如：
```
<a
  href="https://github.com/zxpsuper/Demo/archive/master.zip"
  download="master.zip"
  > 点击下载 </a
>
```
立即执行函数？

立即执行函数（IIFE）常用于第三方库，好处在于隔离作用域，任何一个第三方库都会存在大量的变量和函数，为了避免变量污染（命名冲突），开发者们想到的解决办法就是使用立即执行函数。

通过定义一个匿名函数，创建了一个新的函数作用域，相当于创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏污染全局的命名空间。此时若是想访问全局对象，将全局对象以参数形式传进去即可
```
(function() {})();
```

函数柯里化的理解？

在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。

那究竟柯里化有什么作用呢？常见的作用是：参数复用、延迟运行、扁平化

函数柯里化（curry）的定义很简单：传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。

比如对于加法函数 var add = (x, y) => x + y，我们可以这样进行柯里化：
```
// 比较容易读懂的 ES5 写法
var add = function(x) {return function(y) {return x + y;};
};

//ES6 写法，也是比较正统的函数式写法
var add = x => y => x + y;

// 试试看
var add2 = add(2);
var add200 = add(200);

add2(2); // =>4
add200(50); // =>250
```

dailyquestion03前端每日一题03

2019/04/29 – 2019/05/05

2019/04/22 – 2019/04/28