1.面向对象
面向过程:完成一件事需要多少个步骤
面向对象:完成一件事需要多少个对象
面向对象的特点:
- 对象是客观存在的事物,万物皆对象
- 把复杂问题简单化
- 把我们从执行者变为指挥者
解决同一个问题的两种思路
1.面向过程:解决这个问题的每一个步骤都是我亲自去实现的
2.面向对象:自己不要亲自做,找一个专门做这个事儿的人帮我做
代码的解决方式
面向过程——实现需求的每一步都是我自己写代码一步一步实现
面向过程——实现需求是专门找一个做这件事的人帮我做——类对象(?)
类和对象
类
类是对一群具有相同属性和行为的事物的统称
特点:抽象的,可以看做是模板,不能直接使用——学生类,人类,男人,女人,电脑类
对象
现实生活中的具体存在(具体到某一个才是对象)
特点:看得见摸得着,拿过来就能用。具体的,是通过类这个模板创建出来的真实存在的个体
类和对象的关系
类是模板,对象是根据类模板创建出来的一个个真实存在的个体。类模板有什么,对象中就有什么,不会多也不会少
类是月饼模子,对象就是根据模子制造的月饼,月饼可以吃,模子不能吃。同一个类可以造很多对象
如何设计一个类
设计类的三要素
1.名称
2.这类事物共同的属性(特征)
3.这类事物具有共同的行为,都具备什么样的功能
如:电脑类——类名:电脑;属性:颜色,型号,尺寸;行为:看视频,打游戏,写代码
人类——类名:人;属性:姓名,年龄,身高,体重;行为:吃饭,睡觉,思考
类和对象存在的意义
通过代码描述现实生活中的事物,进行编程
创建一个类
通过构造函数:函数名是大写开头,将来使用new关键词调用
定义一个类:其实就是写一个构造函数
注意:类名首字母需大写,如果类比较多,每一个类名首字母都要大写
(大写类名为约定俗成的规范)
在调用时就会调用this,它代表当前创建的那一个对象
function Teacher(name,age){
this.name = name
this.age = age
// 添加方法
this.teach = function(stu){
console.log(this.name + '给' + stu + '授课')
}
}
// 通过类创建对象
var tea = new Teacher('李老师',28)
console.log(tea) // 打印出了老师姓名和年龄
console.log(typeof tea) // 对象类型
tea.teach('张同学') // 不同对象的方法不同
// 获取刚才创建的对象的属性
console.log(tea.name)
console.log(tea.age)
字面量创建
相当于在定义时赋值,本质使用的还是new。主要用于不需要大批量定义对象的时候(不能加其他东西。
// 字面量:创建空的学生对象
var stu1 = {}
console.log(stu1)
// 创建一个带有属性和方法的对象
var stu2 = {
name:'张三',
age:25,
study:function(){ // 给了一个匿名函数,它也是一个对象,也在堆区中
console.log('学习')
}
}
console.log(stu2)
stu2.study()
// 访问属性方式1(常用)
console.log(stu2.name)
// 访问属性方式2
console.log(stu2['name'])
栈区和堆区
栈区:主要存放基本数据类变量
堆区:主要存放new出来的对象
匿名函数也是一个对象,也在堆区中。
写一个var stu1 = new Student('李四',23)
- 在栈区声明一个stu变量
- 在堆区中开辟一块空间
- 给空间中的属性和方法赋值
- 返回空间中的首地址给的stu变量
此为引用类型↑,因为发生了从栈区到堆区的引用
console.log(stu1.name)访问属性过程
通过stu1里面存的地址到堆区中找到这块空间,获取里面的name属性的值,返回给调用者
stu1.study() 调用方法过程
通过stu1里面存的地址到堆区中找到这块空间,然后访问study,发现study存的地址(其实是一个方法),根据方法的地址找到这个匿名方法,再调用方法
2.Math对象
Math(算数)对象是算术相关的对象,它的作用是:执行常见的算数任务。
Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math() 。
也就是在使用Math的时候,不需要通过Math类创建对象,直接通过类名调用即可
Math的对象属性
| 属性 | 描述 |
|---|---|
| E | 返回算术常量 e,即自然对数的底数(约等于2.718)。 |
| LN2 | 返回 2 的自然对数(约等于0.693)。 |
| LN10 | 返回 10 的自然对数(约等于2.302)。 |
| LOG2E | 返回以 2 为底的 e 的对数(约等于 1.4426950408889634)。 |
| LOG10E | 返回以 10 为底的 e 的对数(约等于0.434)。 |
| PI | 返回圆周率(约等于3.14159)。 |
Math的对象方法
| 方法 | 描述 |
|---|---|
| abs(x) | 返回 x 的绝对值。 |
| acos(x) | 返回 x 的反余弦值。 |
| asin(x) | 返回 x 的反正弦值。 |
| ceil(x) | 对数进行上舍入。 |
| cos(x) | 返回数的余弦。 |
| exp(x) | 返回 Ex 的指数。 |
| floor(x) | 对 x 进行下舍入。 |
| log(x) | 返回数的自然对数(底为e)。 |
| max(x,y,z,...,n) | 返回 x,y,z,...,n 中的最高值。 |
| min(x,y,z,...,n) | 返回 x,y,z,...,n中的最低值。 |
| pow(x,y) | 返回 x 的 y 次幂。 |
| random() | 返回 0 ~ 1 之间的随机数。 |
| round(x) | 四舍五入。 |
| sin(x) | 返回数的正弦。 |
| sqrt(x) | 返回数的平方根。 |
| tan(x) | 返回角的正切。 |
| trunc(x) | 将数字的小数部分去掉,只保留整数部分 |
生成随机数
1.生成[1,10]随机数
[1,10] --> [1,11)-->[0,10)+1 --> [0,1)*10+1
可能会生成10.+的小数,需要向下取整
规律:生成min-max之间的随机整数,[min,max]
Math.floor(Math.random()*(max-min+1)))
console.log(Math.floor(Math.random()*10) + 1)
/* 创建学生类 */
function Student(name,age,home) {
this.name = name
this.age = age
this.home = home
// 定义一个自我介绍的方法
this.intro = function(){
console.log(`我叫${this.name},今年${this.age},来自于${this.home}`)
}
}
var stu1 = new Student('张三',23,'上海')
var stu2 = new Student('李四',24,'北京')
var stu3 = new Student('王五',27,'深圳')
var stu4 = new Student('赵六',28,'广州')
// 定义数组
var arr = [stu1, stu2, stu3,stu4]
// 随机生成索引
var index = Math.floor(Math.random() * arr.length)
// 随机获取学生
var stu = arr[index]
// 打印学生
console.log(stu)
// 调用学生自我介绍方法
stu.intro()
3.Date对象
日期对象用于处理日期和时间。
创建 Date 对象: new Date()
以下四种方法同样可以创建 Date 对象:
var d = new Date(); var d = new Date(milliseconds);
var d = new Date(dateString); (年,月,日)
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); 日期类型的字符串
- milliseconds 参数是一个 Unix 时间戳(Unix Time Stamp),它是一个整数值,表示自 1970 年 1 月 1 日 00:00:00 UTC(the Unix epoch)以来的毫秒数。
- dateString 参数表示日期的字符串值。
- year, month, day, hours, minutes, seconds, milliseconds 分别表示年、月、日、时、分、秒、毫秒。
var dat = new Date()
var nian = dat.getFullYear() // 2023
var yue = dat.getMonth() // 6,从0开始算
var ri = dat.getDate() // 26
var qi = dat.getDay() //3,周日为0,周一为1
var shi = dat.getHours()
var fen = dat.getMinutes()
var miao = dat.getSeconds()
时间戳
1970 年 1 月 1 日至今的毫秒数
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
|---|---|
| valueOf() | 返回 Date 对象的原始值。 |
// 普通方式获取毫秒值
var d = new Date()
console.log(d.getTime())
console.log(d.valueOf())
// 简单方式
var d1 = +new Date()
console.log(d1)
// H5新增方式-不需要创建对象,直接使用类名调用
console.log(Date.now())
4.Number对象
Number 对象是原始数值的包装对象。
Number 创建方式 new Number()。
注意: 如果一个参数值不能转换为一个数字将返回 NaN (非数字值)。
Number 对象方法
| 方法 | 描述 |
|---|---|
| isInteger | 检测指定参数是否为整数。 |
| toFixed(x) | 把数字转换为字符串,结果的小数点后有指定位数的数字。 |
Number 对象属性
| 属性 | 描述 |
|---|---|
| MAX_VALUE | 可表示的最大的数。 |
| MIN_VALUE | 可表示的最小的数。 |
| NaN | 非数字值。 |
5.全局对象
全局对象是页面中最大的对象,也可以说是顶级对象,在不同的环境中表示不同的对象。
在浏览器环境中指的就是Window对象,在nodejs中指global对象。
Window对象属于BOM(浏览器对象模型)范畴,可以理解为当前窗口对象
特点
它的属性和方法都不需要加上Window这个属性名
属性
| 属性 | 描述 |
|---|---|
| NaN | 指示某个值是不是数字值。 |
| undefined | 指示未定义的值。 |
方法
| 函数 | 描述 |
|---|---|
| eval() | 计算 JavaScript 字符串,并把它作为脚本代码来执行。 |
| isNaN() | 检查某个值是否是数字。 |
| Number() | 把对象的值转换为数字。 |
| parseFloat() | 解析一个字符串并返回一个浮点数。 |
| parseInt() | 解析一个字符串并返回一个整数。 |
| String() | 把对象的值转换为字符串。 |