JavaScript|对象

标签：function arr 对象 JavaScript item 构造函数属性

1 类和对象

1) 对象的概念

对象: 一个具体的实体

在现实世界中, 对象随处可见, 一个人, 一个学生, 一个杯子, 一辆汽车, 游戏里的一个英雄... 都是一个对象

2) 对象的组成

如何描述一个对象呢

比如,

每个人都有姓名, 年龄, 性别这些特征.
游戏里的英雄都有生命值, 攻击力, 防御力这些特征.

对象除了这些特征外, 还有一些行为/动作

比如,

人可以吃饭, 睡觉
游戏里的英雄可以移动, 可以放技能

在程序里,

把对象的特征叫做属性, 使用变量来描述
把对象的行为叫做方法, 使用函数来描述

因此, 我们得出一个重要结论:

对象是由属性和方法组成的!!

3) 类的概念

类: 具有相同特征的事物的集合

我们把具有相同特征和行为的实体抽象出来, 就形成了一个类.

比如: 把人集合在一起, 就形成了人类, 把王者荣耀里的英雄集合起来, 就形成了英雄类

每一个人类都有一些相同的特征, 比如: 姓名, 性别, 年龄, 身高, 体重...等
每一个英雄也有一些相同的特征, 比如: 生命值, 攻击力, 防御力...等

4) 程序中的类与对象

那么如何使用程序来描述这些相同的特征呢?

可以定义一个模板/规范/设计图纸, 然后通过这个模板/规范/设计图纸来生产一个个的实体.

我们把定义的这个模板叫做类
把生产出来的实体叫做对象
把生产的过程叫做实例化

5) 类和对象的关系

类和对象的关系, 可以认为是整体和个体, 抽象和具体的关系

通过上面的描述, 总结起来说, 就是

类是对象的集合
对象是类的实例化

6) 小结

对象是由属性和方法组成的
属性就是变量, 方法就是函数
类是对象的集合, 对象是类的实例化

补充: 由于类是对象的集合, 通常我们也可以说类由属性和方法组成~

2 JS中的类和对象

1) 构造函数的定义

在JS中, ES6之前没有类(class)的概念, 主要是通过构造函数来模拟的.[^1]

语法

function 构造函数名 () {
    // 函数体
}

使用function关键字表示定义一个构造函数
构造函数名一般首字母大写

示例: 2-1构造函数的定义.html

function Person() {
    
}

通过以上方式就可以定义一个Person构造函数, 相当于定义好了一个Person类

2) 构造函数的作用

通过构造函数实例化对象

在JS中, 我们通过构造函数(类)来实例化对象

语法

new 构造函数名()

示例: 2-2通过构造函数实例化对象.html

// 一. 定义一个构造函数
function Person() {
    
}
// 二. 实例化一个对象, 赋值给变量p
var p = new Person();
console.log(typeof p); // object

以上代码

通过new关键字, 产生了一个对象, 并赋值给变量p
通过typeof p测试变量p的类型为object, 说明p是一个对象

在构造函数中定义属性

构造函数规定了由该类实例化出来的对象应该包含哪些属性

比如, 由学生类实例化出来的学生对象都应该有姓名, 年龄这些属性

function Student () {
    this.uname = null;
    this.age = null;
}

在构造函数的内部, 我们通过this.属性名的方式来定义属性

构造函数虽然可以规定实例对象应该包含哪些属性, 但是并不能确定实例对象的属性值

比如人类都应该有名字这个属性, 但是具体叫什么名字, 只有在一个人出生的时候才去确定

因此, 在实例化对象的时候, 需要将具体的数据传递给构造函数

示例: 2-3在构造函数中定义属性.html

// 一. 定义一个学生类
function Student(n, a) {
    this.uname = n;
    this.age = a;
}
// 二. 实例化对象
var stu = new Student('xiaoming', 20);

重要结论

构造函数主要完成属性的初始化!!!

3) 小结

通过构造函数定义类(规定应该包含哪些属性名)
通过new实例化对象(在实例化时, 确定属性值)
构造函数主要完成属性的初始化

3 对象的方法

1) 方法的定义

我们已经知道

类由属性和方法组成
在JS中, 通过构造函数定义类
在构造函数中可以通过this.属性名定义属性

那么, 在构造函数中是否也可以通过this.方法名定义方法呢?

2) 方法的使用(调用)

语法

对象.方法名()

由于方法就是一个函数, 在后面加小括号表示方法的调用

示例

// 三. 调用方法 -- 对象.方法名()
stu.sayHi(); // 大家好

3) 小结

一般不在构造函数中定义方法
方法的调用语法: 对象.方法名()

4 常用的内置对象

1) 常用的内置对象

Math对象
Date对象
字符串对象
数组对象
JSON对象

学习方法

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN:https://developer.mozilla.org/zh-CN/

2) Math对象的常用方法

方法名	功能
Math.floor()	向下取整
Math.max()/Math.min()	求最大和最小值
Math.random()	获取范围在[0,1)内的随机值

3) Date对象的常用方法

方法名	功能
getFullYear()	获取年份
getMonth()	获取月份(0~11)
getDate()	获取日期(1~31)
getDay()	获取星期(0~6)
getHours()	获取小时
getMinutes()	获取分钟
getSeconds()	获取秒

4) 数组对象的常用方法

方法名	功能	返回值
push()	在末尾添加元素	新数组的长度
pop()	删除最后一个元素	删除的元素的值
slice()	截取子数组	新数组
splice()	通常用于删除某个指定元素	新数组

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = [1, 2, 3]
      // 数组的变异方法: 修改原数组

      // push: 在原数组的末尾添加一个元素, 并返回数组的长度
      let res = arr.push(4, 5)
      console.log(arr)
      console.log(res)

      // pop: 删除数组的最后一个元素, 并返回元素的值. 会改变数组长度
      res = arr.pop()
      console.log(arr, res)

      // unshift: 在数组的头部添加一个元素
      // shift: 在数组的头部删除一个元素
    </script>
  </body>
</html>

示例2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = ['red', 'green', 'blue']

      // 查找函数 find
      function handler(item) {
        // console.log(item)
        if (item == 'yellow') {
          return true
        }
      }
      let res = arr.find(handler)
      console.log(res)

      // 查找index索引 findIndex
      res = arr.findIndex(function (item) {
        if (item == 'blue') {
          return true
        }
      })
      console.log(res)

      function findIndex(arr, item) {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i] == item) {
            return i
          }
        }
      }

      // forEach: 遍历数组, 依次获取数组的每一个元素
      arr.forEach(function (item) {
        console.log(item)
      })

      // map, filter, reduce
      const nums = [1, 2, 3]
      let newNums = nums.map(function (item) {
        return item * 2
      })
      console.log(newNums)
      newNums = nums.filter(function (item) {
        if (item >= 2) {
          return true
        }
      })
      console.log(newNums)
    </script>
  </body>
</html>

5) JSON对象的常用方法

方法名	功能	返回值
JSON.parse(str)	将JSON字符串转换成JS对象	JS对象
JSON.stringify(obj, null, 2)	将 JS 对象转换为 JSON 字符串	JSON字符串

标签：function,arr,对象,JavaScript,item,构造函数,属性
From： https://www.cnblogs.com/tangjielin/p/17541067.html

1 类和对象

1) 对象的概念

2) 对象的组成

3) 类的概念

4) 程序中的类与对象

5) 类和对象的关系

6) 小结

2 JS中的类和对象

1) 构造函数的定义

2) 构造函数的作用

通过构造函数实例化对象

在构造函数中定义属性

3) 小结

3 对象的方法

1) 方法的定义

2) 方法的使用(调用)

3) 小结

4 常用的内置对象

1) 常用的内置对象

2) Math对象的常用方法

3) Date对象的常用方法

4) 数组对象的常用方法

5) JSON对象的常用方法

相关文章

赞助商

阅读排行