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学习资料给大家，谢谢支持！
