【JavaScript笔记】面对对象与构造函数

这篇具有很好参考价值的文章主要介绍了【JavaScript笔记】面对对象与构造函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

笔记作用

  • 了解面向对象编程中的一般概念

  • 能够基于构造函数创建对象

  • 理解 JavaScript 中一切皆对象的语言特征

  • 理解引用对象类型值存储的的特征

  • 掌握包装类型对象常见方法的使用

一、深入对象

了解面向对象的基础概念,能够利用构造函数创建对象。

1. 构造函数

构造函数是专门用于创建对象的函数,如果一个函数使用 new 关键字调用,那么这个函数就是构造函数。

<script>
  // 定义函数
  function foo() {
    console.log('通过 new 也能调用函数...');
  }
  // 调用函数
  new foo;
</script>

总结:

  1. 使用 new 关键字调用函数的行为被称为实例化

  2. 实例化构造函数时没有参数时可以省略 ()

  3. 构造函数的返回值即为新创建的对象

  4. 构造函数内部的 return 返回的值无效!

注:实践中为了从视觉上区分构造函数和普通函数,习惯将构造函数的首字母大写。

2. 实例成员

通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员。

<script>
  // 构造函数
  function Person() {
    // 构造函数内部的 this 就是实例对象
    // 实例对象中动态添加属性
    this.name = '小明'
    // 实例对象动态添加方法
    this.sayHi = function () {
      console.log('大家好~')
    }
  }
  // 实例化,p1 是实例对象
  // p1 实际就是 构造函数内部的 this
  const p1 = new Person()
  console.log(p1)
  console.log(p1.name) // 访问实例属性
  p1.sayHi() // 调用实例方法
</script>

总结:

  1. 构造函数内部 this 实际上就是实例对象,为其动态添加的属性和方法即为实例成员

  2. 为构造函数传入参数,动态创建结构相同但值不同的对象

注:构造函数创建的实例对象彼此独立互不影响。

3. 静态成员

在 JavaScript 中底层函数本质上也是对象类型,因此允许直接为函数动态添加属性或方法,构造函数的属性和方法被称为静态成员。

<script>
  // 构造函数
  function Person(name, age) {
    // 省略实例成员
  }
  // 静态属性
  Person.eyes = 2
  Person.arms = 2
  // 静态方法
  Person.walk = function () {
    console.log('^_^人都会走路...')
    // this 指向 Person
    console.log(this.eyes)
  }
</script>

总结:

  1. 静态成员指的是添加到构造函数本身的属性和方法

  2. 一般公共特征的属性或方法静态成员设置为静态成员

  3. 静态成员方法中的 this 指向构造函数本身

二、内置构造函数

掌握各引用类型和包装类型对象属性和方法的使用。

在 JavaScript 中最主要的数据类型有 6 种,分别是字符串、数值、布尔、undefined、null 和 对象,常见的对象类型数据包括数组和普通对象。

其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型,对象也被称为引用类型。

在 JavaScript 内置了一些构造函数,绝大部的数据处理都是基于这些构造函数实现的,JavaScript 基础阶段学习的 Date 就是内置的构造函数。

<script>
  // 实例化
    let date = new Date();
  
  // date 即为实例对象
  console.log(date);
</script>

甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数,用于创建对应类型的数据。

1. 引用类型

①Object

Object 是内置的构造函数,用于创建普通对象。

<script>
  // 通过构造函数创建普通对象
  const user = new Object({name: '小明', age: 15})
​
  // 这种方式声明的变量称为【字面量】
  let student = {name: '杜子腾', age: 21}
  
  // 对象语法简写
  let name = '小红';
  let people = {
    // 相当于 name: name
    name,
    // 相当于 walk: function () {}
    walk () {
      console.log('人都要走路...');
    }
  }
​
  console.log(student.constructor);
  console.log(user.constructor);
  console.log(student instanceof Object);
</script>

总结:

  1. 推荐使用字面量方式声明对象,而不是 Object 构造函数

  2. Object.assign 静态方法创建新的对象

  3. Object.keys 静态方法获取对象中所有属性

  4. Object.values 表态方法获取对象中所有属性值

②Array

Array 是内置的构造函数,用于创建数组。

<script>
  // 构造函数创建数组
  let arr = new Array(5, 7, 8);
​
  // 字面量方式创建数组
  let list = ['html', 'css', 'javascript']
​
</script>

数组赋值后,无论修改哪个变量另一个对象的数据值也会相当发生改变。

总结:

  1. 推荐使用字面量方式声明数组,而不是 Array 构造函数

  2. 实例方法 forEach 用于遍历数组,替代 for 循环 (重点)

  3. 实例方法 filter 过滤数组单元值,生成新数组(重点)

  4. 实例方法 map 迭代原数组,生成新数组(重点)

  5. 实例方法 join 数组元素拼接为字符串,返回字符串(重点)

  6. 实例方法 find 查找元素, 返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined(重点)

  7. 实例方法every 检测数组所有元素是否都符合指定条件,如果所有元素都通过检测返回 true,否则返回 false(重点)

  8. 实例方法some 检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回 true,否则返回 false

  9. 实例方法 concat 合并两个数组,返回生成新数组

  10. 实例方法 sort 对原数组单元值排序

  11. 实例方法 splice 删除或替换原数组单元

  12. 实例方法 reverse 反转数组

  13. 实例方法 findIndex 查找元素的索引值

2. 包装类型

在 JavaScript 中的字符串、数值、布尔具有对象的使用特征,如具有属性和方法,如下代码举例:

<script>
  // 字符串类型
  const str = 'hello world!'
    // 统计字符的长度(字符数量)
  console.log(str.length)
  
  // 数值类型
  const price = 12.345
  // 保留两位小数
  price.toFixed(2) // 12.34
</script>

之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的,被称为包装类型。

①String

String 是内置的构造函数,用于创建字符串。

<script>
  // 使用构造函数创建字符串
  let str = new String('hello world!');
​
  // 字面量创建字符串
  let str2 = '你好,世界!';
​
  // 检测是否属于同一个构造函数
  console.log(str.constructor === str2.constructor); // true
  console.log(str instanceof String); // false
</script>

总结:

  1. 实例属性 length 用来获取字符串的度长(重点)

  2. 实例方法 split('分隔符') 用来将字符串拆分成数组(重点)

  3. 实例方法 substring(需要截取的第一个字符的索引[,结束的索引号]) 用于字符串截取(重点)

  4. 实例方法 startsWith(检测字符串[, 检测位置索引号]) 检测是否以某字符开头(重点)

  5. 实例方法 includes(搜索的字符串[, 检测位置索引号]) 判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false(重点)

  6. 实例方法 toUpperCase 用于将字母转换成大写

  7. 实例方法 toLowerCase 用于将就转换成小写

  8. 实例方法 indexOf 检测是否包含某字符

  9. 实例方法 endsWith 检测是否以某字符结尾

  10. 实例方法 replace 用于替换字符串,支持正则匹配

  11. 实例方法 match 用于查找字符串,支持正则匹配

注:String 也可以当做普通函数使用,这时它的作用是强制转换成字符串数据类型。

②Number

Number 是内置的构造函数,用于创建数值。

<script>
  // 使用构造函数创建数值
  let x = new Number('10')
  let y = new Number(5)
​
  // 字面量创建数值
  let z = 20
​
</script>

总结:

  1. 推荐使用字面量方式声明数值,而不是 Number 构造函数

  2. 实例方法 toFixed 用于设置保留小数位的长度文章来源地址https://www.toymoban.com/news/detail-671573.html

到了这里,关于【JavaScript笔记】面对对象与构造函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【JavaScript】创建和使用构造函数

    在 JavaScript 中,构造函数是一种特殊的函数,用于创建和初始化对象。通过构造函数,你可以定义自己的对象类型,并在创建新对象时进行一些初始化操作。本篇博客将介绍构造函数的概念、创建方式、使用方法以及一些最佳实践。 构造函数是一种特殊类型的函数,用于创建

    2024年02月21日
    浏览(41)
  • 【Javascript】构造函数之new的作用

    目录 new的作用 把对象返回了回来 无new 有new    把构造函数的this指向了要返回的对象   无new​编辑 有new new的执行流程 创建了新空对象 将构造函数的作用域赋值给新对象(this指向新对象) 执行构造函数代码 (为这个新对象添加属性) 返回新对象   当我们定义一个函数的时

    2024年02月07日
    浏览(52)
  • JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析

    一、函数及函数的构造 函数是一个可重用的代码块,用来完成某个特定功能。每当需要反复执行一段代码时,可以利用函数来避免重复书写相同代码。 函数包含着的代码只能在函数被调用时才会执行,就可以避免页面载入时执行该脚本 简单来说就是一个封装,封装的是一个特

    2024年02月06日
    浏览(68)
  • 深入解析JavaScript中构造函数和new操作符

    🧑‍🎓 个人主页: 《爱蹦跶的大A阿》 🔥 当前正在更新专栏: 《VUE》 、《JavaScript保姆级教程》、《krpano》 ​  ​ 目录 ✨ 前言 ✨ 正文 第一节:构造函数 第二节:new操作符 第三节:实例与原型 ✨ 结语           JavaScript中的构造函数是一种特殊的函数,用于生成对象。

    2024年01月20日
    浏览(44)
  • 【前端知识】JavaScript——设计模式(工厂模式、构造函数模式、原型模式)

    工厂模式是一种众所周知的设计模式,广泛应用于软件工程领域,用于抽象创建特定对象的过程。 优点:可以解决创建多个类似对象的问题 缺点:没有解决对象标识问题(即新创建的对象是什么类型) 示例: 构造函数模式与工厂模式相比,没有显式地创建对象,其属性和方

    2024年02月15日
    浏览(49)
  • JavaScript-内置对象-笔记

    1.Math对象 Math对象: 用于进行数字处理 自带的对象 不是构造函数---不需要new 属性: Math.PI ----- 圆周率 方法: Math.floor(数字) ----- 向下取整 (只要整数位) Math.ceil(数字) ---- 向上取整(不管小数位是几,直接进一) Math.round(数字) ---- 四舍五入取整 Math.abs(数字) ---- 绝对值 M

    2024年01月22日
    浏览(45)
  • 转换json格式的日期为Javascript对象的函数

    项目中碰到了用jQuery从后台获取的json格式的日期的字符串,需要将此字符串转换成JavaScript的日期对象。 代码如下: 开发中有时候需要从服务器端返回json格式的数据,在后台代码中如果有DateTime类型的数据使用系统自带的工具类序列化后将得到一个很长的数字表示日期数据,

    2023年04月25日
    浏览(40)
  • 【JavaScript】对象 ② ( 对象使用 | 调用对象属性 | 调用对象方法 | 变量与属性区别 | 函数与方法区别 )

    使用字面量创建对象要点 : 在上一篇博客 【JavaScript】对象 ① ( 对象概念 | 对象使用场景 | 使用字面量创建对象 | 空对象字面量 | 小括号 / 中括号 / 大括号 作用 ) 中 , 介绍了 使用 字面量 创建对象 , 有如下要点 : 键值对 : 对象字面量 中的 属性 和 方法 都是以 \\\" 键值对 \\\" 的形

    2024年04月14日
    浏览(54)
  • 掌握 JavaScript:从初学者到高级开发者的完整指南之JavaScript对象(二)

    可以大体分页3大类: 第一类:基本对象,我们主要学习Array和JSON和String 第二类:BOM对象,主要是和浏览器相关的几个对象 第三类:DOM对象,JavaScript中将html的每一个标签都封装成一个对象 1.1.1 基本对象 1.1.1.1 Array对象 语法格式 Array对象时用来定义数组的。常用语法格式有如下

    2024年02月07日
    浏览(61)
  • 【JavaScript】函数 ⑥ ( 使用 arguments 获取所有实参 | arguments 内置对象 | 伪数组概念 )

    在 定义 JavaScript 函数 时 , 有时 不确定 形参的个数 , 形参写少了不够用 , 写多了又很浪费 , 这里 推荐使用 arguments 内置参数对象 ; 在 JavaScript 的 每个函数 的 内部都可以访问 内置的 arguments 对象 , 该对象中 包含了 调用者 传递给函数的所有 实参 , 即使 在 函数 形参 中没有明

    2024年04月22日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包