class类

基本写法

 //    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.在

《对变量的影响》

  1. 变量必须要先声明再使用
  2. 不可以使用任意保留字/关键字作为变量名
  3. 严格模式不再允许用户删除变量 ( 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();
}

上述代码中:

  1. 子类通过 extends 关键字来继承父类的所有属性和方法
  2. 子类必须在constructor中调用super方法,否则新建实例会报错;

ES5的继承中,实质是先创造子类的实例对象this,然后再将父类的方法/属性添加到this上面。
ES6的继承中,实质是先创造父类的实例对象this, 然后再将子类的方法/属性添加上
必须先通过父类的构造函数完成塑造(this对象–实例对象),然后再对其加工,加上子类自身的属性和方法。
如果不调用super方法,子类就得不到this对象

静 态 方 法

方法前:

  1. 有 static关键字,表明该方法是一个静态方法
  2. 需要通过类名来调用, 而不是在实例(this)上调用
  3. 如果使用this调用,或者在该方法中使用this。 均会出现异常
  4. 静态方法可以和非静态方法重名 (不推荐这样)
  5. 父类的静态方法,可以被子类继承
 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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值