【复习】javascript 类

类的本质 

类（class）的本质是function

类的所有方法都定义在类的prototype属性上

类创建的实例，里面的原型（__proto__）也指向类的原型对象（prototype）

ES6的类的绝大部分功能，ES5也能做到，新的class写法只是让对象原型的的写法更加的清晰，更像面向对象编程的语法

ES6的类其实就是语法糖（便捷写法）

 创建类 

class Star {
			//构造器
			constructor (uname, age, sex) {
				// uname姓名，age年龄，sex性别
				// 对象.属性 = '值';
				// 构造函数再new的时候，就会执行
				this.uname = uname;
				this.age = age;
				this.sex = sex;
				// 构造函数中的this指向当前对象
				console.log(this);
			}
           //给类添加方法
           tiao () {
				console.log('跳舞');
			}
		}

		// 对类实例化，就可以得到一个具体的对象
		var ldh = new Star('刘德华', 16, '男');
		console.log( ldh );
		// console.log( ldh );
		// console.log( ldh.uname );
		// console.log( ldh.age );
           //调用方法
           ldh.tiao(); 

		var zxx = new Star('周星驰', 19, '男');
		console.log(zxx);

 

 类的继承

 子类通过extends关键字来继承父类，super用来调用父类构造函数和普通函数

class Father {
			constructor (uname, age) {
				this.uname = uname;
				this.age = age;
			}
			qian () {
				console.log('赚他一个亿');
			}
		}


		// 类的继承
		class Son extends Father  {
			// 如果儿子需要有自己的属性（分数）
			constructor (uname, age, score) {
				// this.uname = uname;
				// this.age = age;
				// super用来调用父类的构造函数和普通函数
				super(uname, age);
				this.score = score;
			}

			qian () {
				// 普通函数，方法
				super.qian();
				console.log('两毛钱');
			}
		}

		// 实例化对象
		var obj = new Son('儿子', 6, 99);
		console.log( obj );
		obj.qian();

 

  this指向

  constructor(构造器)中的this指向当前实例对象

  方法中的this,指向的是调用者，即谁调用，指向谁

class Btn {
			constructor (id) {
				// this.uname = uname;
				this.btn = document.querySelector(id);
				// 点击调用say方法
				// 注意：因为这个方法点击之后才要调用，所以添加的时候不要带括号
				this.btn.onclick = this.say;
			}

			// 方法中的this：指向的是调用者
			say () {
				console.log(this);
			}
		}

		var o = new Btn('#d1');
		console.log( o );
		// 实例对象调用say方法:里面的this指向的是实例对象
		// 如果是按钮点击调用say方法：里面的this指向的是按钮
		o.say();

		// class Star {
		// 	// 构造函数中的this：this指向当前实例对象
		// 	constructor (uname, age) {
		// 		this.uname = uname;
		// 		this.age = age;
		// 		console.log(this);
		// 	}
		// 	// // 方法中的this
		// 	// say () {
		// 	// 	console.log(this);
		// 	// }
		// }

		// // 构造函数中的this
		// var obj = new Star('带土', 22);
		// console.log(obj);

		// var you = new Star('鼬', 19);
		// console.log(you);