Day13-JS3:面向对象1

112 阅读8分钟

面向对象.png

1.面向对象

面向过程:完成一件事需要多少个步骤

面向对象:完成一件事需要多少个对象

面向对象的特点:

  1. 对象是客观存在的事物,万物皆对象
  2. 把复杂问题简单化
  3. 把我们从执行者变为指挥者

解决同一个问题的两种思路

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)

  1. 在栈区声明一个stu变量
  2. 在堆区中开辟一块空间
  3. 给空间中的属性和方法赋值
  4. 返回空间中的首地址给的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()把对象的值转换为字符串。