1. 类ES5 （具有相同属性和方法的集合）
一、定义
通过function关键字定义 类名首字母大写
属性写在构造函数里 方法写在原型下
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sleep = function() {
console.log(this.name + ' is sleeping ....');
}
let p1 = new Person('xm', 20) <---------实例化对象
二、继承
1.子类的构造函数中 通过父类.call() 继承父类的属性
2.子类的prototype = 父类的实例化对象 来继承父类的方法
3.子类的constructor指向子类
function Student(name, age, grade) {
// this
Person.call(this,name, age)
// Person(name, age)
this.grade = grade
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
Student.prototype.eat = function() {
console.log(this.name + ' is eating....');
}
let s1 = new Student('ls', 21, '18') <---------实例化对象
2. 类ES6
一、定义
通过class定义类
构造函数里定义属性和方法
static 关键字定义的方法是静态方法 只能通过 类名.方法 来调用 实例化对象不能直接调用
class Person {
constructor(name, age) {// 定义属性
this.name = name;
this.age = age;
}
eat() {// 定义方法
console.log(this.name + ' is eating....')
}
sleep() {
console.log(this.name + ' is sleeping...')
}
static fun() {
console.log(123);
}
}
let p1 = new Person('zs', 18);
Person.fun(); <-----static定义的方法只能通过 “类名.方法” 来调用 实例化对象不能直接调用
二、继承
es6 里 通过 extends 来实现的继承
通过super()来继承父类的构造函数
...params代表全部参数
class Student extends Person {
constructor(name，age，grade) {
super(name，age，grade) // 继承父类的构造函数
this.grade = grade
}
code() {
console.log(this.name + ' is coding...')
}
}
class Student extends Person {
constructor(...params) { //可通过...params接收参数
super(...params) // 继承父类的构造函数
this.grade = params[2]
}
code() {
console.log(this.name + ' is coding...')
}
}
let s1 = new Student('xm', 21, '10');
3. generator 函数（异步编程的解决方案）
在function 和 函数名 之间加一个 *
yield 执行之后暂停
方法返回的是一个指针对象 需要调用next()执行
function * fun1 (){
console.log('hello');
yield '你好';
console.log('world');
}
let fn1 = fun1();
fn1.next(); <---------执行函数到yield执行完结束
console.log(fn1.next()); // {value: undefined, done: false}
// value表示yield表达式的返回值
// done表示 当前函数是否执行完
fn1.next(); <---------从yield下面的内容开始继续执行
function * fun1 (){
console.log('hello');
yield request1();
console.log('world');
}
let fn1 = fun1();
function request1() {
setTimeout(() => {
console.log('请求成功')
fn1.next();<---------在内部调用next方法，等待定时器时间结束执行完成之后再继续执行
}, 1000)
return 'requset函数' <---------yield表达式的返回值 (fn1.next()中的value)
}
传参
function * fun1 (){
console.log('hello');
let res = yield request1(); // res 的值是next方法调用的时候传递的参数
console.log(res);
console.log('world');
}
let fn1 = fun1();
function request1() {
setTimeout(() => {
let obj = {
name: 'zs',
age: 18
}
console.log('请求成功')
fn1.next(obj);<---------obj是request1函数返回的参数
}, 1000)
}
模拟发送请求过程 并在request2中接收request1中返回的参数
function * fun() {
console.log('准备发送请求1')
let res = yield request1(); <---------接收request1返回的参数
console.log('准备发送请求2');
yield request2(res); <---------将request1返回的参数传给request2
console.log('结束')
}
let fn = fun();
console.log(fn.next())
function request1() {
setTimeout(() => {
let str = 'hello world!'; <---------request1返回的参数
console.log('请求1成功')
console.log(fn.next(str)); <---------传参
}, 1000)
}
function request2(res) {
console.log('res:',res) <---------成功接收并能打印出参数内容
setTimeout(() => {
console.log('请求2成功')
console.log(fn.next());
}, 1000)
}
4. async（异步编程的解决方案）
遇到await等待，当前异步操作完成后就往下继续执行
返回的总是promise对象，可以用then方法进行下一步操作
Async取代Generator函数中的*号，await取代Generator中的yield
async function fun() {
console.log('准备发送请求1');
await request();
console.log('准备发送请求2')
await request2();
console.log('结束');
}
function request() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('请求1成功');
resolve();
}, 1500)
})
}
function request2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('请求2成功');
resolve();
}, 800)
})
}
fun();
5. Proxy
get获取值
set改变值（一定要有return否则值不会改变）
let obj = {
name: 'zs',
age: 18
}
let p1 = new Proxy(obj,{
get(target, key , property) {
console.log( target, key , property) //obj对象 获取的值 property函数
return target[key];
},
set(target, key ,value) {
console.log( target, key ,value) //obj对象 改变的属性 改变后的值
return target[key] = value
}
})
p1.name = 'ls' <---------修改name属性的值
console.log(p1.name) <---------获取name的值
