面向对象和面向过程
1.面向过程
分析解决问题的步骤，用函数把这些步骤一步一步实现，使用的时候再一步一步调用就可以
2.面向对象
是把事物分解成一个个对象，由对象之间分工合作
优点：易维护，面向对象由封装，继承，多态特性，可以设计出低 耦合的系统，使系统更加易于维护；
确定：性能比面向过程低
3.对象
对象是由属性和方法组成，是键值对的集合，是一个可以具体的事物
属性：事物的特征
方法：事物的行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.字面量创建对象
var obj = {
name:'张三',
age:12
}
// console.log(obj);
// 2.构造函数去创建对象
function Star(name,age){
this.name = name;
this.age = age;
}
// 一类对象
var o = new Star('小刘',13);
console.log(o);
</script>
</body>
</html>
4.类
在ES6中新增了类的概念，可以用class关键字声明一个类，之后以这个类来实例化对象
一类对象具有相同的属性和方法 通过类来实例化一个具体的对象
创建类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// // 1.使用class关键字
// class Person{
// }
// // 2 利用类来创建对象 new创建
// var p = new Person()
// 1.创建类 创建一个明星类 类名首字母要大写
class Star{
// 类的共有属性放到 constructor里面
// 实例化类时执行------构造器
constructor(name,age){
this.name = name;
this.age = age;
}
}
// 利用类创建对象 new
var o = new Star('张三',34);
console.log(o);
</script>
</body>
</html>
类创建添加属性和方法
1.通过class关键字创建类，类名首字母要大写；
2.类里面有constructor,可以用来接收传递过来的参数，返回实例对象
3.constructor在new生成实例时，会被自动调用，就算我们不写constructor,类也会自动生成
4.多个函数之间不需要加逗号；
5.创建实例new 不能省略；
6.类名后不要加小括号，创建实例类名后加小括号 构造器不要加function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
class Star{
// 共有的属性要放到构造器中 constructor是构造器
constructor(name,age){
this.name = name
this.age = age
}
// 注意 不加逗号 方法和方法之间不加逗号
sing(song){
console.log(this.name + '唱'+ song )
}
eat(){
console.log(this.name + '吃大餐')
}
}
// 利用类创建对象
var s = new Star('小轴',23);
console.log(s);
s.sing ('冰雨');
var zxy = new Star('张雪' ,20);
console.log(zxy);
// 类里面所有的函数不需要写function
// 多个函数之间不需要添加逗号
</script>
</body>
</html>
5.类的继承
//父类
class Father{
}
//子类
class Son extends Father{
}
注意:
1.在继承中，我们实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的 ,继承中，子类没有方法，就去查找父类有没有这个方法，如果有就执行父类的方法，没有就报错
2 继承中，实例化子类调用属性，先看子类里有没有这个属性，如果有就访问输出;如果子类里没有，就去父类中找，有就访问输出 没有就输出undefined
3.如果子类想要继承父类的方法，同时在自己内部扩展自己的属性和方法 利用super调用父类的构造函数; super必须在子类this之前调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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(x,y); //使用super调用了父类中的构造函数
}
sum(){
console.log(123)
}
}
var son = new Son(3,4)
console.log(son)
// 子类没有方法，继承父类的方法
son.sum()
/*
在继承中，我们实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
继承中，子类没有方法，就去查找父类有没有这个方法，如果有就执行父类的方法，没有就报错
继承中，实例化子类调用属性，先看子类里有没有这个属性，如果有就访问输出
如果子类里没有，就去父类中找，有就访问输出 没有就输出undefined
如果子类想要继承父类的方法，同时在自己内部扩展自己的属性和方法 利用super调用父类的构造函数
super必须在子类this之前调用
*/
</script>
</body>
</html>
6.子类继承父类同时扩展自己的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子类继承父类同时扩展自己的方法</title>
</head>
<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(x,y); //使用super调用了父类中的构造函数
// super 必须在子类this之前调用
this.x = x;
this.y = y;
}
subtract(){
console.log(this.x - this.y)
}
}
var son = new Son(5,7);
son.subtract(); //-2
son.sum(); //12
console.log(son.x); //5
console.log(son.z); //undefined
</script>
</body>
</html>
7.this指向
类里面共有的属性和方法一定要加this使用
1：constructor中this指向的是new出来的实例对象
2：自定义的方法，一般也指向new出来的实例对象
3：绑定事件之后，this指向的就是触发事件的事件源
注意：
ES6中类没有变量提升，所以必须先声明类，才能通过类实例化对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var s = new Star('张三' ,23);
console.log(s); //报错Uncaught ReferenceError: Cannot access 'Star' before initialization
class Star{
constructor(name,age){
this.name = name;
this.age = age;
}
}
</script>
</body>
</html>
8.面向对象实现tab切换栏
功能
1.点击tab栏，可以实现切换；
2.点击+号，可以添加tab项和内容项
3.点击*号，可以删除当前的tab项和内容项
4.双击tab项文字或内容项文字可以修改里面的文字内容
准备工作
1.获取标题元素
2.获取内容元素
3.获取删除的小按钮*号 和+号
4.新建js文件，定义类，添加需要的属性和方法（切换，删除，添加，修改）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
