ES6基本語法和一些面向對象的知識

 

聲明變量

var

使用var聲明變量會將變量的聲明提到全局，在局部做用域聲明的在全局也能打印

{
   var a = 12;
}
// 變量提高 var會將變量的聲明提到全局
console.log(a);

let

使用let聲明表名咱們的塊級做用域，在局部做用域聲明的在全局打印會報錯

{
    let a = 12;
}
  // 使用let聲明表名咱們的塊級做用域
  console.log(a);

const

const聲明的變量 只聲明常量 一旦聲明不可改變，修改後會報錯

const b = 13;
b = 14;
console.log(b);

模板字符串``

模板字符串``，若是你想插入變量${變量名}

var name = "yuan", age = 18;
// var str = name + "," + age + "歲了";
var str = `${name},${age}歲了`;
console.log(str);
var url = "http://www.luffycity.com";
$("ul>li").append(
    `<a href="${url}"></a>`
);

箭頭函數

正常狀況下咱們定義函數

function add(x,y) {
    console.log(x+y)
}
add(2,3);
  var add2 = function () {
  }

使用箭頭函數

var add2 = (a,b)=>{
    console.log(a-b)
};
add2(9,2);

字面量方式聲明對象

var person = {
    name: "日天",
    age:18,
    fav: ()=> {
        //  使用箭頭函數會改變this的指向，指向了父級元素
        console.log(this)
    }
};
person.fav();  // Window

這裏能夠看到因爲使用了箭頭函數，這裏的this不是指person，而是指向了父級元素，也就是window

對象的單體模式

var person2 = {
    name: "ritian",
    // fav:function () {
    // }
    fav(){
        console.log(this)
    }
};
person2.fav();  // Object {name: "ritian", fav: function}

這裏沒有使用箭頭函數，而是使用了對象的單體模式，這裏的this就是對象自己

ES5面向對象相關

對象的三大特性 封裝 繼承 多態
函數的做用: 封裝一塊代碼，複用，做用域 解決代碼的重用性
繼承的做用: 特色: 子類繼承父類，擁有父類的全部屬性和方法，還能夠有本身的屬性和方法
多態: 代碼可重用性 解耦合

es5的構造對象的方式 使用構造函數來建立對象
構造函數惟一的不一樣 函數名首字母大寫

function Animal(name,age) {
    // 點語法 set方法和get方法
    this.name = name;
    this.age = age;
  //  this.fav = function () {
  //   }
}
Animal.prototype.showName = function () {
    console.log(this.name)
};
var a = new Animal("yuan", 18);
console.log(a.age);
a.showName();

使用prototype的方法給構造函數的父類增長方法(構造函數自己也能夠調用)

ES6的面向對象

class Animal{
    constructor(name="yuan",age=13){
        this.name = name;
        this.age = age;
    }
    showName(){
        console.log(this.age)
    }
}
var a = new Animal();
a.showName()

constructor至關於初始化方法