基本写法
// class point { //这里不带小括号
// constructor(){ //相当于构造函数
// this.name = "张三"; //this指向new的实例化对象
// this.age = "18";
// }
// eat(){
// console.log("今天天气很好");
// }
// }
// var t = new point();
// console.log(t.name);
// t.eat();
形参实参
class point { //这里不带小括号
// constructor(name){ //形参
// this.name = name; //把name写活
// this.age = "18";
// }
// eat(){
// console.log(`我叫${this.name}`); //模板字符串
// }
// }
// var t = new point("张三"); //实参
// console.log(t.name);
严格模式:
1.在
《对变量的影响》
- 变量必须要先声明再使用
- 不可以使用任意保留字/关键字作为变量名
- 严格模式不再允许用户删除变量 ( delete )
注意点:
1.在ES6中,默认的就是严格模式,所以不需要使用 “use strict” 来指定运行模式
2. 不存在变量提升
class的继承
// super : 关键字
{
//父类
class Person{
constructor(name){
this.name = name;
this.hobby = "游泳";
}
talk(){
console.log("我是一个兵,来自老百姓");
}
}
let person = new Person("父亲");
console.log(person.name);
person.talk();
//子类
class Student extends Person{
constructor(name,age){
super(name);
this.age = age;
}
talk(){
console.log("成果");
}
say(){
console.log(`我的名字叫${this.name},爱好是${this.hobby}`);
}
}
let student = new Student("孩子",18);
student.say();
student.talk();
}
上述代码中:
- 子类通过 extends 关键字来继承父类的所有属性和方法
- 子类必须在constructor中调用super方法,否则新建实例会报错;
ES5的继承中,实质是先创造子类的实例对象this,然后再将父类的方法/属性添加到this上面。
ES6的继承中,实质是先创造父类的实例对象this, 然后再将子类的方法/属性添加上
必须先通过父类的构造函数完成塑造(this对象–实例对象),然后再对其加工,加上子类自身的属性和方法。
如果不调用super方法,子类就得不到this对象
静 态 方 法
方法前:
- 有 static关键字,表明该方法是一个静态方法
- 需要通过类名来调用, 而不是在实例(this)上调用
- 如果使用this调用,或者在该方法中使用this。 均会出现异常
- 静态方法可以和非静态方法重名 (不推荐这样)
- 父类的静态方法,可以被子类继承
static sum(){
// return this.num_a > this.num_b ? this.num_a : this.num_b;
return "hello";
}
newStr(){
// return `我是很大的那个${this.sum()}`
console.log(`我是很大的那个${Person.sum()}和${this.num}`);
}
Event事件池
事件池,记录所有的相关事件及处理函数
class Event{
events = {};
// constructor(){
// this.events = {};
// }
事件存放的形式
events = {
"click" : [f1,f2,f3....],
"mousemove": [f1,f2,f3....]
}
*/
//添加事件的功能
on(eventName,fn){
if(!this.events[eventName]){
this.events[eventName] = [];
}
this.events[eventName].push(fn);
}
//删除事件的功能
off(eventName,fn){
if(!this.events[eventName]){
//如果没有添加过该事件,直接跳出不处理了
return;
}
this.events[eventName] = this.events[eventName].filter(item=>item!=fn);
}
// dispatch: 负责把触发到的事件给执行了
dispatch(eventName){
if(!this.events[eventName]){
//如果没有添加过该事件,直接跳出不处理了
return;
}
this.events[eventName].forEach(item => {
console.log("我是item"+ item);
console.log("我是this"+ this);
item.call(this);
});
}
}
let event = new Event;
模块化
模块化: 模块化是运行在服务器上的内容。(本机,编辑器)
默认是严格模式
优点: 按需加载
import: 导入指定文件中的 指定内容 (路径可以是 相对路径,绝对路径,网络路径)
导入时,依然可以使用as进行重命名。
导入时 指定的内容 如果是 * 号,则表示引入指定路径下的所有内容
import Person,{name,age,Ps} from “./js/模块化的基本使用.js”
let person = new Person;
console.log(person.name);