欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 美食 > JavaScript面向对象

JavaScript面向对象

2025/3/14 21:02:54 来源:https://blog.csdn.net/Yihong1833100198/article/details/144069328  浏览:    关键词:JavaScript面向对象

JavaScript面向对象

1.1 对象值的使用

1.1.1 认识对象类型

在数据类型中我们提到还有一种特别的类型:对象类型

  • 对象类型涉及到JavaScript的各个方面,所以掌握对象非常重要
  • 对象类型是一种储存键值对(key-value)的更复杂的数据类型

为什么需要对象类型呢?

  • 基本数据类型可以存储一些简单的值,但是现实世界的事物抽象成程序时,(往往比较复杂)
    • 比如一个人,有自己的特性(比如姓名、年龄、身高),有一些行为(比如跑步、学习、工作)
    • 比如一辆车,有自己的特性,(比如颜色,重量,速度),有一些行为(比如行驶)

这个时候,我们需要一种新的类型将这些特性和行为组织在一起,这种类型就是对象类型

  • 对象类型可以使用{…}来创建的复杂类型,里面包含了键值对(“key:value”)
  • 键值对可以是属性和方法(在对象中的函数称之为方法)
  • 其中key是字符串(也叫做属性名property name,ES6之后也可以是Symbol类型,后续继续学习)
  • 其中value可以是任意类型,包括基本数据类型,函数类型、对象类型

代码演示:

 <script>/*两个术语:函数/方法函数:如果在JavaScript代码中通过function默认定义一个函数时,称之是函数方法(method):如果将一个函数放到对象中,作为对象的一个属性,那么将这个函数称之为方法*/function foo() {}//key:字符串类型,但是在定义对象的属性名时,大部分情况下引号都是可以省略的var person={//key:valuename:"why",// "name":"why""my friend":{name:"kobe",age:20,},//两个字符,双引号就不可以省略了age:18,height:1.88,run:function() {console.log("running")},//方法eat:function() {console.log("eat foods")},study:function() {console.log("studying")}}</script>

1.1.2 创建对象和使用对象

对象创建方法有很多,包括三种

  1. 对象字面量(Object Literal):通过{}
  2. new Object +动态添加属性
  3. new 其他类

代码演示

  //1.对象的字面量var ob1 = {name:"why"}//2.new Object//Object 构造函数var obj2=new Object()//添加属性obj2.name="kobe"//3.new 其他类()function Person(){}//自定义构造函数var obj3=new Person()

目前我们主要掌握对象字面量的方式,后续我们学习其他两种方式

  • 属性之间是以逗号(comma)分割的
  • 对象事物使用过程包括如下操作
  1. 访问对象的属性
  2. 修改对象的属性
  3. 添加对象的属性
  4. 删除对象的属性

代码演示

  <script>//定义了一个对象//里面有属性和方法var info = {name:"why",age:18,friend:{name:"kobe",age:30},running: function() {console.log("running~")}}//访问对象的属性console.log(info.name)console.log(info.friend.name)info.running()//调用running//3.修改对象的属性info.age=25info.running=function() {alert("I am Running~")}console.log(info.age)info.running()//4.添加对象新的属性info.height=1.88info.studying=function() {console.log("I am Studing")}console.log(info.height)info.studying()//5.删除对象属性//delete关键字delete info.agedelete info.heightconsole.log(info) 

1.2.3 对象的方括号使用

为什么需要使用方括号呢

  • 对于多次属性来说,JavaScript是无法理解的
 obj.my friend 是不生效的
  • 这是因为点符号要求key是有效的变量标识符
    • 不包含空格,不以数字开头,也不包含特殊字符(允许使用$和_)

代码演示:使用方括号可以使我们在定义时或者操作时更加灵活

  var message = "Hello World"var obj = {"good friend" : "why",[message]: "你好,世界"}console.log(obj["good friend"])console.log(obj[message])

对象的练习

  //1.定义一个手机对象var phone = {name: "iphone",title: "对iphone的describtion",price:888,callPhone: function(phoneNum) {console.log("打电话给某人:",phoneNum)},playGame:function(gameName) {console.log("玩游戏:",gameNum)}}
var product = {
name:"鞋子",
desc:"鞋子非常棒",
price:99,
brand:"nick"}
//定义用户对象var user = {id:1111111111111111,account: "coderwhy",nickname:"coderehy",password:"xxx123",avatarURL:"图片地址",role: {id: 110,name:"管理员",creatTime:"2033-03-03"}}

1.2.4 对象的遍历

对象的遍历(迭代):表示获取对象中所有的属性和方法

  • Object.keys()方法可以返回一个由一个给定对象的自身可枚举属性组成的数组
  1. 遍历方式一:普通for循环

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. 遍历方式二:for in 遍历方法

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词