【JavaScript】17_面向对象,类与属性
【摘要】 1、面向对象面向对象编程(OOP)程序是干嘛的? - 程序就是对现实世界的抽象(照片就是对人的抽象)对象是干嘛的? - 一个事物抽象到程序中后就变成了对象 - 在程序的世界中,一切皆对象面向对象的编程 - 面向对象的编程指,程序中的所有操作都是通过对象来完成 - 做任何事情之前都需要先找到它的对象,然后通过对象来完成各种操作一个事物通常由两部分组成:数据和功能一个对象由...
1、面向对象
面向对象编程(OOP)
- 程序是干嘛的?
- 程序就是对现实世界的抽象(照片就是对人的抽象) - 对象是干嘛的?
- 一个事物抽象到程序中后就变成了对象
- 在程序的世界中,一切皆对象 - 面向对象的编程
- 面向对象的编程指,程序中的所有操作都是通过对象来完成
- 做任何事情之前都需要先找到它的对象,然后通过对象来完成各种操作
-
一个事物通常由两部分组成:数据和功能
-
一个对象由两部分组成:属性和方法
-
事物的数据到了对象中,体现为属性
-
事物的功能到了对象中,体现为方法
- 数据:
姓名
年龄
身高
体重
- 功能:
睡
吃
<script>
const five = {
// 添加属性
name:"王老五",
age:48,
height:180,
weight:100,
// 添加方法
sleep(){
console.log(this.name + "睡觉了~")
},
eat(){
console.log(this.name + "吃饭了~")
}
}
</script>
2、类
使用Object创建对象的问题:
- 无法区分出不同类型的对象
- 不方便批量创建对象
在JS中可以通过类(class)来解决这个问题:
- 类是对象模板,可以将对象中的属性和方法直接定义在类中
定义后,就可以直接通过类来创建对象 - 通过同一个类创建的对象,我们称为同类对象
可以使用instanceof来检查一个对象是否是由某个类创建
如果某个对象是由某个类所创建,则我们称该对象是这个类的实例
语法:
class 类名 {} // 类名要使用大驼峰命名
const 类名 = class {}
通过类创建对象
new 类()
<script>
// const Person = class {}
// Person类专门用来创建人的对象
class Person {
}
// Dog类式专门用来创建狗的对象
class Dog {
}
const p1 = new Person()
const p2 = new Person()
const d1 = new Dog()
const d2 = new Dog()
console.log(p1 instanceof Person)//调用构造函数创建对象
console.log(d1 instanceof Dog)//true
console.log(d1 instanceof Person)//false
const five = {
// 添加属性
name: "王老五",
age: 48,
height: 180,
weight: 100,
// 添加方法
sleep() {
console.log(this.name + "睡觉了~")
},
eat() {
console.log(this.name + "吃饭了~")
},
}
const yellow = {
name: "大黄",
age: 3,
sleep() {
console.log(this.name + "睡觉了~")
},
eat() {
console.log(this.name + "吃饭了~")
},
}
</script>
3、属性
类是创建对象的模板,要创建第一件事就是定义类
类的代码块,默认就是严格模式,
类的代码块是用来设置对象的属性的,不是什么代码都能写
<script>
class Person {
name = '孙悟空'
age = 18
static test = 'test静态属性'// 使用static声明的属性,是静态属性(类属性) Person.test
static hh = '静态属性'// 静态属性只能通过类去访问 Person.hh
}
const p1 = new Person()
const p2 = new Person()
console.log(p1)
console.log(p2)
</script>
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论(0)