es5与es6常用语法教程(6)

js常用语法系列教程如下

• es5与es6常用语法教程(1)
• es5与es6常用语法教程(2)
• es5与es6常用语法教程(3)
• es5与es6常用语法教程(4)
• es5与es6常用语法教程(5)
• es5与es6常用语法教程(6)
• es5与es6常用语法教程(7)

本节教程主要讲解以下几个常用语法

• 使用class创建类
• 迭代器(iterators)
• 生成迭代器(generators)
• 继承(extend)
• 申明静态方法
• __proto__

class类的创建

• 使用class关键词来修饰一个对象
• 定义一个厨师类，在这个类里面我们可以添加一个constructor方法，基于这个类去创建实例对象后会自动执行这个方法
• 我们可以把初始化的东西放到这个方法里面，我们可以把自己的一些属性放到这个方法里面

class Chef {
  // constructor
  constructor(food) {
    this.food = food
  }
  // 添加一个自定义的方法
  cook() {
    console.log(this.food)
  }
}

// 创建一个实例
let wanghao = new Chef('西红柿')
wanghao.cook()

迭代器(iterators)

• 迭代就是轮流交换
• 手动创建迭代器，他是一个函数

function chef(foods) {
  let i = 0
  return {
    next() {
      // 定义一个bool变量，是否结束炒菜
      let done = (i >= foods.length)
      // 待抄的菜名
      let value = !done ? foods[i++] : undefined
      // 每一次执行next()函数会返回一个对象，对象中有两个属性，value表示抄的菜，done表示还有没有可以迭代的东西，没有了done的值就为true,就是完成了迭代
      return Boolean(done) ? '迭代完成' : {
        value : value,
        done : done
      }
    }
  }
}

// 返回一个厨子对象，厨子迭代炒菜。
let xiaoming = chef(['回锅肉', '糖醋里脊'])

// xiaoming这个厨子对象调用next() 函数
console.log(xiaoming.next())
console.log(xiaoming.next())
console.log(xiaoming.next())

生成迭代器(generators)

定义一个不传参数的生成器

• 每一次调用next函数都返回一个对象
• 我们使用yield，每次调用next方法返回的值就是yield的值
• yield的值就是一个包含value和done属性的对象：{value: "小炒肉", done: false}

// 这就是一个简单的生成器
function * chef() {
  yield '小炒肉'
  yield '麻婆豆腐'
  yield '红烧鲤鱼'
}

let wanghao = chef()
console.log (wanghao.next()) // {value: "小炒肉", done: false}
console.log (wanghao.next()) // {value: "麻婆豆腐", done: false}
console.log (wanghao.next()) // {value: "红烧鲤鱼", done: false}

定义一个可以传参数的生成器

function * chef(foods) {
    for(let i = 0; i < foods.length; i++) {
        yield foods[i]
    }
 }

let xiaoming = chef(['小炒肉', '麻婆豆腐', '红烧鲤鱼'])
console.log (xiaoming.next()) // {value: "小炒肉", done: false}
console.log (xiaoming.next()) // {value: "麻婆豆腐", done: false}
console.log (xiaoming.next()) // {value: "红烧鲤鱼", done: false}

使用函数表达式的方式创建一个生成器

let chef = function * (foods) {
    for(let i = 0; i < foods.length; i++) {
        yield foods[i]
    }
 }

let xiaoming = chef(['小炒肉', '麻婆豆腐', '红烧鲤鱼'])
console.log (xiaoming.next()) // {value: "小炒肉", done: false}
console.log (xiaoming.next()) // {value: "麻婆豆腐", done: false}
console.log (xiaoming.next()) // {value: "红烧鲤鱼", done: false}

继承(extend)

• 子类继承自父类，可以享有父类的所有属性和方法

// 创建一个Person 类
class Person {

  // 父类中的构造函数
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  // 父类中的函数
  intro() {
    return `${this.name}, ${this.age}` // xiaoming, 19
  }
}

// 再创建一个类，继承自Person类
class Chef extends Person {

  // 子类中的构造函数
  constructor(name, age) {
    // super函数可以调用父类的super
    super(name, age)
  }
}

// 创建Chef类的实例对象
let xiaoming = new Chef('xiaoming', '19')

// xiaoming.intro() 子类xiaoming调用父类的方法intro
console.log(xiaoming.intro())

申明静态方法

• 在类中添加静态方法，我们可以使用staitc这个关键词
• 静态方法就是不需要实例化类对象，直接使用类名就可以调用的方法

class Chef {
  // 将cook方法改造成静态方法
  static cook(food) {
    console.log(food) // 红烧肉
  }
}

// 使用这个静态方法，使用类的名调用即可
Chef.cook('红烧肉')

福利时间

• 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
• 作者主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
• 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！