JavaScript ES语法学习笔记（三）

发表于 | 分类于

class类

ES5中没有类，一般通过函数去模拟

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let Animal = function (type) { //定义了一个叫Animal的类
  this.type = type                //声明属性type
}
Animal.prototype.eat = function () {      //声明方法eat
  console.log('i am eat food')
}
let dog = new Animal('dog')     //生成实例
let monkey = new Animal('monkey')
console.log(dog)
console.log(monkey)
//另一种写法
monkey.constructor.prototype.eat = function () {
  console.log('error')
}
dog.eat()
monkey.eat()

ES6写法

1
2
3
4
5
6
7
8
class Animal {
    constructor (type) {
        this.type = type
    }
    eat () {
        console.log('i am eat food')
    }
}

class知识ES5用原型链声明的语法糖–本质是一样的

Setter&Getter–如何读写属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Animal {
  constructor (type，age) {
    this.type = type
    this._age = age
  }
  get age () {       //前面是get或set  age变成属性
    return _age    //名字不能与age一样，不然死循环
  }
  set age (val) {    //set get可以灵活改变属性值 ，set在外界赋值时拦截
    if (val < 7 && val > 4) {
      _age = val
    }
  }
}

Static Methods(如何操作方法？)

ES5

1
2
3
4
5
6
7
8
9
10
11
12
13
let Animal = function (type) {
  this.type = type
}
Animal.prototype.eat = function () {
  Animal.walk()       //不是this.walk()
  console.log('i am eat food hello')
}
Animal.walk = function () {     //静态方法是挂在类上，而不是实例对象
  console.log('i am walking')
}
let dog = new Animal('dog')
dog.eat()
dog.walk()   //walk在实例对象dog上是不存在的，因为挂在Animal类上

ES6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Animal {
  constructor (type) {
    this.type = type
  }
  eat () {
    Animal.walk()
    console.log('i am eat food')
  }
  static walk () {                 //static   只在定义上有区别
    console.log('i am walking')
  }
}
let dog = new Animal('dog')
dog.eat()

总结：类静态方法拿不到当前的实例对象

Sub Classes(如何继承一个类？)

ES5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//定义父类
let Animal = function (type) {
  this.type = type
}
//定义方法
Animal.prototype.eat = function () {
  Animal.walk()
  console.log('i am eat food hello')
}
Animal.walk = function () {
  console.log('i am walking')
}
//定义子类
let Dog = function () {
  // 初始化父类的构造函数-------只继承属性
  Animal.call(this, 'dog')
  this.run = function () {
    console.log('i can run')
  }
}
// 值类型，引用类型
Dog.prototype = Animal.prototype   //继承原型链
let dog = new Dog('dog')
dog.eat()

ES6

1
2
3
4
5
6
7
8
class Dog extends Animal {    //extends表示继承
    constructor (type) {    //增加自己的属性
    super(type)         //super必须放在构造函数第一行
    this.age = 2
    }
}
let dog = new Dog('dog')
dog.eat()

总结：类的声明 属性 方法 继承

Default Parameters(函数参数的默认值)

ES5

1
2
3
4
5
6
7
8
9
function f (x, y, z) {
    if (y === undefined) {
        y = 7
    }
    if (z === undefined) {
        z = 42
    }
    return x + y + z
}

ES6

1
2
3
4
5
6
function f (x, y=7, z=42) {  //有默认值的参数往后写，默认值可以是其他参数的表达式  比如z=x+y
    console.log(Array.from(argument)) //取出传入的参数
    console.log(f.length)   //获取没有默认值的参数的个数
    return x + y + z
}
console.log(f(1,undefined,43))

Rest Parameter（怎么处理不确定参数？）

1
2
3
4
5
6
7
8
9
10
11
12
function sum () {
    let num = 0
    //ES5写法 arguments是伪数组
    Array.prototype.forEach.call(arguments, function (item) { 
    num += item * 1
  })
  //ES6写法 Array.from
   Array.from(arguments).forEach(function (item) {     
   num += item * 1
   })
  return num
}

另一种写法—不使用arguments的方法

1
2
3
4
5
6
7
8
9
function sum (base, ...nums) { //把第一个数放到base中，其余数放到nums中
  // Rest parameter
  let num = 0
  nums.forEach(function (item) {    //nums是数组
    num += item * 1
  })
  return base * 2 + num
}
console.log(sum(1, 2, 3))

Spread Operator（rest参数的逆运算）

1
2
3
4
5
6
7
8
9
function sum (x = 1, y = 2, z = 3) {
  return x + y + z
}
let data = [4, 5, 9]
//计算data求和的一般写法
console.log(sum(data[0], data[1], data[2]))
console.log(sum.apply(this, data))
//rest传参写法
console.log(sum(...data))   //将数组打散传参

Arrow Functions（箭头函数）

ES6中的箭头函数是什么？
()=>{} 箭头后面是表达式，可以省略return
有参数，并且只有一个参数（）可以省略
返回的是表达式{}可以省略 ，若是对象不能省略 

1
2
3
4
5
6
7
8
9
10
function hello () {}
let hello = function () {}
let sum = (x, y, z) => {
  return {
    x: x,
    y: y,
    z: z
  }
}
console.log(sum(1, 2, 4))

总结：默认值 不确定参数 箭头函数

0%