ES6面向对象

js中的面向对象

1function User(name, age) {
2    this.name = name; // 定义属性
3    this.age = age; 
4}
5
6// 通过原型添加方法
7User.prototype.showName = function() {
8    console.log(this.name);
9};
10
11let user = new User('rose', 20); // 实例化
12user.showName(); // 调用方法

可以看到js的类和构造函数是没什么区别

ES6有了个关键字：Class，来定义类，和java差不多

1class User {
2    constructor(name, age) { // 构造器
3        this.name = name;
4        this.age = age;
5    }
6    // 定义类方法
7    showName() {
8        console.log(this.name);
9    }
10}
11let user = new User('rose', 21);
12user.showName();

这个用了ES6写法的class 和 上面用构造函数定义的类，输出结果都一样。

ES6的class 有了专门的构造器 constructor，构造器和类分开了，定义方法：不需要原型来定义了，直接再类里面定义方法。

ES6定义类的写法

1// 匿名类
2let Example1 = class {
3    constructor(a) {
4        this.a = a;
5        console.log(a);
6    }
7}
8let ex1 = new Example1(1);
9// 命名类
10let Example2 = class Example2 {
11    constructor(a) {
12        this.a = a;
13        console.log(a);
14    }
15}
16let ex2 = new Example2(2);
17
18// 类声明
19class Example {
20    // class主体内容
21    constructor(a, b) {
22        this.a = a;
23        this.b = b;
24    }
25}

注意点：

　　1、不可重复声明

　　2、类定义不会被提升，这意味着，必须在访问前对类进行定义，否则就会报错。类中方法不需要 function 关键字。

　　3、方法间不能加分号。

　　4、class 的实例化必须通过 new 关键字。

面向对象的三大特点：封装、继承、多态。ES6有了class可以封装了方法，也有继承。

js的继承

1function User(name, age) {
2    this.name = name;
3    this.age = age;
4}
5User.prototype.showName = function() {
6    console.log(this.name);
7
8}
9let user = new User('rose', 21);
10//user.showName();
11
12function VipUser(name, age, level) {
13    User.call(this, name, age); // 通过call调用User类
14    
15    this.level = level; // vipUser对象的属性 
16}
17
18VipUser.prototype = new User(); // 通过原型实现继承
19VipUser.prototype.constructor = VipUser;
20
21VipUser.prototype.showLevel = function() {
22    console.log(this.level);
23}
24let vip = new VipUser('rose', 20 , 10);
25vip.showName(); // 使用父类的方法
26vip.showLevel(); // 使用自己的方法

ES6的继承：关键字：extends 继承、super 超级

1class User {
2    constructor(name, age) { // 构造函数
3        this.name = name;
4        this.age = age;
5    }
6    // 定义类方法
7    showName() {
8        console.log(this.name);
9    }
10}
11
12class VipUser extends User {
13    constructor(name, age, level) {
14        super(name, age); // 父类
15        this.level = level; // 自己的属性
16    }
17    
18    showLevel() {
19        console.log(this.level);
20    }
21}
22
23let vip = new VipUser('rose', 22, 2); // 实例化vipUser类
24vip.showName();
25vip.showLevel(); // 调用方法

Class 中的this指向

1class User {
2    constructor(name, age) {
3        //constructor 里面的this
4        this.name = name;
5        this.age = age;
6    }
7    
8    showName() {
9        // 方法里面的this
10        console.log(this.name);
11    }
12}
13
14let user = new User('rose', 10);

1、constructor  构造器里面的this是指向创建的实例对象

1let that;
2class User {
3    constructor(name, age) {
4        //constructor 里面的this
5        this.name = name;
6        this.age = age;
7        that = this;
8        console.log(this);
9    }
10    
11    showName() {
12        // 方法里面的this
13        console.log(this.name);
14    }
15}
16
17// 每次实例化都会调用constructor构造器里面的代码
18let user = new User('rose', 10); // User {name: "rose", age: 10}
19
20console.log(that === user); // 构造器的this和实例的对象对比：true

2、方法里面的this

1let that;
2class User {
3    constructor(name, age) {
4        //constructor 里面的this
5        this.name = name;
6        this.age = age;
7    }
8    
9    showName() {
10        // 方法里面的this
11        console.log(this.name);
12    }
13    
14    showThis() {
15        console.log(this); // 方法里面的this
16        // 一般方法里面的this都是指向 谁 调用这个方法就指向 谁
17        that = this;
18    }
19}
20
21let user = new User('rose', 10);
22user.showThis();
23console.log(that === user); // true
24
25<button id='bottom'>点我</button>
26<script>
27    let that;
28    class User {
29        constructor(name, age) {
30            //constructor 里面的this
31            this.name = name;
32            this.age = age;
33            this.btn = document.getElementById('bottom');
34            this.btn.onclick = this.userAge;
35        }
36        
37        showName() {
38            // 方法里面的this
39            console.log(this.name);
40        }
41        
42        showThis() {
43            console.log(this); // 方法里面的this
44            // 一般方法里面的this都是指向 谁 调用这个方法就指向 谁
45            that = this;
46        }
47            
48        userAge() {
49                // 这个函数里面的this:指向了btn按钮，因为是按钮调用了这个函数，
50                console.log(this.age);
51            }
52    }
53    
54    let user = new User('rose', 10);
55    // 点击页面按钮输出 undefined ，因为按钮对象没有定义age属性
56</script>

要点击按钮输出我实例的User的age

1<button id='bottom'>点我</button>
2<script>
3    let that;
4    class User {
5        constructor(name, age) {
6            //constructor 里面的this
7            this.name = name;
8            this.age = age;
9            this.btn = document.getElementById('bottom');
10            this.btn.onclick = this.userAge;
11            
12            that = this;
13        }
14        
15        showName() {
16            // 方法里面的this
17            console.log(this.name);
18        }
19        
20        showThis() {
21            console.log(this); // 方法里面的this
22            // 一般方法里面的this都是指向 谁 调用这个方法就指向 谁
23        }
24            
25        userAge() {
26                // that 存储了构造器里面的this
27                console.log(that.age);
28            }
29    }
30    
31    let user = new User('rose', 10);
32    // 点击页面按钮输出 10 
33</script>

通过全局变量that，that === 实例化的对象。