Javascript面对对象编程
使用整合
- 通过
class关键字创建类, 类名我们还是习惯性定义首字母大写 - 类里面有个
constructor函数,可以接受传递过来的参数,同时返回实例对象 constructor函数 只要new生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数- 生成实例
new不能省略 - 最后注意语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加
function
class Grand {
constructor(a, b) {
this.a = a;
this.b = b;
}
// (1) 我们类里面所有的函数不需要写function
// (2) 多个函数方法之间不需要添加逗号分隔
add() {
return `add:${this.a + this.b}`;
}
}
class Father extends Grand {
constructor(a, b) {
// 利用super调用父类的构造函数
// super 必须在子类this之前调用
// 否则会报错:my-01.html:28 Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
super(a, b);
this.a = a;
this.b = b;
}
// (1) 我们类里面所有的函数不需要写function
// (2) 多个函数方法之间不需要添加逗号分隔
sub() {
return `sub:${this.a - this.b}`;
}
say() {
return "我是爸爸";
}
}
class Son extends Father {
constructor(a, b) {
// 需要在子类中调用 super(a,b)，才能调用父类的构造函数
super(a, b); //调用了父类中的构造函数
this.a = a;
this.b = b;
}
// (1) 我们类里面所有的函数不需要写function
// (2) 多个函数方法之间不需要添加逗号分隔
mul() {
return `mul:${this.a * this.b}`;
}
say() {
// console.log('我是儿子');
// 使用super调用父类的方法，可以不经过constructor 中的 super(a,b)
// 只需要在子类中调用 super.方法 即可
console.log(super.say() + "的儿子");
// super.say() 就是调用父类中的普通函数 say()
}
}
const son = new Son(1, 2);
console.log(son.add()); //add:3
console.log(son.sub()); //sub:-1
console.log(son.mul()); //mul:2
son.say(); //我是爸爸的儿子
运行结果
this指向问题
<script>
// 1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象
// 2. 类里面的共有的属性和方法一定要加this使用.
var that;
var _that;
class Star {
constructor(uname, age) {
// constructor 里面的this 指向的是 创建的实例对象
that = this;
console.log(this);
this.uname = uname;
this.age = age;
// this.sing();
this.btn = document.querySelector('button');
// this.btn.onclick = this.sing;
// 下面等同于上面的写法
this.btn.addEventListener('click', this.sing);
}
sing() {
// 这个sing方法里面的this 指向的是 btn 这个按钮,因为这个按钮调用了这个函数
console.log(this);
console.log(that.uname); // that里面存储的是constructor里面的this
}
dance() {
// 这个dance里面的this 指向的是实例对象 ldh 因为ldh 调用了这个函数
_that = this;
console.log(this);
console.log(_that);
console.log(that);
console.log('---');
/**
* 无论哪种指向，只要跟当前构造函数有关系的
* (被当前this所赋值，无论在哪儿赋值)，
* 都是指向的是ldh这个实例对象
* 所以在外部也等于new Star的那个变量
*/
const retult = this === _that && this === that && _that === that
console.log(`当前this,that,_that是否相同：` + retult);
}
}
var ldh = new Star('刘德华');
console.log(ldh);
console.log(that === ldh);
ldh.dance();
console.log(_that === ldh);
</script>
运行结果
点击按钮
