【es6】教程 class类

class类

class关键字，定义类

es6的class可以看作只是一个语法糖

新的class写法只是让对象的写法更加清晰，更像面向对象编程的语法

铺垫小知识：

function.call(thisArg, arg1, arg2, …)

1.thisArg可选的。在 function 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：
如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
2. arg1, arg2, …指定的参数列表

Function.prototype.apply()

在一个对象的上下文中应用另一个对象的方法；参数能够以数组形式传入。

Function.prototype.call()

一个对象的上下文中应用另一个对象的方法；参数能够以列表形式传入

两者区别

call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。

call 可以接收一个参数列表

apply 只接受一个参数数组。

	//es5
			function Phone(one,two){
				this.one=one
				this.two=two
			}
			//es5添加新方法,call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call 来实现继承：		
			Phone.prototype.call=function(){
				console.log('phone方法')
			}
			//实例化对象
			let allphone =new Phone("总把头",5999);
			//改变 this 指向，让新的对象可以执行该函数
			allphone.call()//phone方法
			console.log(allphone)//Phone { one: "总把头"two: 5999}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

constructor 必须用这个名字

	// es6类
			class Phone {
				//构造方法，名字固定，必须是constructor
				//当使用new 加类名的时候，自动执行实例对象上的 constructor方法
				constructor(brand, price) {
					this.barand = brand;
					this.price = price;
				}
				//方法必须使用该语法，不能使用es5的对象形式，方法名不固定
				//类似es5 call：functions(){},在es6里面不支持
				//方法一
				funs(){
					console.log("phone方法")
				}
				//方法二
				call(){
					console.log("phone方法")
				}
			}
			//类已就绪
			let allhnone1= new Phone('1+',1999)
			allhnone1.funs()//phone方法
			console.log(allhnone1)//{barand: '1+', price: 1999}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

class类的静态成员

	//es5
			//这是函数对象
			function Phone(){
				
			}
			//这两个属于函数对象，不属于实例对象，这样的属性成为静态成员
			// Phone.name='手机'
			Phone.change=function(){
				console.log('我可以改变世界')
			}
			//通过函数对象的原型添加
			Phone.prototype.size="666"
			//这是实例对象
			let allnonel =new Phone()
			console.log(allnonel.change,"Phone.name")//undefined,实例对象和函数对象属性是不通的，
			console.log(allnonel.size,"phone.size")//666 实例对象，它和函数对象的原型通```

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

	//es6
			class Phone{
				//静态属性，对于static标注的属性，属于类，而不属于实例对象
				static name='手机'
				static change(){
					console.log('我可以改变世界')
				}
			}
			let allnonel=new Phone()
			console.log(allnonel.name)//undefined，使用实例对象调用不可以
			console.log(Phone.name)//手机，使用类调用静态属性可以
1
2
3
4
5
6
7
8
9
10
11

class类继承和对父类方法的重写

super

1、作为函数时，代表的是父类的构造函数，语法为“constructor(){super();}”；
2、作为对象时，代表的是父类的原型对象。

	class Phone {
				//构造方法
				constructor(c, d) {
					this.c = c;
					this.d = d;
				}
				//父类的成员属性
				//方法一
				funs() {
					console.log("父类方法1")
				}
				//方法二
				call() {
					console.log("父类方法2")
				}
			}
			//继承的固定写法extends 后面是要继承的类
			class allPhone extends Phone{
				//构造方法
				constructor(c, d,a,b) {
					//指向父类的构造方法
					super(c,d);//相当于Phone.call(this,brand,price)
					//子类属性初始化
					this.a=a;
					this.b=b;
				}
				//子类方法
				childerphone(){
					console.log("子类的方法")
				}
				//子类方法
				child(){
					console.log("子类的方法2")
				}
				
				//子类里面不允许直接调用父类方法
				//super(funs());
				
				//如果子类方法与父类方法名一致，则为重写父类的方法
				//funs(){
					//console.log("重写父类类的方法3")
				//}
			}
			//实例化
			const printPhone=new allPhone(1,2,3,4)
			console.log(printPhone)//allPhone {c: 1, d: 2, a: 3, b: 4} ...
			printPhone.funs()//父类方法1
			printPhone.childerphone()//子类的方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

class类中的getter和setter设置

class Phone {
				//get 对实例对象的price属性绑定一个函数，只要读取这个属性，就会执行这个函数
				//返回值就是属性值，当属性值类似于总数等时常被修改的状态就使用get绑定为函数
				get price(){
					console.log("被读取")
					return '值'
				}
				//set必须得有一参数
				set price(e){
					console.log(e,"被修改的值")
					return '值'
				}
			}
		
			//实例化
			const printPhone=new Phone()
			//price无返回值的时候
			console.log(printPhone.price)//被读取 //undefined
			//price有return的时候
			console.log(printPhone.price)//被读取 //值
			printPhone.price="修改"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21