前端面试题（三）

目录

1.null 和 undefined 的区别，如何让一个属性变为null

2.es6中箭头函数

3.call apply bind的作用和区别

4.this指向（普通函数、箭头函数）

5.浮动

6.HTML语义化

---

1.说一说null 和 undefined 的区别，如何让一个属性变为null

undefind是全局对象的一个属性，当一个变量没有被赋值或者一个函数没有返回值或者某个对象不存在某个属性却去访问或者函数定义了形参但没有传递实参，这时候都是undefined。undefined通过typeof判断类型是'undefined'。undefined==undefined，undefined===undefined。null代表对象的值未设置，相当于一个对象没有设置指针地址就是null。null通过typeof判断类型是'object'。null===null，null==null，null==undefined，null !==undefined。undefined表示一个变量初始状态值，而null则表示一个变量被人为的设置为空对象，而不是原始状态。在实际使用过程中，不需要对一个变量显式的赋值undefined，当需要释放一个对象时，直接赋值为null即可。 让一个变量为null，直接给该变量赋值为null即可。

null其实属于自己的类型Null，而不属于Object类型，typeof之所以会判定为Object类型，是因为JavaScript数据类型在底层都是以二进制的形式表示的，二进制的前三位为0会被typeof判断为对象类型，而null的二进制位恰好都是0，因此null被误判断为Object 类型。

2.说一说es6中箭头函数？

箭头函数相当于匿名函数，简化了函数定义。箭头函数有两种写法，当函数体是单条语句的时候可以省略{}和return。包含多条语句时不可以省略{}和return。箭头函数最大的特点就是没有this，所以this是从外部获取，就是继承外部的执行上下文中的this，由于没有this关键字所以箭头函数也不能作为构造函数，同时通过`call()`或`apply()`方法调用一个函数时，只能传递参数（不能绑定this），第一个参数会被忽略。箭头函数也没有原型和super。不能使用yield关键字，因此箭头函数不能用作Generator 函数。不能返回直接对象字面量。不适用场景：定义对象上的方法：当调用` dog.jumps`时，`lives`并没有递减。因为`this`没有绑定值，而继承父级作用域。

var dog = { 
  lives: 20, 
  jumps: () => { 
    this.lives--;
  }
} 

事件处理程序：此时触发点击事件，this不是button，无法进行class切换

var button = document.querySelector('button'); 
button.addEventListener('click', () => {
  this.classList.toggle('on'); 
}); 

箭头函数函数适用场景：简单的函数表达式，内部没有this引用，没有递归、事件绑定、解绑定，适用于map、filter等方法中，内层函数表达式，需要调用this，且this应与外层函数一致时

let group = { 
  title: "Our Group", 
  students: ["John", "Pete", "Alice"], 
  showList() { 
    this.students.forEach( student => alert(this.title + ': ' + student) ); 
  } 
}; 
group.showList();

3.说一说call apply bind的作用和区别？

call、apply、bind的作用都是改变函数的this指向。bind和call、apply在使用上有所不同，bind在改变this指向的时候，返回一个改变执行上下文的函数，不会立即执行函数，而是需要调用该函数的时候再调用即可，但是call和apply在改变this指向的同时执行了该函数。bind只接收一个参数，就是this指向的执行上文。call、apply接收多个参数，第一个参数都是this指向的执行上文，后面的参数都是作为改变this指向的函数的参数。call和apply参数的格式不同，call是一个参数对应一个原函数的参数，apply第二个参数是数组，数组中每个元素代表函数接收的参数，数组有几个元素函数就接收几个元素。

call的应用场景：对象的继承，在子构造函数这种调用父构造函数，但是改变this指向，就可以继承父的属性

function superClass () { 
  this.a = 1; 
  this.print = function () { 
    console.log(this.a); 
  } 
} 
function subClass () { 
  superClass.call(this); // 执行superClass，并将superClass方法中的this指向subClass 
  this.print(); 
} 
subClass(); 

apply使用场景：实现两个数组合并

let arr1 = [1, 2, 3]; 
let arr2 = [4, 5, 6]; 
Array.prototype.push.apply(arr1, arr2); 
console.log(arr1); // [1, 2, 3, 4, 5, 6] 

bind应用场景：在vue或者react框架中，使用bind将定义的方法中的this指向当前类

4.说一说this指向（普通函数、箭头函数）？

this存在的场景有三种：全局执行上下文、函数执行上下文、eval执行上下文。在全局执行环境中无论是否在严格模式下，（在任何函数体外部）`this`都指向全局对象。在函数执行上下文中访问this，函数的调用方式决定了`this`的值。在全局环境中调用一个函数，函数内部的this指向的是全局变量window，通过一个对象来调用其内部的一个方法，该方法的执行上下文中的this指向对象本身。普通函数this指向：当函数被正常调用时，在严格模式下，this值是undefined，非严格模式下this指向的是全局对象window；通过一个对象来调用其内部的一个方法，该方法的执行上下文中的this指向对象本身。new关键字构建好了一个新对象，并且构造函数中的this其实就是新对象本身。嵌套函数中的this不会继承外层函数的this值。箭头函数this指向：箭头函数并不会创建其自身的执行上下文，所以箭头函数中的this取决于它的外部函数。箭头函数因为没有this，所以也不能作为构造函数，但是需要继承函数外部this的时候，使用箭头函数比较方便。

5.说一下浮动？

浮动的作用：设置浮动的图片，可以实现文字环绕图片，设置了浮动的块级元素可以排列在同一行，设置了浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。 设置浮动元素的特点：设置了浮动的元素脱离文档流，元素不占位置。浮动可以进行模式转换（行内块元素）。浮动造成的影响：使盒子脱离文档流，如果父级盒子没有设置高度，需要被子盒子撑开，那么这时候父级盒子高度塌陷，同时也会造成父级盒子后面的兄弟盒子布局受到影响。如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。清除浮动的方法：给父元素设置高度；给父元素增加`overflow：hidden`属性；增加一个空的div，设置clear：both；伪元素清除浮动：给父元素增加

.clearfix::after{ 
   content:' ';
   display:table;
   clear:both; 
} 

6.说一说HTML语义化？

HTML语义化就是指在使用HTML标签构建页面时，避免大篇幅的使用无语义的标签。作用：易于用户阅读，样式文件未加载时，页面结构清晰。有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页。有利于开发和维护，代码更具可读性，代码更好维护。HTML5语义化标签并没有广泛使用，比如京东、淘宝等，还是使用div元素，设置id是header或者footer，这个可能是因为HTML5新增的语义化标签的作用不是特别大，网站没有必要重写。

（来源：牛客网）