JS对象分类

·  阅读 1947
JS对象分类

前言

原本认为JS对象分类十分简单,但是看到有许多分法并且每一种分法似乎都有道理,因此我列举出一些分法以及它们的包含范围,算是拾人牙慧吧,同时发表一些自己的看法,最后总结一下一些常用的全局函数和属性。

分类方法

我看到有四种分类方法:

最主要的是前两种,后两种只是涉及到了而已,但是我还是拿出来讨论一下。

  1. 内部对象宿主对象自定义对象三种
  • 内部对象——包含ArrayBooleanDateFunctionGlobalMathError...
  • 宿主对象——运行JS脚本环境提供的对象,包含WindowDocumentFormDateXMLHttpRequest...
  • 自定义对象——开发人员自己定义的对象
  1. W3school中的分类,分为本地对象(native object)内置对象(build-in object)宿主对象(host object) 三种
  • 本地对象——独立于宿主环境的ECMAScript实现提供的对象,例如ArrayBooleanDateFunction...
  • 内置对象——总共两类GlobalMathGlobal对象包含顶级函数(全局函数),例如parseIntparseFloat...和顶级属性(全局属性),例如Infinityundefined...
  • 宿主对象——所有非本地对象都是,即由ECMAScript实现的宿主环境提供的对象,所有BOM和DOM对象都是宿主对象
  1. MDN只定义了一种内置对象MDN,因此不是内置对象我把它归类为其他对象
  • 内置对象——ArrayBooleanDateFunctionGlobalMathError...,等同于第一种的内部对象
  • 其他对象——除内置对象之外的对象
  1. 高程中分为两类Global对象Math对象,它们都属于单体内置对象
  • Global对象——Global对象方法、Global对象属性、window对象
  • Math——保存数学公式和信息提供的公共位置,分为Math对象属性、Math对象方法

小结

  • 第一种分类中的“内部对象”,等同于第三种分类的“内置对象”
  • 第一种分类的“宿主对象”等同于第二种的“宿主对象”

规范上的解释

引用规范上的解释

native object

object in an ECMAScript implementation whose semantics are fully defined by this specification rather than by the host environment.

NOTE Standard native objects are defined in this specification. Some native objects are built-in; others may be constructed during the course of execution of an ECMAScript program.

build-in object

object supplied by an ECMAScript implementation, independent of the host environment, that is present at the start of the execution of an ECMAScript program.

NOTE Standard built-in objects are defined in this specification, and an ECMAScript implementation may specify and define others. Every built-in object is a native object. A built-in constructor is a built-in object that is also a constructor.

host object

object supplied by the host environment to complete the execution environment of ECMAScript.

NOTE Any object that is not native is a host object.

这里很好的印证了W3school里面的分类(第二种分类方法)符合规范所说。

个人见解

从之前的分类其实看出第一种的内部对象其实就是第二种的本地对象,而第二种的内置对象其实是属于本地对象的,因此我认为可以把JS对象分成第一种分类方法的三种,其中的内部对象又可以分为需要通过new创建的本地对象和不需要手动实例化的内置对象

也就是

  • 内部对象(本地对象+内置对象)
  • 宿主对象(执行环境提供)
  • 自定义对象(开发人员自定义)

常用的全局函数和属性

global对象相关

  1. Number相关
isNaN('abc'); // true
parseInt('12a'); // 12
parseFloat('123.23z'); // 123.23
复制代码

在ES6中这些方法可定义到了Number对象上,我认为前面加上Number更符合语境。因此以后写前面还是加上Number

  1. URL相关(常用于与后端对接的时候get方法传参)
const url = "https://zjgyb.github.io/CSS-animate1.html #input-radio";
// 不会对本身属于URL的特殊字符进行编码,例如冒号、正斜杠、问号、井号
const encodeURL = encodeURI(url);
console.log(encodeURL); // https://zjgyb.github.io/CSS-animate1.html%20#input-radio
console.log(decodeURI(encodeURL)); // https://zjgyb.github.io/CSS-animate1.html #input-radio

// 对它发现的任何非标准字符进行编码
const encodeCom = encodeURIComponent(url);
console.log(encodeCom); // https%3A%2F%2Fzjgyb.github.io%2FCSS-animate1.html%23input-radio
console.log(decodeURIComponent(encodeCom)); //  "https://zjgyb.github.io/CSS-animate1.html #input-radio"
复制代码
  1. 内置的属性DateArrayFunction...这些就不展开了

Math相关

Math属性

console.log(Math.E); // 2.718...
console.log(Math.PI); // 3.141...
复制代码

Math方法

Min & Max

Math.min(1, 3, 4, 0); // 0
Math.max(1, 3, 4, 0); // 4
复制代码

CeilFloorRound & Trunc

console.log(Math.ceil(1.5)); // 2
console.log(Math.floor(1.5)); // 1

// 四舍五入
console.log(Math.round(1.5)); // 2
// 去除一个数的小数部分,负数是表现为ceil,正数表现为Floor
console.log(Math.floor(-2.4)); // -3
console.log(Math.trunc(-2.4)); // -2
复制代码

Random

function selectFrom(lower, upper) {
  const choices = upper - lower + 1;
  return Math.floor(Math.random() * choices + lower);
}

const num = selectFrom(1, 10);
console.log(num); // 1-10之间
复制代码

Abs

console.log(Math.abs(-2.4)); // 2.4
复制代码

总结

如有错误,敬请指出。

参考文章

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改