ES6面向对象
js中的面向对象
function User(name, age) {
this.name = name; // 定义属性
this.age = age;
}
// 通过原型添加方法
User.prototype.showName = function() {
console.log(this.name);
};
let user = new User('rose', 20); // 实例化
user.showName(); // 调用方法
可以看到js的类和构造函数是没什么区别
ES6有了个关键字：Class，来定义类，和java差不多
class User {
constructor(name, age) { // 构造器
this.name = name;
this.age = age;
}
// 定义类方法
showName() {
console.log(this.name);
}
}
let user = new User('rose', 21);
user.showName();
这个用了ES6写法的class 和 上面用构造函数定义的类，输出结果都一样。
ES6的class 有了专门的构造器 constructor，构造器和类分开了，定义方法：不需要原型来定义了，直接再类里面定义方法。
ES6定义类的写法
// 匿名类
let Example1 = class {
constructor(a) {
this.a = a;
console.log(a);
}
}
let ex1 = new Example1(1);
// 命名类
let Example2 = class Example2 {
constructor(a) {
this.a = a;
console.log(a);
}
}
let ex2 = new Example2(2);
// 类声明
class Example {
// class主体内容
constructor(a, b) {
this.a = a;
this.b = b;
}
}
注意点：
1、不可重复声明
2、类定义不会被提升，这意味着，必须在访问前对类进行定义，否则就会报错。类中方法不需要 function 关键字。
3、方法间不能加分号。
4、class 的实例化必须通过 new 关键字。
面向对象的三大特点：封装、继承、多态。ES6有了class可以封装了方法，也有继承。
js的继承
function User(name, age) {
this.name = name;
this.age = age;
}
User.prototype.showName = function() {
console.log(this.name);
}
let user = new User('rose', 21);
//user.showName();
function VipUser(name, age, level) {
User.call(this, name, age); // 通过call调用User类
this.level = level; // vipUser对象的属性
}
VipUser.prototype = new User(); // 通过原型实现继承
VipUser.prototype.constructor = VipUser;
VipUser.prototype.showLevel = function() {
console.log(this.level);
}
let vip = new VipUser('rose', 20 , 10);
vip.showName(); // 使用父类的方法
vip.showLevel(); // 使用自己的方法
ES6的继承：关键字：extends 继承、super 超级
class User {
constructor(name, age) { // 构造函数
this.name = name;
this.age = age;
}
// 定义类方法
showName() {
console.log(this.name);
}
}
class VipUser extends User {
constructor(name, age, level) {
super(name, age); // 父类
this.level = level; // 自己的属性
}
showLevel() {
console.log(this.level);
}
}
let vip = new VipUser('rose', 22, 2); // 实例化vipUser类
vip.showName();
vip.showLevel(); // 调用方法
Class 中的this指向
class User {
constructor(name, age) {
//constructor 里面的this
this.name = name;
this.age = age;
}
showName() {
// 方法里面的this
console.log(this.name);
}
}
let user = new User('rose', 10);
1、constructor 构造器里面的this是指向创建的实例对象
let that;
class User {
constructor(name, age) {
//constructor 里面的this
this.name = name;
this.age = age;
that = this;
console.log(this);
}
showName() {
// 方法里面的this
console.log(this.name);
}
}
// 每次实例化都会调用constructor构造器里面的代码
let user = new User('rose', 10); // User {name: "rose", age: 10}
console.log(that === user); // 构造器的this和实例的对象对比：true
2、方法里面的this
let that;
class User {
constructor(name, age) {
//constructor 里面的this
this.name = name;
this.age = age;
}
showName() {
// 方法里面的this
console.log(this.name);
}
showThis() {
console.log(this); // 方法里面的this
// 一般方法里面的this都是指向 谁 调用这个方法就指向 谁
that = this;
}
}
let user = new User('rose', 10);
user.showThis();
console.log(that === user); // true
<button id='bottom'>点我</button>
<script>
let that;
class User {
constructor(name, age) {
//constructor 里面的this
this.name = name;
this.age = age;
this.btn = document.getElementById('bottom');
this.btn.onclick = this.userAge;
}
showName() {
// 方法里面的this
console.log(this.name);
}
showThis() {
console.log(this); // 方法里面的this
// 一般方法里面的this都是指向 谁 调用这个方法就指向 谁
that = this;
}
userAge() {
// 这个函数里面的this:指向了btn按钮，因为是按钮调用了这个函数，
console.log(this.age);
}
}
let user = new User('rose', 10);
// 点击页面按钮输出 undefined ，因为按钮对象没有定义age属性
</script>
要点击按钮输出我实例的User的age
<button id='bottom'>点我</button>
<script>
let that;
class User {
constructor(name, age) {
//constructor 里面的this
this.name = name;
this.age = age;
this.btn = document.getElementById('bottom');
this.btn.onclick = this.userAge;
that = this;
}
showName() {
// 方法里面的this
console.log(this.name);
}
showThis() {
console.log(this); // 方法里面的this
// 一般方法里面的this都是指向 谁 调用这个方法就指向 谁
}
userAge() {
// that 存储了构造器里面的this
console.log(that.age);
}
}
let user = new User('rose', 10);
// 点击页面按钮输出 10
</script>
通过全局变量that，that === 实例化的对象。
