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: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 其他类

代码演示

  //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=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是无法理解的

 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循环

2. 遍历方式二：for in 遍历方法

原文地址：https://blog.csdn.net/Yihong1833100198/article/details/144069328

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！