首页 > 编程语言 >【JavaScript】18_面向对象,类与属性

【JavaScript】18_面向对象,类与属性

时间:2023-02-19 19:33:23浏览次数:55  
标签:console log 面向对象 对象 18 JavaScript Person const name

1、面向对象

面向对象编程(OOP)

  1. 程序是干嘛的?
  • 程序就是对现实世界的抽象(照片就是对人的抽象)
  1. 对象是干嘛的?
  • 一个事物抽象到程序中后就变成了对象
  • 在程序的世界中,一切皆对象
  1. 面向对象的编程
  • 面向对象的编程指,程序中的所有操作都是通过对象来完成
  • 做任何事情之前都需要先找到它的对象,然后通过对象来完成各种操作
  • 一个事物通常由两部分组成:数据和功能
  • 一个对象由两部分组成:属性和方法
  • 事物的数据到了对象中,体现为属性
  • 事物的功能到了对象中,体现为方法
- 数据:
姓名
年龄
身高
体重

- 功能:

<script>
const five = {
// 添加属性
name:"王老五",
age:48,
height:180,
weight:100,

// 添加方法
sleep(){
console.log(this.name + "睡觉了~")
},

eat(){
console.log(this.name + "吃饭了~")
}
}
</script>

2、类

使用Object创建对象的问题:

  1. 无法区分出不同类型的对象
  2. 不方便批量创建对象

在JS中可以通过类(class)来解决这个问题:

  1. 类是对象模板,可以将对象中的属性和方法直接定义在类中 定义后,就可以直接通过类来创建对象
  2. 通过同一个类创建的对象,我们称为同类对象 可以使用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>

标签:console,log,面向对象,对象,18,JavaScript,Person,const,name
From: https://blog.51cto.com/wujianrenn/6066804

相关文章

  • uni-app api:使用剪贴板进行复制粘贴(hbuilderx 3.6.18)
    一,代码:<template><view><inputclass="btn"style="background:#ffff00;"type="text"v-model="content"/><buttonclass="btn"@click="setCl......
  • uni-app api:拨打电话(hbuilderx 3.6.18)
    一,代码:<template><view><button@click="call">拨打电话</button></view></template><script>exportdefault{data(){......
  • Leetcode题1两数之和 JavaScript语言
    1.两数之和方案一,暴力双循环读完题目,马上能想到的方案就是双循环,挨个排查,写出来也很快:vartwoSum=function(nums,target){constlen=nums.length;for......
  • JavaScript中深拷贝和浅拷贝有什么区别?如何实现深拷贝?
    前言大家好,我是CoderBin,本次讲讲深拷贝和浅拷贝有什么区别?以及如何实现深拷贝?。希望对大家有所帮助,谢谢!如果文中有不对、疑惑的地方,欢迎在评论区留言指正......
  • 利用Quartus 18.0设计Nios II系统教程
    最后修改日期:2023/02/191.概要1.1.软件Quartus18.0PrimeStandard及内部工具1.2.电路板AlteraDE2-115开发板1.3.PLD器件信号FPGA:AlteraCycloneIVENo:E......
  • [PKUSC2018]神仙的游戏
    神仙的游戏设s的长度为len,那么当k<=\(\lfloor\frac{len}{2}\rfloor\)时,只需要s[1..k]=s[len-k+1...len]即可。也就是说我们要判断前缀的1与后缀的0是否对应。......
  • Functions2-18
    因为underscore本来就是为了充分发挥JavaScript的函数式编程特性,所以也提供了大量JavaScript本身没有的高阶函数。bind​​bind()​​有什么用?我们先看一个常见的错误用法:'u......
  • 线程18
    条件变量时构建在另一个锁上的同步原语,当需要线程关注特定的状态变化或事件发生时将使用这个锁。典型的用法是生产者与消费者问题,其中一个线程生产的数据提供给另外一个线程......
  • uni-app:打包发布部署h5项目(hbuilderx 3.6.18)
    一,基础配置打开项目的manifest.json文件主要是要有appid和应用名称应用版本名称和版号也需要 说明:appid是根据应用名称从在开发者中心中创建的应用列表获取,如果没......
  • C++基于面向对象思想的ATM 系统设计与实现(三级项目)[2023-02-19]
    C++基于面向对象思想的ATM系统设计与实现(三级项目)[2023-02-19]实验二基于面向对象思想的ATM系统设计与实现(三级项目)一、实验目的:(1)掌握派生类的使用方法。(2)......