1. 对象
再JavaScript中，对象是一组无序相关属性和方法的集合，所有事物都是对象，例如，字符串、数值、数组、函数等。
对象是由属性和方法组成的：
- 属性：事物的特征，在对象中用属性来表示（常用名词）
- 方法：事物的行为，在对象中用方法来表示（常用动词）
2. 类
在ES6中新增了类的概念，可以使用class关键字声明一个类，之后这个类来实例化对象。
- 类抽象了对象的公共部分，它泛指某一大类
- 对象特指某一个，通过类实例化一个具体的对象。
3. 面向对象的思维特点：
- 抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）
- 对类进行实例化，获取类的对象
4. 创建类和对象
<script>
//1. 创建类 class
class Star {
constructor(uname, age) {
this.uname = unanme;
this.age = age;
}
}
//2. 利用类创建对象 new
var ldh = new Star('liudehua', 20);
</script>注意：
- 通过class 关键字创建类，类名习惯性定义首字母大写
- 类里面有个constructor函数，可以接受传递过来的参数，同时返回实例对象
- constructor 函数 只要 new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数
- 生成实例 new 不能省略
- 最后注意语法规范 创建类，类名后面不要加小括号，生成实例 类名后面加小括号，构造函数不需要加function
5. 类中添加方法
<script>
//1. 创建类 class
class Star {
constructor(uname, age) {
this.uname = unanme;
this.age = age;
}
//类中添加方法
sing(song) {
console.log(this.uname + song);
}
}
//2. 利用类创建对象 new
var ldh = new Star('liudehua', 20);
ldh.sing("冰雨");
</script>注意：
- 类里面的所有函数不需要写 function
- 多个函数方法之间不需要添加逗号分隔
7. 类的继承
- 关键字 extends,可以使子类继承父类的属性和方法
class Father {
constructor() {
}
mony() {
console.log(1000);
}
}
class Son extends Father {
}
var son = new Son();
son.mony();- 关键字 super，调用父类中的函数（可以是普通函数也可以是构造函数）。父类里函数使用的参数必须是父类constructor里的参数，在子类constructor使用super关键字，将子类constructor参数传递给父类，子类继承使用父类里面的方法就不会存在数据问题了。
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
class Son extends Father {
constructor(x, y) {
super(x, y); //调用了父类中的构造函数
}
}
var son = new Son(1, 2);
son.sum();8. surper关键字
- surper 关键字调用父类普通函数
class Father {
say() {
return '我是爸爸'
}
}
class Son extends Father {
say() {
// console.log('我是儿子');
console.log(super.say() + '的儿子');
// super.say() 就是调用父类中的普通函数 say()
}
}
var son = new Son();
son.say();
// 继承中属性或者方法查找原则：就近原则
// 1. 继承中 ，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行这个子类的
// 2. 继承中，如果子类中没有，就去查找父类有没有这个方法，如果有就执行父类的这个方法- 子类继承父类的属性方法同时也扩展自己的属性和方法。
class Father {
constructor(x) {
this.x = x;
}
}
class Son extends Father {
constructor(x, y) {
surper(x); //调用父类的constructor(x)
this.y = y;//定义子类独有的属性
}
}注意：
- 子类在构造函数中使用surper,必须放到this前面（即必须先调用父类的构造方法，在使用子类的构造方法）
9. 使用类的注意事项
- 在ES6中，类没有变量提升，所以必须先定义类，才能通过类实例化对象
- 类里面的共有属性和方法一定要加this使用
- this的指向问题
<body>
<button>点击</button>
<script>
var that;
var _that;
class Star {
// constructor 里面的this 指向的是创建的实例对象
constructor(uname, age) {
that = this;
this.uname = uname;
this.age = age;
this.btn = document.querySelector('button');
this.btn.onclick = this.sing;
}
sing() {
//这个sing方法里面的this 指向的是btn这个按钮，因为这个按钮调用了这个函数
console.log(this);
//console.log(this.uname); //undefined this 此时指向了 btn
console.log(that.uname); //that = this that全局变量，指向之前this指向实例化对象
}
dance() {
// 谁调用方法便指向谁，实例化对象ldh调用了方法，便指向ldh
_that = this;
console.log(this);
}
}
var ldh = new Star('刘德华');
console.log(that === ldh); //true
ldh.dance();
console.log(_that === ldh); //true
</script>