JS中期总结

  • Post author:
  • Post category:其他



目录


函数:已经封装好了的一段可以重复调用,并且实现某种功能的代码块


作用域


函数调用时,隐式的传入了两个参数(两个对象)


垃圾回收机制


闭包


构造函数


原型


this劫持


ar、let、const三者的区别:


string实例对象的API


Array实例对象常用API


遍历:将数组中的元素,每一个都访问一次!


函数:已经封装好了的一段可以重复调用,并且实现某种功能的代码块

– 1、封装好的

– 2、重复调用

– 3、实现某种功能或者目的

函数会涉及到的知识点比较多,但整体函数是不难的!

函数是多变的,单从名字(叫法)可以看出函数是多变的!

函数的其他叫法:

方法、匿名函数、回调函数、自执行函数、构造函数、全局函数、局部函数、箭头函数….

注意:函数在不同的情况,或者说不同的环境、不同的使用中,对其称呼是发生改变的!

作用域: var声明的变量以及function声明的函数在声明创建的时候,其作用域就已经确定了!

作用域

无函数,不作用域!

– 全局作用域;

– 函数作用域;

作用域的作用划分变量和函数的使用区域和执行环境!

函数调用时,隐式的传入了两个参数(两个对象)


this

arguments用于接受函数调用时所传入的所有的实参, arguments是一个类数组

this关键字:当函数被调用时,运行环境会自动向该函数隐式传入this对象

this的指向是变化的,在不同情况下函数的执行中,this的指向是不一样的

this 类似于语文上的 ‘这’ 代表一个代词

1、当函数作为普通函数调用执行时   函数名()或IIFE  函数的this指向的是window

2、当函数作为某个对象的方法进行调用时,该方法中的this指向的是调用者,而非持有者!

3、构造函数时this的指向是一个新创建的{}对象

全局作用域下也是存在this的 并且指向window这个顶层对象

垃圾回收机制

垃圾回收:JavaScript程序在运行的过程中,随着运行时间的增加,那么会相应的产生一些垃圾数据,垃圾回收机制主要是

定时的去清理这些垃圾数据,避免内存泄漏导致程序崩溃!

注意:垃圾回收这个动作不需要人为的去管控,它是由js引擎垃圾回收的模块负责

如何定义垃圾:

– 标记清除:假设所有的变量或者函数等其他数据,一开始就认为他们不是垃圾!当他们产生了某种变化后,就会被打上标记,标记为垃圾

– 引用计数:当引用型数据,没有再被任何引用时,引用链条为0的时候!就自动判定为垃圾数据

正常情况下:

– 全局作用域下的变量、函数在程序执行完毕后才会销毁

– 局部作用域下的变量、函数,当该局部作用域执行完了!结束后,就销毁对应的变量以及函数

– 引用数据当引用链条数量为0的时候,也会被销毁

小提示:

垃圾回收机制并不是JavaScript语言独有,很多编程语言都具备

– java、python、JavaScript

– c c++  人为的控制,人为的定期去是释放内存

闭包

正常情况下:局部作用域下声明变量或者函数,当该作用域中代码执行完毕后,该函数所声明的变量、函数就被销毁了

闭包:闭包就是当函数被嵌套声明时,并且该函数被直接或者间接返回或者赋值给某个全局变量!

那么这个时候js内部发生一些事情

– 1、函数的地址值被返回了

– 2、产生了一个特殊的对象,闭包 (在这个闭包它打包了该函数作用域链上的所有的变量以及函数)

构造函数

构造函数:构造函数本质上是去实例一个对象,构造对象的!

不同的构造函数,所实例的对象是不同的!类别是不同的!


构造函数与普通函数的不同:

1、构造函数主要目的不是去实现某个功能,主要是去实例化对象

2、构造函数中的this指向不同,this指向的是一个新创建的空对象 {}

3、构造函数一般不会单独执行,应该与new 配合执行

4、构造函数的返回值有所不同

-1)如果没有return语句,默认返回新创建的那个空对象

-2)如果有return语句:

情况1: 如果return返回的是基本数据类型,直接无视返回值,还是返回空对象

情况2: 如果return返回的是引用数据类型,则返回该引用数据类型!

注意:大部分情况下,构造函数是不写return的

5、 构造函数的首字母应该大写

原型


原型属性

,每一个对象身上都具备一个属性,该属性称作为原型属性!

原型属性有两类:

– 显式原型属性 (prototype)

注意:每一个函数都具备 prototype,并且还具备__proto__

– 隐式原型属性 (__proto__)

注意:每一个实例对象,都具备 __proto__


原型对象

:存放在prototype属性或者__proto__属性中的对象,称作为原型对象

prototype,存放在该属性中的对象称作为显式原型对象

__proto__,存放在该属性中的对象称作为隐式原型对象

显式原型对象(prototype)的作用:

– 1、当函数作为构造函数使用,该属性才发发挥作用,如果是普通函数执行,原型对象毫无作用

– 2、当函数作为构造函数时,会创建一个实列的空对象

创建好空对象后,就会把 prototype中指向的原型对象赋值给 空对象的__proto__属性中

这样被创建好的空对象就具备了自己的原型对象!

注意:自定义的构造函数中prototy属性指向的默认是一个{}空对象

原生js提供的构造函数中的prototype是提前定义好的,基本不会是一个空对象


原型链:

JavaScript通过每个实例对象上的__proto__隐式原型属性,将原型对象进行链接,在通过原型对象的原型属性

再进行链接,以此往复,直到最终的null,这样便形成了JavaScript中的原型链!

原型链的寻找一定是通过实例对象的 __proto__去寻找的!

this劫持

正常情况下this的指向规则:

1、在全局作用域下访问this,this是指向window

2、当函数以函数形式调用时,this是指向window

3、当函数以 IIFE形式调用时,this是指向window

4、当函数以方法的形式调用时,this指向的是调用者,而非持有者

5、当作为构造函数调用时,this指向一个空对象 {}

除了以上正确情况下this的指向外,还有一些非正常情况!

this的劫持:强行的人为改变this的指向!

实现this劫持的三种方式(基于三个方法):apply  call  bind

– apply 和 call 用法基本一致

唯一不同之处:

apply 接受 两个参数  1、对象  2、数组  将其余参数统一存放到该数组中

call  接受任意个参数 1、对象  其余参数就是正常的函数执行所需要的实参逗号分隔

– bind

将函数进行改造后,并重新返回,最终执行!

ar、let、const三者的区别:

var特点 :

1、不存在块级作用域(全局作用域、函数作用域)

2、可以进行变量声明的提升

3、可以在同一个作用域下声明同名的变量

4、可以改变值

5、不需要声明初始化(可以只声明,不赋值)

let特点:

1、具备块级作用域,(全局作用域、函数作用域)

2、变量会进行提升,但是存在‘暂时性死区’

3、可以任意的改变值

4、不可以在同一个作用域下声明同名的变量或者同名的函数

5、不需要声明初始化(可以只声明,不赋值)

const特点:

1、具备块级作用域(全局作用域、函数作用域)

2、变量会进行提升,但是存在‘暂时性死区’

3、声明的同时必须赋值

4、不可以在同一个作用域下声明同名的变量或者同名的函数

5、常量的值不能被改变

箭头函数,也是函数的一种!但是相比于其他的函数形式,它很特殊!

特殊:

1、写法特殊

2、不能作为构造函数使用

3、它不具备自己的this

4、箭头函数不具备自己的名字

1、当形参只有一个时,箭头函数的()可以省略,写法如下

注意:小括号()只有当形参个数为1时可以省略,其他情况都不可以省略

2、当箭头函数中的代码块语句,只有一句时 可以省略 {}

注意:当只有一句,并且省略了{},箭头函数就会将这一句表达式所执行的结果作为返回值返回  不能作为构造函数使用,因为箭头函数没有构造器

3、它不具备自己的this

箭头函数的this指向的是,该箭头函数被创建时,当时的作用域下的this

string实例对象的API


length 属性

获取字符串的长度


charAt方法

从一个字符串中返回指定位置的字符         语法: str.charAt([index])    []包裹的形参代表的是可选参数,不是必选  index是一个number类型          index默认值是0


charCodeAt方法

// 从一个字符串中返回指定索引下对应字符的编码

// 语法: str.charCodeAt([index])


indexOf 方法

// 从当前字符串的指定位置中查找第一个出现的特定的子串的位置索引,

// 如果查找成功 则放回该子串字符的首字符索引下标,如果未查找成功则返回 -1

//  语法: str.indexOf(searchValue[,fromIndex])

//  fromIndex默认值是0

//  注意:使用indexOf大部分情况不会传入fromIndex

//  注意:该方法是正向查找!


lastIndexOf 方法

// 从当前字符串的指定位置中查找第一个出现的特定的子串的位置索引,

// 如果查找成功 则放回该子串字符的首字符索引下标,如果未查找成功则返回 -1

//  语法: str.lastIndexOf(searValue[,fromIndex])

//  fromIndex默认值是0

//  注意:使用lastIndexOf大部分情况不会传入fromIndex

//  注意:该方法是反向查找!


incudes方法

// 判断当前字符串中有没有指定的某个子串,如果有则返回 true  没有则返回false


starsWith方法

// 判断当前字符串是否以某个指定字符串进行开头 根据情况返回 true 或者 false


endWith方法

// 判断当前字符串是否以某个指定字符串进行结尾 根据情况返回 true 或者 false


concat 方法

// 将一个或多个字符串与现有的字符串进行拼接,形成一个新字符串返回

// 注意:不会影响原字符串

// 注意:在性能优化下,如果需要实现字符串的合并 推荐使用 + 运算符!


split方法

// 使用指定的分隔符字符串,将一个string对象进行分割,形成一个字符串数组!

// split方法的返回值是一个 Array

// 注意:如果不传入指定的分隔符,那么则将原字符串一次性返回

//  split方法有两个参数   1、分隔符字符串  2、指定返回给数组元素个数


slice 方法

//  截取某个字符串中的一部分,并返回一个新的字符串,不会改变原字符串

//  slice方法两个参数 1、开始下标 2、结束下标(默认就是截取到最后)

//  注意:[beginIndex,endIndex)


subString 方法

// 返回一个字符串在开始索引到结束索引之间字符串

// 注意:不支持负数形式!如果为负数,无法进行截取则返回完整的字符串

// 左边右开的区间


toLowerCase  方法

// 将大写字母转换成小写字母


toUpperCase  方法

// 将小写字母转换成大写字母


去除字符串的空白字符

空白字符:空格  水平制表符tab  换行符  等

trim 去除字符串前后两端的空白符

trimStart 去除开头空白符

trimEnd  去除结尾空白符

Array实例对象常用API


length属性

// 返回或者设置数组的长度!注意:尽量不要手动的去设置数组的长度!容易造成稀疏数组的产生

数组访问元素  数组[下标值]  下标值是从0开始计数的!不能为负数

// 注意:如果访问的下标值大于等于数组的长度则返回 undefined

数组元素的修改  数组[下标值] = 表达式


at方法

通过指定的数值去返回对应元素!支持负数

//  语法规则: at(index)  index默认值是0\

// 如果index是负值,那么则从当前元素的后面开始计算!


push方法

// 对当前数组末尾添加一个或多个新元素!该方法改变原数组

// 返回值:数组最新的length值!


pop方法

// 删除当前数组中的最后一个元素,并返回! 也是修改原数组


unshift方法

// 对当前数组开始位置添加一个或多个新元素!该方法改变原数组


shift方法

// 删除当前数组中第一个元素,并返回! 也是修改原数组


reverse方法

// 将数组逆转


sort方法

排序

// 该方法是对数组中的元素进行排序,可接受参数,但是参数必须是函数(比较函数)

// 如果不传入比较函数,他会按照字符编码进行排序

// 比较函数 :函数体内部主要是做比较运算

比较函数有两个参数, a 第一个比较的元素  b 第二个比较的元素

//  大于0 升序   等于0 不变  小于0 降序


concat 方法

// 连接多个数组,返回一个新数组


join 方法

// 将数组中的元素进行合并,通过指定的分隔符! 合并后形成一个字符串并返回

// 语法规则:join(str)

// 默认情况 str为’,’


splice方法

// 通过该方法可以删除指定元素、修改指定元素、添加指定元素 任意位置

// 语法规则:splice(index,hm,elmt1,elmt2)

// 注意:如果省略hm,则将数组清空

// 返回值:被删除的元素数组

遍历:将数组中的元素,每一个都访问一次!


1、传统的数组遍历  for语句

// 特点:性能稳定、可以提前结束遍历的过程!


2、 forEach方法

// 语法规则: arr.forEach(callback(elment,index,thisArg))

// elment:代表当前数组中的元素

// indx:代表当前数组中元素的下标

// thisArg:接受回调this,  thisArg  ===》 arr

// 回调函数,一般采用箭头函数的写法!但是呢也可以使用function函数

// 注意:被传入的这个回调函数,每访问一次数组中的元素就被执行一次!

// forEach方法的返回值undefined

// forEach遍历数组整个过程不允许中断!


3、map方法 (不改变原数组)

// 语法:arr.map(callback(elment,index,thisArg))

// 该方法会遍历每一个数组元素

// 每遍历一个元素都会调用一次回调函数,并且将该回调函数的返回值,存放到一个新数组中,最终作为map方法的返回值、、、、、、、。整体返回

4、filter方法 (不改变原数组)

// 语法:arr.filter(callback(elment,index,thisArg))

// 每访问一次元素都会调用一次回调函数,如果该回调函数的返回值是true,那么将当前访问的元素保存到一个新数组,最终作为filter方法的返回值



版权声明:本文为m0_71884549原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。