前端拾遺--javascript-ES6基礎

時間 2020-03-22

標籤前端拾遺 javascript es6 基礎欄目 JavaScript 简体版

原文原文鏈接

箭頭函數和普通函數的區別

箭頭函數是匿名函數，不能做爲構造函數，不能使用newjavascript
箭頭函數不綁定arguments，取而代之用rest參數 （...rest）前端
箭頭函數不綁定this，會捕獲其所在的上下文的this值，做爲本身的this值.其中須要注意的是： 箭頭函數的 this 永遠指向其上下文的 this ，任何方法都改變不了其指向，如 call() , bind() , apply()java

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b();  // window
obj.c();  // 10

複製代碼

箭頭函數沒有原型屬性

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);  // undefined
console.log(b.prototype);   // {constructor: ƒ}
複製代碼

談談var,let,const 的使用和區別

一、在 ES6以前，ES5中js只有全局做用域和函數做用域，let ==增長了塊級做用域==

if(true) {
   let a = 'name'
}
console.log('a',a) // a is not defined
複製代碼

二、let 限制了變量提高（JavaScript 中函數和變量都會提高，==函數的提高優先級大於變量的提高==,因此下面會先打印函數）

變量提高指的是變量聲明的提高，不會提高變量的初始化和賦值。react

function fn() {
    console.log('a', a);
    var a = 1;
    function a () {
        console.log('I am a function');
    }
}
fn() // ƒ a () {console.log('I am a function');}
複製代碼

使用 let 的時候面試

function fn1() {
    console.log('a', a);
    let a = 1;
    function a () {
        console.log('I am a function');
    }
}
fn1();
VM1868:4 Uncaught SyntaxError: Identifier 'a' has already been declared
複製代碼