JavaScript 类和对象 window对象常见内置类JavaScript 类和对象 window对象常见内置类

JavaScript 类和对象 window对象常见内置类

前端 JavaScript ES5 学习目录

1. 认识 JavaScript

2. JavaScript 基础语法

3. JavaScript 变量数据类型运算操作符

4. JavaScript 逻辑运算符分支语句循环语句

5. JavaScript 函数作用域问题

6. JavaScript IIFE 面向对象函数中的this

7. JavaScript 类和对象 window对象常见内置类

8. JavaScript 数组基本使用 Date日期的使用

JavaScript 类和对象的思维方式

首先我们在前面讲解了如何使用我们的对象，但是只不过我们在开发中需要一个对象一个对象的进行书写？？
- 这个时候，我们就出现了其他的创建对象的方式，就是通过我们的构造函数这些来实现创建我们的对象
- 这个就是我们的批量的创建我们的对象，就可以实现提高我们的代码的复用性

使用函数来创建对象（这个就是工厂模式的创建对象）【一种设计模式】


/**
 * 实现通过我们的函数来创建对象
 * @param {String} name 
 * @param {Number} age 
 * @param {Function} method 
 * @returns 
 */
function CreatePerson(name, age, method) {
  var per = {}  // var per = new Object()
  per.name = name
  per.age = age
  per.method = method
  return per
}

var per1 = CreatePerson("juwenzhang", 18, function(){ console.log("我是一个方法") })
var per2 = CreatePerson("76433", 18, function(){ console.log("我是一个方法") })
var per3 = CreatePerson("水逆信封", 18, function(){ console.log("我是一个方法") })

console.log(per1.method(), per2.method(), per3.method())

首先的话就是先实现我们的在函数的内部创建一个空的对象，然后实现在这个空的对象中实现添加我们的一些属性或者方法
- 最后就是将我们的这个对象实现返回即可，这个就是使用函数来创建对象的基本的步骤

使用构造函数来实现创建对象
- 这个时候我们就会使用到我们的 new 操作符来实现创建我们的对象，使用了 new 操作符后我们发生的变化有：
  - 在内存中创建了一个新的空对象
  - 构造函数中的 this 是会指向新创建出来的对象
  - 然后实现执行我们的代码块中的代码（函数体代码）
  - 如果函数中没有返回一个对象，那么就直接返回一个新的对象
  - 这里的还会涉及到原型链的部分，后面详细做讲解
- ```
/**
 * 开始实现使用我们的javascript中的新的设计模式来实现创建我们的对象 new
 * @param {String} name 
 * @param {Number} age 
 * @param {Number} height 
 * @returns
 */
function Person(name, age, height) {
  this.name = name
  this.age = age
  this.height = height

  this.running = function() {
    console.log("我是一个方法running")
  }

  this.eating = function() {
    console.log("我是一个方法eating")
  }
}

// 开始实现使用我们的 new 操作符实现创建我们的对象： new 一个对象
var per1 = new Person("76433", 18, 170)
var per2 = new Person("水逆信封", 18, 170)
var per3 = new Person("juwenzhang", 18, 170)

console.log(per1, per2, per3)
```
- 具体的认识我们的构造函数
  - 构造函数也叫做我们的构造器（constructor）,在我们实现创建对象的时候就会自动的调用这个函数
  - 构造函数是存在于一个类中的方法，称之为构造方法
  - JavaScript 中，我们的构造函数实际上充当的就是其他语言中的类的角色
- ES5 和 ES6 实现定义我们的构造函数的方法比较
  - ES5 之前是通过的函数的形式（function）来实现的定义的构造函数（类），然后直接通过我们的 new 关键字来实现即可
  - ES6 就是实现的是通过我们的 class 来实现的定义一个类的，这个就和其他的编程语言形成了吻合

JavaScript 全局对象window(`宿主环境是浏览器`)

在我们的javascript 中，处于浏览器宿主环境中具有的全局对象是 window ,但是在node宿主环境中具有的全局对象是 global
这个时候可以回顾我们的变量的寻找规则
- 首先是在自己的作用域中实现寻找
- 如果自己的作用域中没有的话，就上升到上一层的作用域中实现我们的寻找
- 最后就是到全局对象 window|global 中实现寻找，这个里面没有的话，那就是报错咯
内置的一些函数的话：
- alert()
- console.log()
- prompt()
- 这些都是我们全局中的函数，同时全局中的一些函数我们都是可以直接实现我们的直接调用即可
- 或者通过 window 来实现调用： window.alert() | window.console.log()
- 只要是可以实现直接调用的，那么就是在我们的 window全局对象中的
- CSDN对window对象的总结

JavaScript 常见内置类

原始类型的包装类

这个意思就是表达的是我们的原始的一些数据类型的话也是可以实现调用一些方法的，这个就涉及到了我们的包装类的概念
就是可以实现的是一些基础的数据类型也是可以实现使用一些内置的方法的
默认的是我们的JavaScript是不可以实现使用我们的一些方法的，但是只不过通过我们的这个包装类型就实现了可以使用这些方法

var message = "hello world"   // 底层实现的代码是： message = new String("hello world")
var words = message.split(" ")
var length = words.length
console.log(length)  // 2

var num = 1.2342342  // num = new Number(1.2342342 )
num = num.toFixed(2)
console.log(num)  // 1.23

// ============================ 实质性的实现代码 ===============================
// 下面的代码是我们的 js 引擎自动实现的
var message = new String("hello eorld")
var words = message.split(" ")
console.log(words)

var num = new Number(1.2324234)
num = num.toFixed(2)
console.log(num)

包装类型含有： String Number Boolean Symbol BigInt

Number 类型常见的方法以及属性
- 常见的属性：
  - .MAX_VALUE 就是实现的是获取我们的最大值
  - .MIN_VALUE 就是实现的是获取我们的最小值
  - .MAX_SAFE_INTEGER 获取我们的最大的整数
  - .MIN_SAFE_INTEGER 获取我们的最小的整数`
  - ```
  console.dir(window.Number)
  console.log(window.Number.EPSILON)
  
  console.log(window.Number.MAX_SAFE_INTEGER)
  console.log(window.Number.MIN_SAFE_INTEGER)
  
  console.log(window.Number.MAX_VALUE)
  console.log(window.Number.MIN_VALUE)
  
  console.log(window.Number.POSITIVE_INFINITY)
  
  console.log(num.length)
```
- 常见的实例方法（instance）
  - toString(base)
    - base 就是表示的是我们的将数字转化为什么进制的数字，就是实现的是我们的将数字转化为字符串
    - 可以是我们的 2 4 8 16 10
  - toFixed(digits)
    - 就是实现的是将我们的小数实现转化为我们的含有某种精度的小数
  - ```
  var num = 12.1323423
  
  // 开始实现使用我们的 toString() 方法
  console.log(num.toString(2))  // 1100.0010000111100001001011110101101001100000100111101
  console.log(num.toString(16))  // c.21e12f5a609e8
  console.log(num.toString(8))  // 14.10360457264602364
  
  // 开始实现使用我们的 toFixed() 方法，就是实现的是用来格式化我们的数字
  console.log(num.toFixed(3))  // 12.132
```
- 常见的类（静态）方法
  - parseInt(num) 实现是将字符串或者数字转化为整数
  - paesrFloat(num) parseFloat 就是实现的是将字符串或者数字类型转化为小数
  - isNaN(num) 实现的是一个数字是否是数字
  - ```
  var num = 12.1323423
  
  // parseFloat 就是实现的是将字符串或者数字类型转化为小数
  console.log(parseFloat(num))
  // 实现是将字符串或者数字转化为整数
  console.log(parseInt(num))
  // 实现的是一个数字是否是数字
  console.log(isNaN(num))
```
- 实现查看我们全局中的 Number
  - ```
  console.dir(Number)
  
  console.log(window.parseInt === window.Number.parseInt)  // true
```
- 首先我们在表面的就是我们的类方法， prototype 里面的就是我们的实例方法
  - MDN文档的描述是静态方法和实例方法，静态方法就是在定义类本身的时候书写的函数那些
  - 但是实例方法的话就是只有通过我们的实例对象才可以实现调用
- MDN文档阅读推荐

`Math 对象`的使用

Math 就是我们的一个内置的对象，里面含有很多的关于数学的一些方法
Math 中的一些属性
- Math.PI 就是数学中的圆周率

Math 对象中的一些方法

Math.floor 就是实现的是我们的向下取整
Math.ceil 就是实现的是向上取整
Math.round 实现的就是我们的四舍五入
Math.random 就是实现的是我们的随机生成 0~1 的随机数（[0, 1)）
Math.pow(x, y) 就是实现的是我们的返回x的y次幂

var num = 3.55

console.dir(Math)

// 开始实现的我们的对数据进行一些基本的四舍五入的操作
console.log(Math.floor(num))  // 向下取整
console.log(Math.ceil(num))  // 向上取整
console.log(Math.round(num))  // 四舍五入

// 获取一个数字的绝对值
console.log(Math.abs(num))

// 开始实现生成我们的随机的数字
console.log(Math.random())  // [0, 1)
console.log(Math.random() * 45 + 5)  // 就是实现的是生成一个 [5, 50) 的随机数

MDN文档阅读

String 类型的使用

实际上的话，我们现在的开发中，经常实现的是对我们的字符串实现操作，而不是我们的纯数字

常见的使用场景有：

.length 就是实现的是我们的获取字符串的长度

var str = "hello world"

console.log(str.length)  // 开始实现获取我们的字符串的字符长度
console.log(str[10])  // 通过我们的index来实现获取字符，所以说就可以实现通过我们的for循环来遍历str
/*
  首先我们的前面对我们的对象的遍历就是通过的是我们的 for in 语法来实现获取其中的键
  但是现在的话我们实现的就是通过 for of 语法来实现获取我们的数组中的每一个值

  for...in... 就是实现的是我们的获取键
  for...of... 就是实现是直接获取我们的值

  数组是支持两种遍历方法的
  对象只是支持我们的 for...in... 遍历
*/
for(var item of str) {
  console.log(item)
}

修改字符串
- 首先我们需要注意的就是，我们的字符串类型的话是一个不可修改的数据类型
- 但是只不过为了实现修改我们的字符串，这个时候就需要我们的一些其他的方法了
- 实现将我们的字符实现转化为大写： toUpperCase()
- 或者说实现将我们的字符转化为小写: toLowerCase()
- ```
var str = "Hello World"

console.log(str.toUpperCase())  // HELLO WORLD
console.log(str.toLowerCase())  // hello world
```

查找字符串

就是在我们的实际的开发中可能会实现的是从一个字符串中实现查找是否含有其他的字符串
indexof(搜素的字符串, 搜素的位置) 【indexof(searchString, fromIndex)】

var str = "my name is juwenzhang"

const strSon = "juwenzhang"

// 开始使用我们的 ES5 来实现这个功能
// 含有的话就直接返回下标，不含有那就直接返回 -1
console.log(str.indexOf(strSon, 0))
var res = str.indexOf(strSon, 0)
if (res !== -1) {
  console.log("包含有字符串")
} else {
  console.log("不包含字符串")
}

// 开始实现对上面的代码实现简化: indexof
str.indexOf(strSon, 0) !== -1? console.log("包含有字符串"):  console.log("不包含字符串")


// 开始实现实现使用 ES6 中的方法来实现判断: 就是直接实现使用我们的 includes
str.includes(strSon) ? console.log("包含有字符串"):  console.log("不包含字符串")


// 判断一个字符串是否以什么开头没有  startsWith
str.startsWith(strSon) ? console.log("是的"): console.log("不是的")


// 开始实现我们的判断是否以什么结尾没有  endsWith
str.endsWith(strSon) ? console.log("是的"): console.log("不是的")


// replace 的使用，实现我们的转换字符串
var new_str = str.replace("juwenzhang", "76433")
console.log(new_str)

获取子字符串

slice(start, end)
substring(start, end)
substr(start, end)

var str = "my name is juwenzhang"

console.log(str.slice(4, 9))
console.log(str.substring(4, 9))

MDN文档阅读

注意，我们的前端的学习的话，多上 MDN 或者 W3C 就多上，这两个文档都是很适合我们的后续的自我学习的

JavaScript 类和对象 window对象 常见内置类

JavaScript 类和对象 window对象 常见内置类

JavaScript 类和对象的思维方式

JavaScript 全局对象window(宿主环境是浏览器)

JavaScript 常见内置类

原始类型的包装类

Number 类型常见的方法以及属性

Math 对象的使用

String 类型的使用

MDN文档阅读

JavaScript 类和对象 window对象常见内置类

JavaScript 类和对象 window对象常见内置类

JavaScript 全局对象window(`宿主环境是浏览器`)

`Math 对象`的使用