面向过程及面向思想
面向过程
面向过程就是分析出问题所需要的步骤，然后用函数把这些步骤一个个的实现，使用时一个个依次调用就可以。
面向思想
面向过程就是把事务分成一个个对象，由对象之间分工与合作。
面向思维特点
- 抽取对象中公共的属性与行为封装成一个类（模板）
- 对类进行实例化，获取类的对象
对象是一组无序的相关属性与方法的集合，所有的事物都可以是一个对象。例如字符串 数字 等等。
- 属性：对象的特征，在对象中用属性来表示（名词）
- 方法：对象的行为，在对象中用方法来表示（动词
类
在ES6的过程中，引进类的概念。类抽取对象公共的部分，类泛指一大类。
创建类与对象
注意事项
实例化对象中必须要有new 只要有new关键字 类的构造函数constructor才会执行。
constructor()是类的构造函数，用于传递参数，返回实例化对象。
通过class创建类 类名首字母大写，后面不用加小括号
类里面的所有函数不需要加function,多个函数之间不需要加逗号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建类与对象</title>
</head>
<body>
</body>
<script>
// 创建类
class People {
constructor(name, age) {
this.name = name;
this.age = age;
}
say(sing) {
console.log(sing)
}
}
// 创建实例化对象
let YaoZiMo = new People('尧子陌', "18");
console.log(YaoZiMo.name);
console.log(YaoZiMo.age);
YaoZiMo.say('两只蝴蝶')
</script>
</html>
类的继承
利用extends可让子类继承父类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类的继承</title>
</head>
<body>
</body>
<script>
// 类的继承
class Father {
constructor() {
}
money() {
console.log(100)
}
}
// 继承父类中的方法与属性
class Son extends Father {
}
// 创建子类的实例化对象
var son = new Son();
son.money()
</script>
</html>
调用普通函数
super关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>super调用普通函数</title>
</head>
<body>
</body>
<script>
// 父类
class Father {
say() {
return 'hello word'
}
}
// 子类
class Son extends Father {
say() {
console.log(super.say())
}
}
var son = new Son();
son.say()
</script>
</html>
子类继承父类的方法同时扩展自己的方法
注意：super（）必须在子类构造函数中的this之前调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子类继承父类的方法 同时扩展子类的方法 </title>
</head>
<body>
</body>
<script>
// 父类 有加法方法
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（）方法必须在子类的this之前进行调用
super(x, y)
this.x = x;
this.y = y;
}
subduction() {
console.log(this.x - this.y)
}
}
// 对子类进行实例化 获取类的对象
var son = new Son(5, 3);
// 子类调用父类的方法
son.sum()
son.subduction()
</script>
</html>
ES6中的类和对象的三个注意点。
1.在ES6中类没有变量提升，所以必须先定义类，才能通过实例化对象
2.类里面的公共属性与方法一定要加this
3.constructor里面的this指向实例化对象，方法里面的this指向这个方法的调用者
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用类的注意事项</title>
</head>
<body>
<button type="button" class="bth">点击</button>
</body>
<script>
var that;
var _that;
class People {
constructor(name, age) {
that = this;
console.log(this)
this.name = name;
this.age = age;
this.bth = document.querySelector('button');
this.bth.onclick = this.sing;
}
sing() {
console.log(this) //里面的this指向bth按钮
console.log(that.name) //that指是constructor中的this
}
dance() {
_that = this;
console.log(this) //此时的this指向实例化对象 因为实例化对象调用了dance这个函数
}
}
// 创建类
var people = new People('尧子陌');
console.log(that === people)
people.dance()
console.log(_that === people)
</script>
</html>
