javascript进阶系列（五）—— 构造函数

小徐今天学习了吗
143 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章javascript进阶系列（三）—— 面向对象中，我们学习了javascript中箭头函数、数组和对象的解构赋值、面向对象等相关知识点。今天，在这篇文章中，我们继续学习包装类型、构造函数等相关知识点。

包装类型

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

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

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>

推荐使用字面量方式声明字符串，而不是 String 构造函数。length用来获取字符串的度长。split用来将字符串拆分成数组。toUpperCase用于将字母转换成大写。toLowerCase用于将字母转换成小写。slice用于字符串截取。indexOf检测是否包含某字符。startsWith检测是否以某字符开头，endsWith检测是否以某字符结尾。replace用于替换字符串，支持正则匹配。padStart固定长度字符开始位置打补丁，padEnd固定长度字符结束位置打补丁。match用于查找字符串，支持正则匹配。

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

Number

Number 是内置的构造函数，用于创建数值。推荐使用字面量方式声明数值，而不是 Number 构造函数。 实例方法 toFixed 用于设置保留小数位的长度。Number 也可以当做普通函数使用，这时它的作用是强制转换成数值数据类型。

<script>
  // 使用构造函数创建数值
  let x = new Number('10');
  let y = new Number(5);

  // 字面量创建数值
  let z = 20;

  // 检测是否属于同一个构造函数
  console.log(x.constructor === z.constructor);
</script>

Boolean

Boolean 是内置的构造函数，用于创建布尔值。推荐使用字面量方式声明布尔值，而不是Boolean构造函数。Boolean 也可以当做普通函数使用，这时它的作用是强制转换成布尔类型数据，由其它数据类型转换成布尔类型的数据被称为真值（truly）或假值（falsly）。

<script>
  // 使用构造函数创建布尔类型
  let locked = new Boolean('10');

  // 字面量创建布尔类型
  let flag = true;

  // 检测是否属于同一个构造函数
  console.log(locked.constructor === flag.constructor);
</script>

JavaScript 中一切皆为对象，还有window、Math 对象，最后补充一点无论是引用类型或是包装包类型都包含两个公共的方法 toString 和 valueOf。valueOf 方法获取原始值，数据内部运算的基础，很少主动调用该方法。toString 方法以字符串形式表示对象。

<script>
  // 对象类型数据
  let user = {name: '小明', age: 18}
  // 数值类型	 
  let num = 12.345;
  // 字符串类型
  let str = 'hello world!';
  
  str.valueOf(); // 原始值
  user.toString(); // 表示该对象的字符串
</script>

构造函数

使用构造函数的目的在于：

  • 批量生产对象的
  • 构造函数需要new 构造函数的函数名首字母是大写的
  • new 的过程得到的结果叫实例
  • 实例.constructor属性指向了构造函数

原型

内存浪费问题

成员(实例)对象this上属性的值是函数时, 会造成内存浪费。

  1. 判断多个对象之间的sing值是否相等 - 相等证明是同一个内存空间。

判断是否相等: 基础类型判断: 值, 类型是否相等 引用类型判断: 内存地址是否相等

// 构造函数
function Person(){
    // 这次的值是函数
    this.sing = function(){
        console.log("学习唱歌");
    };
}

// 1. 判断多个对象之间的sing值是否相等 - 相等证明是同一个内存空间
// 判断是否相等:
// 基础类型判断: 值, 类型是否相等
// 引用类型判断: 内存地址是否相等
var p1 = new Person();
var p2 = new Person();
console.log(p1.sing === p2.sing); // false (不相同)

如果有一万个对象, 那么会创建1万个对应的函数, 但是函数功能是一样的, 岂不是浪费?

总结: 在构造函数中属性的值如果是函数, 会造成内存浪费。

avatar
文章
阅读
粉丝