ES6核心問題是什麼?本文詳解

1.let 和 const 命令

在es5時,只有兩種變量聲明,var 和function。在es6中新增了四種let和const,以及另外兩種聲明import和class。 咱們先講解let和const,後續會補充import和classjava

(1)let

咱們先來看基本語法es6

{
 let a = 10; var b = 1; } b // 1 a // ReferenceError: a is not defined. 複製代碼

咱們在代碼塊中聲明瞭a,b。而後a is not defined.這是由於let命令只在對應的代碼塊中有效,咱們在外部去引用它,就會報錯。這就是let的塊級做用域的效果,若是不太清楚什麼是塊級做用域。咱們來看下面的例子web

var a = [];
for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[0]();//10 a[6](); // 10 除了本文案例,接下來我還會在個人裙裏用視頻講解的方式給你們拓展下圖中的內容:有興趣的能夠來個人扣扣裙 519293536 免費交流學習,我都會盡力幫你們哦,

這是一個老生常談的問題了。i在for循環中定義的是全局變量。咱們在調用函數時。函數內部的i引用的是全局的i,因此打印出來的 是10. 咱們以前是這樣解決的。編程

var a = [];
    for (var i = 0; i < 10; i++) { a[i] = (function (a) { return function(){ console.log(a); } }(i)); } a[0]();//0 a[6](); // 6 複製代碼

咱們使用了當即執行函數將i的值傳入了內部的函數,這樣內部的函數就可以獲取到對應的i。數組

咱們用let來代替var,最後輸出的是 6。bash

var a = [];
for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6 複製代碼

這是由於咱們每一次的循環都生成了一個新的塊級做用域,內部保存着i的值,因此就會打印出6.網絡

let不存在變量提高app

console.log(a);
   console.log(b);
   var a=0;//undefined
   let b=0;//ReferenceError: b is not defined 複製代碼

TDZ(暫時性死區) let命令在塊級做用域中,即便不存在變量提高,它也會影響當前塊級做用域,即綁定在了當前做用域。在做用域中引用外部的變量將會報錯。async

var a=10;
  {
      console.log(a);  //ReferenceError: a is not defined
      let a=10; } 複製代碼

同時,咱們在TDZ中使用typeof也會報錯.函數

console.log( typeof a);//undefined
複製代碼
console.log( typeof a);//ReferenceError: a is not defined
  let a=10; 複製代碼

let 不容許重複聲明變量

{
    var a=0;
    let a=1;//SyntaxError: Identifier 'a' has already been declared } 複製代碼

(2) const常量

const常量聲明一個只讀屬性的變量,不可更改,不可先聲明後賦值,生成塊級做用域。

const a;//SyntaxError: Missing initializer in const declaration(const聲明中缺乏初始值設定項) a=10; 複製代碼

它同let有不少類似的地方。 .不可重複聲明

const a=10;
var a=10;//SyntaxError: Identifier 'a' has already been declared 複製代碼

.變量不提高

console.log(a)//ReferenceError: a is not defined
const a=10;
複製代碼

.一樣存在暫時性死區

var a=10;
{
    console.log(a);//ReferenceError: a is not defined
    const a=10;
}
複製代碼

另外,const保證常量的值不被修改的原理是什麼呢?const實際上沒法改變的只是常量在棧區的值不變,若是這個值是一個基本數據類型,那麼const可以保障常量的值不變,但若是是引用類型的數據,棧區保存的實際上是對應常量的地址。地址沒法改變,可是對應地址的堆區內容卻能夠改變。

const a=[1,2,3]
 a.push(4)
 console.log(a); //[1, 2, 3, 4]
複製代碼

很顯然,咱們經過push,直接修改了堆區的內容,間接改變了const常量的值。

若是要真正作到常量的功能,可使用Object.freeze()

var a=[1,2,3];
Object.freeze(a)
a.push(4)  //Cannot add property 3, object is not extensibleat Array.push
console.log(a);
複製代碼

2.字符串擴展方法

(1)for of字符串遍歷

使用for of能夠遍歷字符串,並將字符串分解爲單獨的字符串

var a='lang' for (item of a){ console.log(item); } // l // a // n // g 複製代碼

(2) codePointAt字符串查詢.

根據下標,查詢對應字符串。在Es5時,就有一個charAt()方法。但charAt()顯然沒想到,隨着Unicode編碼的擴展,原先的0x0000~0xFFFF已經沒法知足表示全部字符了。

var text = "𠮷"; text.charAt(0); //'' text.charAt(1); //'' 複製代碼

因此es6中新增了codePointAt(),查詢,codePointAt()有着更好的unicode支持,可以查詢>0xFFFF的字符。

var text = "𠮷"; console.log(text.codePointAt(0)); //134071 複製代碼

(3)includes()值存在判斷

在es6以前使用indexof也能夠進行值存在判斷。includes與indexof既能夠進行字符串的判斷,也能夠進行數組值的判斷, 可是indexof在對NaN進行判斷時會出現不許確。

var text = [1,NaN]
console.log(text.indexOf(NaN));//-1
複製代碼

另外,indexof的返回結果爲-1||0,includes爲true||false.

(4) repeat()字符串重複

str=repeat(n)返回的是新的字符串,而且會將str的字符串重複n次。

var a='lang' console.log(a.repeat(3));//langlanglang 複製代碼

其中n會自動取整。n<=-1||n==infinaty將會報錯。

(5)startwith,endwith。

startWith('str',n):返回布爾值,表示參數字符串是否在原字符串的頭部。

endsWith('str',n):返回布爾值,表示參數字符串是否在原字符串的尾部。其中str表示要判斷的值,n表示從目標字符串的第幾個元素開始。

var str='hello world' console.log(str.startsWith('hello',0)); //true console.log(str.startsWith('world',6)); //true console.log(str.startsWith('world',0)); //false 複製代碼

(6)padStart(),padEnd()

es6提供了兩個字符串追加的方法String.prototype.padStart和String.prototype.padEnd,方便咱們將一個新的字符串追加到某個字符串的頭尾。

咱們經常使用padstart來使字符串輸出時保持格式。

var a='abc' var b='abcd' var c='abcd' console.log(a.padStart('10',0)); console.log(b.padStart('10',0)); console.log(c.padStart('10',0)); //0000000abc //000000abcd //00000abcde 複製代碼

但有時候使用endstart顯然會更好。

var a='abc' var b='abcd' var c='abcde' console.log(a.padEnd(10,'-------')); console.log(b.padEnd(10,'-------')); console.log(c.padEnd(10,'-------')); //abc------- //abcd------ //abcde----- 複製代碼

也能夠組合使用達到效果

var obj={
  name:'wangcai', car:'BMW', wife:'fatgirl' } for(var item in obj){ console.log(item.padEnd(10,'-')+'value:'+obj[item].padStart(10,'**')); } //name------value:***wangcai //car-------value:*******BMW //wife------value:***fatgirl 複製代碼

(7)**模板字符串

模板字符串的引入是es6的一大亮點,它使得輸出模板變得簡潔而方便。模板採用反引號(``),中間支持各類格式的輸出。 包括換行,空格,變量,表達式,調用函數等。咱們能夠在一個模板中組合使用它們

var age=22;
var name='lang' var say=()=>{ return 'hello' } var str=`myname is${name} my age is ${age} and i can say ${say()}` console.log(str); //myname islang my age is 22 and i can say hello 複製代碼

在模板字符串的 ${} 中能夠寫任意表達式,可是一樣的,對 if / else 判斷、循環語句沒法處理。

但在不少時候咱們須要去使用if或者循環。咱們能夠先在外部使用邏輯處理語句,而後生成一個咱們想要的模板,在用``進行轉義

var age=22;
var name='lang' var name2='Lang' var str='' var say=()=>{ return 'hello' } if(age>=18){str=name2} var str=`myname is${str} my age is ${age} and i can say ${say}` console.log(str); //myname isLang my age is 22 and i can say hello 複製代碼

固然,咱們也可使用數組,將各個模板片斷存入數組之中,最後經過Array.join('')將其拼接爲最終的模板。

3.數值擴展方法

(1)二進制和八進制表示法

以前在es5時的嚴格模式中,,咱們已經沒法使用二進制和八進制。在es6中提供了兩個新的二進制和八進制寫法。

二進制(0bxxx||0Bxxx)八進制(0oxxx||0Oxxx)

'use strict' var a=0b11; var b=0o11 console.log(a);//3 console.log(b);//9 複製代碼

(2)Number.isNaN()

isNAN能夠用來檢測數據是不是NAN類型,只有NAN纔會返回true,其他類型皆返回false。

var x=NaN*2
 console.log(Number.isNaN(x));//true console.log(NaN==NaN);//false console.log(NaN===NaN);//false 複製代碼

(3)Number.parseInt(), Number.parseFloat()

這兩個方法在es5中已經存在,es6將其從全局對象中提取放入了Number對象中

(4)Number.isIntger()

var a=3.00
var b=10;
var c=false; var d=4.00000000000000000000000000000002 console.log(Number.isInteger(a));//true console.log(Number.isInteger(b));//true console.log(Number.isInteger(c));//false console.log(Number.isInteger(d));//true 複製代碼

只有整數,以及相似3.0這樣的浮點數纔會被認爲是整數,返回true,除此以外,js運算具備不許確性,超出精度範圍的值,會默認爲o,因此4.0000000000000000000000002會被看作是4. (5)Math.trunc()

取整函數,會對值進行取整,會對傳入的值先進行Number()處理,正數將會進行Math.floor(),若爲負數則進行Math.ceil();

console.log(Math.trunc(4.1));//4
console.log(Math.trunc(4.9));//4
console.log(Math.trunc(-1.2));//-1
console.log(Math.trunc(-1.9));//-1
console.log(Math.trunc(true));//1 console.log(Math.trunc('lang'));//NaN 複製代碼

3.函數擴展

(1)函數指定默認值 能夠爲函數傳入的參數指定默認值,函數內部能夠覆蓋使用。

function say(x,y=5){ console.log(x,y); //1,5 y=10; console.log(x,y); //1,10 } say(1) 複製代碼

須要注意如下兩點

.使用參數默認值時,函數不能有同名參數。

// 不報錯
function foo(x, x, y) { // ... } // 報錯 function foo(x, x, y = 1) { // ... } // SyntaxError: Duplicate parameter name not allowed in this context 複製代碼

.不可以使用let,const重複聲明

function say(x,y=5){ let y=10; console.log(x,y); //SyntaxError: Identifier 'y' has already been declared } say(1) 複製代碼

(2)rest 參數 在函數形參中使用...擴展運算符,能夠將不定形參傳入rest數組中。

function say(...res) { for (var item of res) { console.log(item); } } say(1, 2, 3) //1 //2 //3 複製代碼

(3)箭頭函數(重點)

基本使用方法

var f=(x,y)=>{ return x+y} console.log(f(1,2)); //3 複製代碼

假如(x,y)只有一個參數,咱們能夠省略(),一樣返回語句中,若只有一條語句,也能夠省略。

var f=x=>x+10
 console.log(f(1));  //11
複製代碼

使用注意點 箭頭函數有幾個使用注意點。

(1)函數體內的this對象,就是定義時所在的對象,而不是使用時所在的對象。

(2)不能夠看成構造函數,也就是說,不可使用new命令,不然會拋出一個錯誤。

(3)不可使用arguments對象,該對象在函數體內不存在。若是要用,能夠用 rest 參數代替。

(4)不可使用yield命令,所以箭頭函數不能用做 Generator 函數。

對於須要注意的第一點,咱們常常會由於維護回調函數的this而煩惱,而在箭頭函數中則不存在這個問題,箭頭函數內部的this是固定的,不會由於函數調用而改變。

在ES5,咱們一般採用外部保存this的方法,來維護this、

// ES6
function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5 function foo() { var that= this; setTimeout(function () { console.log('id:', that.id); }, 100); } 複製代碼

argumet在箭頭函數中不存在,那麼使用argument將會使用外部函數的argument

function foo() { setTimeout(() => { console.log('args:', arguments); }, 100); } foo(2, 4, 6, 8) // args: [2, 4, 6, 8] 複製代碼

(4)尾調用

在函數的最後一步調用一個函數,這叫作尾調用。解釋很簡單,但卻很容易混淆。 .最後一步?什麼是最後一步,在函數中,return就是最後一步,沒有return的都不是尾調用。

function g(){} function f(){ g() //這不是尾調用 } f() 複製代碼

.即便return後面還有表達式,但這些函數不起做用,那麼它依舊是尾調用。

function g(){} function f(){ return g() //這是尾調用 console.log('121'); } f() 複製代碼

.返回的必須是函數,不能是表達式。下面額例子中,返回了g()+1; g()+1;不是一個函數,而是一個表達式。

function g(){} function f(){ return g()+1 //這不是尾調用 } f() 複製代碼

(5)尾遞歸

尾遞歸是尾調用的一種特殊狀況,但尾遞歸是在最後一步調用自身。

咱們在使用遞歸時,必須給一個終止條件,否則就會產生死循環

var a=0;
  function f(){ a++ return f() //這顯然是一個死循環 } f() 複製代碼

咱們經常使用遞歸等方法來求階乘等,但遞歸很容易發生棧溢出的狀況。

非尾遞歸的 Fibonacci 數列實現以下。

function Fibonacci (n) { if ( n <= 1 ) {return 1}; return Fibonacci(n - 1) + Fibonacci(n - 2); } Fibonacci(10) // 89 Fibonacci(100) // 堆棧溢出 Fibonacci(500) // 堆棧溢出 複製代碼

尾遞歸優化過的 Fibonacci 數列實現以下。

function Fibonacci2 (n , ac1 = 1 , ac2 = 1) { if( n <= 1 ) {return ac2}; return Fibonacci2 (n - 1, ac2, ac1 + ac2); } Fibonacci2(100) // 573147844013817200000 Fibonacci2(1000) // 7.0330367711422765e+208 Fibonacci2(10000) // Infinity 複製代碼

4.數組擴展

(1)擴展運算符(...)

使用擴展運算符能夠 可以直接深拷貝一個數組。修改一個數組內的引用值,不會改變另外一個值

var arr=[1,2,3,[4,5],6]
 var a=[...arr];
 console.log(a);//[1, 2, 3, Array(2), 6]
複製代碼

擴展運算符能夠用於數組拼接

var arr=[1,2,3]
 var arr2=[4,5,6]
 var str='12121' var a=[1,...arr,2,...arr2]; 複製代碼

另外...arr返回的並非一個數組,而是各個數組的值。只有[...arr]纔是一個數組,因此...arr。能夠用來對方法進行傳值

var arr=[1,2,3]
function f(x,y,z){ return x+y+z } console.log(f(...arr)); //6 複製代碼

(2)Array.from()

Array.from()能夠將某些僞數組轉換成真正的數組結果,什麼是僞數組呢,咱們在實際開發中,有兩種常見的僞數組,arguments和Dom中獲取的元素集合。

<body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</body>
<script> 
 var arr = document.getElementsByTagName('p') var arr2 = Array.from(arr) console.log(Array.isArray(arr2));//true 複製代碼

一樣可以將僞數組轉換數組的還有兩種方法 .以前提到的擴展運算符

var arr = document.getElementsByTagName('p') var arr2 = [...arr] console.log(Array.isArray(arr2));//true 複製代碼

.使用call,apply方法。

var arr = document.getElementsByTagName('p') var newarr=Array.prototype.slice.call(arr,0) var newarr=Array.prototype.slice.apply(arr,[0]) console.log(Array.isArray(newarr));//Var 新數組 = 舊數組.slice(起點下標,終點下標)返回值:數組,是舊數組中的一個部分。 console.log(newarr); 複製代碼

(3)Array.of()

也是用於將一組值,轉換爲數組。 Array.of並非用於將轉換僞數組的,它的做用是爲了彌補Array構造器的不足,以前咱們在想要構建一個長度爲一的數組,且值爲number類型是沒法用Array構建的

var arr=new Array(3)
console.log(arr);//[empty*3]
複製代碼

很顯然,咱們想要構建一個[3],可使用Array.of()

var arr=Array.of(3)
console.log(arr); //[3]
複製代碼

(4)find和findIndex 查詢第一個符合條件值/下標

find:用於找出第一個符合條件的數組元素。找不返回 undefined 。

findIndex:返回第一個符合條件的數組元素的索引。找不到返回-1;

var arr=[1,2,3,4,5]
var newarr1=arr.find(function(item,index){return item>2}) var newarr2=arr.findIndex(function(item,index){return item>2}) console.log(newarr1); //3 console.log(newarr2); //2 複製代碼

基本語法如上:find和findindex內部是一個回調函數,須要返回一個查詢條件,find則會執行這個返回條件,查詢第一個知足條件的值。findindex則會返回下標。 咱們能夠直接用箭頭函數進行簡寫

var arr=[1,2,3,4,5]
var newarr1=arr.find(item=>item>2)
var newarr2=arr.findIndex(item=>item>2)
console.log(newarr1);  //3
console.log(newarr2);  //2
複製代碼

(5)fill 填充初始化數組

做用:給數組填充指定值。fill 方法用於空數組的初始化很是方便。已有數據會被覆蓋。 fill 方法還能夠接受第二個和第三個參數,用於指定填充的起始位置和結束位置

var arr=[1,2,3,4,5]
  arr.fill('*',1,3) console.log(arr);//[1, "*", "*", 4, 5] 複製代碼

5.對象擴展

(1).屬性的簡寫

屬性名是能夠簡寫的,可是有前提條件:屬性的值是一個變量 變量名稱和鍵名是一致的。

var name ='lang' var age=22; var obj={ name:name, age:age } 複製代碼

像這樣的對象,咱們就能夠進行簡寫

var name ='lang' var age=22; var obj={ name, age, } 複製代碼

前提是屬性名和屬性值必須一致。

(2)方法的簡寫

var obj={
say:function(){} } 複製代碼

簡寫爲

var obj={
say(){} } 複製代碼

(3)精細化設置對象的屬性

屬性的四個特徵:

1.configurable: 是否能夠刪除。 默認爲true 能夠刪除:

2.writable: 是否能夠修改。 默認爲ture, 能夠修改:

3.enumerable: 是否能夠枚舉。可使用 for in 默認爲ture, 能夠枚舉:

4.value: 值。 默認值爲undefined

格式1:Object.defineProperty(對象名,「屬性名」,{上面的四個特徵});

var obj={
  name:'lang', age:22 } Object.defineProperty('obj','name',{ configurable:false, writable:false, enumerable:false }) 複製代碼

格式2:Object.defineProperties(對象名,{屬性名{四個特徵}},{屬性名{四個特徵}}});

var obj = {
   name: 'lang', age: 22 } Object.defineProperties(obj, { name: { configurable: false, writable: false, enumerable: false }, age: { configurable: false, writable: false, enumerable: false } }) 複製代碼

(4)獲取精細化設置對象的屬性

Obect.getOwnProertyDescriptor(對象,屬性名) 能夠獲取對象的精細化屬性裏面的值。

var obj={
name:'lang', age:22 } Object.defineProperty(obj,'name',{ configurable:false, writable:false, enumerable:false }) console.log(Object.getOwnPropertyDescriptor(obj,'name')); 複製代碼

 

 

(5)Object.keys()

使用Object.getOwnPropertyNames()和Object.keys()均可以獲得一個對象的屬性名,屬性名是放在一個數組中的。

var obj={
name:'lang', age:22 } console.log(Object.keys(obj)); //["name", "age"] 複製代碼

那麼咱們目前有三種遍歷對象的方法了 對於對象的遍歷目前有三種方式:

1. for in

        2.Object.keys()

        3.Object.getOwnPropertyNames()
複製代碼

for in : 會輸出自身以及原型鏈上可枚舉的屬性。

Object.keys() : 用來獲取對象自身可枚舉的屬性鍵

Object.getOwnPropertyNames() : 用來獲取對象自身的所有屬性名

(6)Object.values();

獲取對象的值,放入數組中。

var obj={
  name:'lang', age:22 } console.log(Object.values(obj)); //["lang", 22] 複製代碼

6.解構賦值

解構賦值語法是一個 Javascript 表達式,這使得能夠將值從數組或屬性從對象提取到不一樣的變量中。

對象字面量和數組字面量提供了一種簡單的定義一個特定的數據組的方法。

let x = [1, 2, 3, 4, 5]; 複製代碼

解構賦值使用了相同的語法,不一樣的是在表達式左邊定義了要從原變量中取出什麼變量。

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
複製代碼

(1)數組的解構

變量聲明並賦值時的解構

var foo = ["one", "two", "three"]; var [one, two, three] = foo; console.log(one); // "one" console.log(two); // "two" console.log(three); // "three" Link to section變量先聲明後賦值時的解構 複製代碼

經過解構分離變量的聲明,能夠爲一個變量賦值。

var a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
Link to section默認值
複製代碼

爲了防止從數組中取出一個值爲undefined的對象,能夠爲這個對象設置默認值。

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
Link to section交換變量
複製代碼

在一個解構表達式中能夠交換兩個變量的值。

沒有解構賦值的狀況下,交換兩個變量須要一個臨時變量(或者用低級語言中的XOR-swap技巧)。

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
Link to section解析一個從函數返回的數組
複製代碼

從一個函數返回一個數組是十分常見的狀況.。解構使得處理返回值爲數組時更加方便。

在下面例子中,[1, 2] 做爲函數的 f() 的輸出值,可使用解構用一句話完成解析。

function f() { return [1, 2]; } var a, b; [a, b] = f(); console.log(a); // 1 console.log(b); // 2 複製代碼

(2)對象的解構

基本賦值

var o = {p: 42, q: true}; var {p, q} = o; console.log(p); // 42 console.log(q); // true 複製代碼

給新的變量名賦值

能夠從一個對象中提取變量並賦值給和對象屬性名不一樣的新的變量名。

var o = {p: 42, q: true}; var {p: foo, q: bar} = o; console.log(foo); // 42 console.log(bar); // true 複製代碼

默認值

變量能夠先賦予默認值。當要提取的對象沒有對應的屬性,變量就被賦予默認值。

var {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5
複製代碼

混合解構(嵌套對象和數組) 解構嵌套對象和數組

var metadata = {
    title: "Scratchpad", translations: [ { locale: "de", localization_tags: [ ], last_edit: "2014-04-14T08:43:37", url: "/de/docs/Tools/Scratchpad", title: "JavaScript-Umgebung" } ], url: "/en-US/docs/Tools/Scratchpad" }; var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; console.log(englishTitle); // "Scratchpad" console.log(localeTitle); // "JavaScript-Umgebung" 複製代碼

7.class類

以前在es5中,咱們如何去實現一個類的功能呢?咱們一般採用構造器的方法去實現,然而,使用構造器去模仿類的實現並不方便,不只須要常常維護this,並且在繼承的時候更是不只須要使用call拷貝父類的基本數值,還須要繼承父類的原型來繼承方法。咱們簡單來看看代碼就知道了

function Parent(name) { this.name = name; } Parent.prototype.sayName = function () { console.log('parent name:', this.name); } function Child(name, parentName) { Parent.call(this, parentName); this.name = name; } function inheritPrototype(Parent, Child) { Child.prototype = Object.create(Parent.prototype); //修改 Child.prototype.constructor = Child; } inheritPrototype(Parent, Child); Child.prototype.sayName = function () { console.log('child name:', this.name); } var parent = new Parent('father'); parent.sayName(); // parent name: father var child = new Child('son', 'father'); child.sayName(); // child name: son 複製代碼

在es6中,咱們能夠直接使用class來定義,若是你有Java基礎的話,那麼理解起來將很是簡單。 基本上,ES6 的class能夠看做只是一個語法糖,它的絕大部分功能,ES5 均可以作到,新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。

//定義類
class Point {
 constructor(x, y) {
   this.x = x;
   this.y = y;
 }

 toString() { return '(' + this.x + ', ' + this.y + ')'; } } 複製代碼

咱們使用typeof去檢測class的數據類型,會發現class類的本質就是一個方法,也就是構造器。咱們不只僅可使用new方法來新建一個類,咱們也可使用prototype來訪問類的原型。

(1)constructor

能夠看到裏面有一個constructor方法,這就是構造方法,而this關鍵字則表明實例對象。這裏面一般保存着類基本數據類型

(2)定義類方法

咱們能夠直接在類中添加本身的方法,前面不須要加上function這個關鍵字,另外,爲了使類更加的符合大衆的寫法,去掉了逗號分隔,咱們不須要在方法之間使用逗號進行分隔。

(3)類的繼承

es6還給類提供了一個extends的繼承方法。使用方法與java一模一樣。

class NBAPlayer2 {
       constructor(name, height) {
           this.name = name;
           this.height = height;
       }
       say() { console.log(`name is${this.name} height is${this.height}`); } } class MVP2 extends NBAPlayer { constructor(name, height, year) { super(name, height) this.year = year } say() { console.log(`name is${this.name} height is${this.height} mvpyear is${this.year}`); } } var n1 = new MVP2('老庫裏', '201', '2016') var m1 = new NBAPlayer2('老庫裏', '201') n1.say() m1.say() 複製代碼

注意:使用 extends 關鍵字來實現繼承在子類中的構造器 constructor 中,必需要顯式調用父類的 super 方法,若是不調用,則 this 不可用

咱們若是使用原型去查看父子類,就會發現,他們實際上是經過原型鏈來進行繼承的。

結尾

ES6的新特性還有不少,本次只概述了一些較爲經常使用的方法。適合初識es6的人對es6進行一個大概的瞭解。

關於es6的更多特性,將會在後續進行補充。具體重要內容還有如下

1.Promise 對象

2.Generator

3.async 函數

4.Module 語法
接下來我還會在個人裙裏用視頻講解的方式給你們拓展下圖中的內容:有興趣的能夠來個人扣扣裙 519293536 免費交流學習,我都會盡力幫你們哦,

本文的文字及圖片來源於網絡加上本身的想法,僅供學習、交流使用,不具備任何商業用途,版權歸原做者全部,若有問題請及時聯繫咱們以做處理