目录
面向对象
说明:使用class关键词 声明类,constructor为构造方法,一个类必须有constructor()方法,如果没有显式定义,一个空的constructor()方法会被默认添加,this关键字则代表实例对象,getstr()为普通方法,不要用“function”,getstr()存在 prototype上。
p1.constructor === p1.prototype.constructor // true
<script>
//基础语法 通过class关键字
class Person{
//我们可以定义一些公共的属性
title ='人的信息'
//定义一个静态的变量
static heigeht = 180;
//定义属性 初始化属性 constructor用来定义属性
constructor(name,age){
this.name = name;//this 指向的是当前的实列对象
this.age = age;
}
// 定义方法/函数
say(){
// console.log(this.name+'能说话');
// 函数是有返回值的
return this.name+'能说话';//this指向当前的实列对象
}
}
//1对象都是 new关键词 new出来的
var p2 = new Person('李四',19);
// 2类的方法使用
var p2say = p2.say();
console.log(p2say);
//4类的属性使用 属性是打点调用
console.log(p2.name);
console.log(p2.title);
//5静态变量的使用
console.log(p2.height);//undefined
console.log(Person.heigeht);//180
//总结 static静态成员 不能被实列继承 所以实列大点是获取不到的 需要原型打点获取
//总结 定义的这个 Person对象 我们称为 原型对象
//p2 我们称它为 实列对象 指的就是 具体的实在对象
// 6.继承
//定义子类使用extends关键字 ManPerson 是子类 Person
class ManPeerson extends Person{
//私有属性
#p = 123;
//定义属性
constructor(name,age,sex){
this.name = name;
this.age = age;
//因为name和age属性父类已经有了 这里就不需要像上面两行那样再重新写一遍
//直接把name和age属性写在super里面就行
this.sex = sex;
super(name ,age);
}
//定义自己的方法
say (){
var str = '姓名'+this.name+'年龄:' + this.age + '能说话';
console.log(str);
}
}
</script>
子类的继承
Class 可以通过extends关键字实现继承,让子类继承父类的属性和方法。
ES6 规定,子类必须在constructor()方法中调用super(),否则就会报错。
除了私有属性,父类的所有属性和方法,都会被子类继承,其中包括静态方法。私有属性前面加#;
<script>
// class Father{
// constructor(){
// }
// money(){
// console.log(100);
// }
// }
// class Son extends Father{
// }
// var son = new Son();
// son.money();
// 定义一个父类
class father {
constructor(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex
}
information(){
console.log('姓名:'+this.name+'年龄:'+this.age+'性别'+this.sex);
}
}
//定义一个子类
class son extends father{
constructor(name,age ,sex){
super(name,age,sex)//调用父类中的构造函数
}
}
var son1 = new son("张三",19,'男')
son1.information();
</script>
子类继承父类方法同时扩展自己方法
利用super关键字调用父类的构造函数,
且必须在子类this之前调用
<script>
//父类有加法方法
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
//子类继承父类加法方法,同时,拓展减法方法
class Son extends Father {
constructor(x, y) {
//利用super关键字调用父类的构造函数,
// 且必须在子类this之前调用
super(x,y)
this.x = x;
this.y = y;
}
subtract(){
console.log(this.x - this.y);
}
}
var son = new Son(9,6)
son.subtract();
son.sum();
</script>
使用类的注意事项
//小结: 1.在ES6中类没有变量提升,所以必须先定义一个类,才能通过实例化对象
// 2.类里面的共有的属性和方法一定要加this使用
// 3.类里面的this指向问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击</button>
<script>
var that;
var that1;
var that2;
class person {
constructor(name, age) {
// constructor 里面的this指向的是创建的实例对象
that = this;
this.name = name;
this.age = age;
this.btn = document.querySelector('button')
this.btn.onclick = this.say;//点击之后调用函数say
}
say() {
//这个say方法里面的this指向的是btn这个按钮,因为这个按钮调用了这个函数
that2 = this;
console.log(this);
console.log(that.name);//that里面存储的是constructor里面的this
}
sport() {
//这个sport里面的this 指向的是实例对象myname 因为myname调用了这个函数
that1 = this;
console.log(this);
}
}
var myname = new person('张三', 19);
myname.say();
console.log(that === myname);
myname.sport();
console.log(that1 ===myname );
//小结: 1.在ES6中类没有变量提升,所以必须先定义一个类,才能通过实例化对象
// 2.类里面的共有的属性和方法一定要加this使用
// 3.类里面的this指向问题
//
</script>
</body>
</html>
super关键字调用父类普通函数
// 小结:1.继承中,如果实例化子类输出一个方法,先看子类中有没有这个方法,如果有就执行子类的方法。
// 2.继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有就执行父类这个方法
// 3.继承中的属性或者方法查找原则-----就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//super 关键字调用父类普通函数
// 1.定义一个父类
class Father{
say(){
return '我是父亲'
}
}
//2.定义一个子类
// class son{
// say(){
// console.log('我是儿子')
// }
// }
// var son1 = new son();
// son1.say();
//3.定义一个继承的子类son2
class son2 extends Father{
say(){
console.log('我是儿子1');
console.log(super.say()+'的儿子');//实例化的是儿子的say,通过super关键字调用了父类中的普通函数say
// super.say() 就是调用父类中的普通函数 say()
}
}
var son1 = new son2();
son1.say();
// 小结:1.继承中,如果实例化子类输出一个方法,先看子类中有没有这个方法,如果有就执行子类的方法。
// 2.继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有就执行父类这个方法
// 3.继承中的属性或者方法查找原则-----就近原则
</script>
</body>
</html>