类
ES5中的类及继承
//人
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.eat = function () {
console.log(this.name + "eat");
}
//程序员，继承，人
function Programmer(name,age,language){
//构造函数继承
Person.call(this,name,age);
//新属性
this.language = language;
}
//继承，人，原型
Programmer.prototype.__proto__ = Person.prototype;
//设置原型上的新方法
Programmer.prototype.code = function () {
console.log(this.name + "code");
}ES6中的类及继承
class Person {
//属性设置在构造函数中
constructor(name, age) {
this.name = name;
this.age = age;
}
//设置原型上的方法
//大括号中的就是原型
eat() {
console.log(this.name + "eat");
}
}
//声明Programmer类，继承Person类
//通过关键字继承父类
class Programmer extends Person {
//extends关键字继承原型方法
//构造函数
//如果子类和父类的属性一样，则子类可以不写构造函数，在实例化时继承父类的构造函数
//如果有新属性则必须写构造函数
constructor(name, age, language) {
//通过super关键字继承父类的构造函数
super(name, age);
//设置新属性
this.language = language;
//如果子类写了构造函数，就必须通过super继承父类的构造函数
//而且必须在设置新属性之前吸纳继承父类的构造函数
}
//原型通过extends自动继承
//设置子类的新方法
code() {
console.log(this.name + "code");
}
}
//实例化
let p = new Programmer("张三", 20, "java");
p.eat();
p.code();Promise
同步与异步
同一个文件中的JS是一个同步的过程
console.log(1);
console.log(2);第二行的代码要等第一行的代码结束再执行
function load(){
//创建script标签，把1.js加载到页面中
let script = document.createElement('script');
script.src = '1.js';
//插入到head标签中
document.head.appendChild(script);
}从其他文件中引入的js代码与单签文件中的js代码是异步关系
异步关系的代码，执行过程中就是“竞速”
JS中有很多异步关系的代码
比如获取数据就是异步过程，页面上的其他内容，不会等待获取数据之后再创建
但是，有的内容就需要获取到数据后，才能展示，如何解决？
需求：在异步“竞速”的过程中，把代码捋顺出来——Promise
function load(){
return new Promise((resolve,reject)=>{
let script = document.createElement('script');
script.src = '1.js';
document.head.appendChild(script);
script.onload = function (){
resolve("成功")
}
script.onerror = function (){
reject("失败")
}
})
}
load().then(()=>{
console.log(2);
},()=>{
console.log("有错误");
})捋顺序的核心，时Promiase的回调函数和then里面的方法
then里面的方法，会在回调函数执行完毕之后再执行
在回调函数中，需要人为规定“成功”和“失败”两个状态
当处于成功状态时，就执行resolve方法；当处于失败时，就执行reject方法
如果回调函数最终执行了resolve方法，后续就会执行then中的第一个方法；如果回调函数最终执行了reject方法，后续就会执行then中的第二个方法
resolve和reject两个方法的参数，会传递给then的参数
function load(src){
return new Promise((resolve,reject)=>{
let script = document.createElement('script');
script.src = src;
document.head.appendChild(script);
script.onload = function (){
resolve("成功")
}
script.onerror = function (){
reject("失败")
}
})
}
//按照顺序依次引入a-d.js，最后打印加载完毕
load('a.js').then(()=>{
load('b.js')
//load方法返回Pomise对象
//但是没有把这个对象返回
//所以这个函数没有返回值
//then方法会提供一个空对象作为返回值
},()=>{
console.log('有错误')
}).then(()=>{
load('c.js')
//load方法返回Pomise对象
},()=>{
console.log('有错误')
}).then(()=>{
load('d.js')
//load方法返回Pomise对象
}).then(()=>{
console.log('加载完毕')
},()=>{
console.log('有错误')
})以上代码中，真正有顺序的只是加载a.js在最前面，加载b.js一定在a.js之后
其余c-d的加载和打印加载完毕，没有书序，还是处于异步“竞速”状态
Promise对象只是以确保，当前对象的回调函数与当前then里面的方法的执行顺序
then方法的返回值
如果执行方法有返回值，则就会把放回的返回值设置成then方法的返回值
此例中，then里面执行第一个函数
此时第一个函数没有返回值
不管执行then里面的哪一个方法如果没有返回值，则then方法会自动提供一个空Promise对象作为返回值
只有Promise对象的回调函数和该对象调用的then方法中的函数才有先后关系
正确写法：
//按照顺序依次引入a-d.js，最后打印加载完毕
load('a.js').then(()=>{
return load('b.js')
//load方法返回Pomise对象
//但是没有把这个对象返回
//所以这个函数没有返回值
//then方法会提供一个空对象作为返回值
},()=>{
console.log('有错误')
}).then(()=>{
return load('c.js')
//load方法返回Pomise对象
},()=>{
console.log('有错误')
}).then(()=>{
return load('d.js')
//load方法返回Pomise对象
}).then(()=>{
console.log('加载完毕')
},()=>{
console.log('有错误')
})