JavaScript面向对象

JavaScript面向对象

1.1 对象值的使用

1.1.1 认识对象类型

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

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

为什么需要对象类型呢?

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

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

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

代码演示:

js 复制代码
 <script>
    /*
    两个术语:函数/方法
    函数:如果在JavaScript代码中通过function默认定义一个函数时,称之是函数
    方法(method):如果将一个函数放到对象中,作为对象的一个属性,那么将这个函数称之为方法
    */
    function foo() {

    }
    //key:字符串类型,但是在定义对象的属性名时,大部分情况下引号都是可以省略的
  var person={
    //key:value
    name:"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 其他类

代码演示

js 复制代码
  //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. 删除对象的属性

代码演示

js 复制代码
  <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=25
  info.running=function() {
    alert("I am Running~")
  }
  
  console.log(info.age)
  info.running()

  //4.添加对象新的属性
  info.height=1.88
  info.studying=function() {
    console.log("I am Studing")
  }
  console.log(info.height)
  info.studying()

 //5.删除对象属性
 //delete关键字
 delete info.age
 delete info.height
 console.log(info) 

1.2.3 对象的方括号使用

为什么需要使用方括号呢

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

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

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

对象的练习

js 复制代码
  //1.定义一个手机对象
  var phone = {
    name: "iphone",
    title: "对iphone的describtion",
    price:888,

    callPhone: function(phoneNum) {
      console.log("打电话给某人:",phoneNum)
    },

    playGame:function(gameName) {
      console.log("玩游戏:",gameNum)
    }

  }
js 复制代码
var product = {
name:"鞋子",
desc:"鞋子非常棒",
price:99,
brand:"nick"


}
js 复制代码
//定义用户对象
  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 遍历方法
相关推荐
北冥湖畔的燕雀2 小时前
C++泛型编程(函数模板以及类模板)
开发语言·c++
demi_meng3 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
QX_hao3 小时前
【Go】--map和struct数据类型
开发语言·后端·golang
你好,我叫C小白4 小时前
C语言 循环结构(1)
c语言·开发语言·算法·while·do...while
千码君20164 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
Evand J5 小时前
【MATLAB例程】基于USBL和DVL的线性回归误差补偿,对USBL和DVL导航数据进行相互补偿,提高定位精度,附代码下载链接
开发语言·matlab·线性回归·水下定位·usbl·dvl
爱喝白开水a6 小时前
LangChain 基础系列之 Prompt 工程详解:从设计原理到实战模板_langchain prompt
开发语言·数据库·人工智能·python·langchain·prompt·知识图谱
Neverfadeaway6 小时前
【C语言】深入理解函数指针数组应用(4)
c语言·开发语言·算法·回调函数·转移表·c语言实现计算器
武子康6 小时前
Java-152 深入浅出 MongoDB 索引详解 从 MongoDB B-树 到 MySQL B+树 索引机制、数据结构与应用场景的全面对比分析
java·开发语言·数据库·sql·mongodb·性能优化·nosql
杰克尼6 小时前
JavaWeb_p165部门管理
java·开发语言·前端