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相当于初始化方法