js高级第一天

1.01 创建类

---

(1) 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写

(2) 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象

(3) constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数

(4) 生成实例 new 不能省略

(5) 最后注意语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

(6) 我们类里面所有的函数不需要写function

(7) 多个函数方法之间不需要添加逗号分隔

  // 1. 创建类 class  创建一个 明星类
        class Star {
            constructor(uname, age) {
                this.uname=uname;
                this.age=age;
            }
        }
​
        // 2. 利用类创建对象 new
        varldh=newStar('刘德华', 18);
        varzxy=newStar('张学友', 20);
        console.log(ldh);
        console.log(zxy);

1-01 继承和super关键字

---

继承中的属性或者方法查找原则: 就近原则

1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的

2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)

// super 关键字调用父类普通函数
        class Father {
            say() {
                return'我是爸爸';
            }
        }
        classSonextendsFather {
            say() {
                // console.log('我是儿子');
                console.log(super.say() +'的儿子');
                // super.say() 就是调用父类中的普通函数 say()
            }
        }
        varson=newSon();
        son.say();

1-03 子类继承父类方法的同时扩展自己的方法

---

super 必须在子类this指向之前

class Father1{
    constructor(x,y) {
        this.x=x
        this.y=y
    }
    sum(){
        console.log(this.x+this.y)
    }
}
classSon1extendsFather1{
    constructor(x,y) {
    //    利用super调用父类的构造函数
    //    super必须在子类this之前调用
        super(x,y)
        this.x=x
        this.y=y
    }
    substract(){
        console.log(this.y-this.x)
    }
}
varson1=newSon1(5,8)
son1.substract()
son1.sum()

1-04 使用类的注意事项

---

1.在es6中类没有变量声明，所以必须先定义类，才能通过类实例化对象

2.类里面的共有属性和方法一定要加this指向

class Star {
    constructor(uname) {
        this.uname=uname
        this.btn=document.querySelector('button')
        this.btn.onclick=this.money
    }
    money() {
        console.log(100)
    }
}
​
varldh=newStar('刘德华')

1-05 this指向

---

类里面的this指向问题：

constructor 里面的this指向实例对象，方法里的this指向这个方法的调用者，遇到this指向不清，可用that=this等

<!--    类中添加共有方法-->
class Star {
    constructor(uname) {
        this.uname = uname
        this.btn = document.querySelector('button')
        this.btn.onclick = this.money
        console.log(this, "constructor")  //
    }

    sing(song) {
        console.log(this.uname + song)
        console.log(this, "sing")
    }

    money() {
        console.log(100)
        console.log(this, "btnMoney")
    }
}

var ldh = new Star('刘德华')
ldh.sing("过于")

//继承
class Starchild extends Star {
    constructor(uname) {
        super();
        this.uname = "zi"
    }
}

//        子类实例化
var son = new Starchild();