首页 > 其他分享 >不积跬步,无以至千里【3】【js-1】

不积跬步,无以至千里【3】【js-1】

时间:2022-12-13 16:58:06浏览次数:59  
标签:构造函数 函数 对象 数据类型 无以至千里 js 执行 不积跬步 变量

from:https://articles.zsxq.com/id_x4esh7nnukh7.html

 

1. 数据类型(原始数据类型和引用数据类型,堆栈内存),数据类型检测和数据类型转换

2. 数组常用方法、对象常用方法

3. 类数组和数组的区别和转换,数组的检测方式,数组去重和排序

4. 函数执行机制和执行上下文,执行上下文栈(普通函数,立即执行函数,箭头函数、构造函数)

5. 闭包作用域(变量提升,arguments, 作用域与作用域链,闭包的应用场景,闭包优缺点)

6. 内存泄漏和垃圾回收机制

7. this指向的规则(call/bind/apply的使用)

8. new和构造函数

9. 原型与原型链的理解

10. 继承实现的方式和区别?

11. 深拷贝与浅拷贝

12. 事件循环机制(任务队列,微任务,宏任务,同步,异步,进程和线程,浏览器线程)

13. JS异步解决方案(回调函数、Promise、Generator、async、定时器)

14. DOM选择器

15. 常见DOM操作(增,删,改)

16. 事件流的过程(事件冒泡和事件捕获)、事件处理程序(DOM0级事件处理程序和DOM2级事件处理程序)、事件对象、事件委托

 

 

1. 数据类型(原始数据类型和引用数据类型,堆栈内存),数据类型检测和数据类型转换

1.1、类型分类

a、基本数据类型/简单数据类型/值类型

b、引用数据类型/复杂数据类型(统称为Object)

1.2、类型检测

a、typeof

适用于精确检测除null之外的简单数据类型  操作符返回一个字符串,表示未经计算的操作数的类型

b、instanceof :xxx instanceof constructor

适用于精准检测引用数据类型

可以正确判断对象的类型,用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上,object instanceof constructor,object为实例对象,constructor为构造函数

c、Object.prototype.toString.call()

调用该方法,统一返回格式“[object Xxx]”的字符串

d、typeof与instanceof区别

typeof会返回一个变量的基本类型,instanceof返回的是一个布尔值
instanceof 可以准确地判断复杂引用数据类型,但是不能正确判断基础数据类型
typeof虽然可以判断基础数据类型(null 除外),但是引用数据类型中,除了function 类型以外,其他的也无法判断

 

1.3、类型转换

a、转换为字符串类型
变量.toString()
String(变量)
隐式转换:加号拼接字符串:【变量 + ‘’ 】


b、转换为数字类型
parseInt(变量):将string类型转换成整数数值型
parseFloat(变量):将string类型转换成浮点数数值型
Number(变量)
隐式转换:利用-、*、/【变量 - 0、变量 * 1 、变量 / 1】


c、转换为布尔类型
Boolean(变量):Boolean(‘true’)

 

2. 数组常用方法、对象常用方法

https://blog.csdn.net/qq_51090530/article/details/124850847

3. 类数组和数组的区别和转换,数组的检测方式,数组去重和排序

3.1、区别及转换

https://blog.csdn.net/qq_37635012/article/details/106195211

3.2、检测

https://blog.csdn.net/weixin_43299180/article/details/110916582

3.3、去重

[...new Set(arr)]

Array.from(new Set(arr))

3.4、排序 

sort

 

4. 函数执行机制和执行上下文,执行上下文栈(普通函数,立即执行函数,箭头函数、构造函数)

4.1、执行机制

https://www.jianshu.com/p/db019979ae22

4.2、执行上下文,执行上下文栈

https://blog.csdn.net/weixin_45602227/article/details/119523367

https://www.cnblogs.com/fundebug/p/understand-javascript-context-and-stack.html

5. 闭包作用域(变量提升,arguments, 作用域与作用域链,闭包的应用场景,闭包优缺点)

5.1、闭包

a、生成条件

高阶函数是对其它函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出。

也就是嵌套函数

b、概念

闭包指有权访问另一个函数作用域中变量的函数。简单理解就是一个作用域可以访问另一个函数内部的局部变量。

c、作用

延伸了变量的作用范围

 

5.2、作用域与作用域链

 

6. 内存泄漏和垃圾回收机制

6.1、内存泄漏

无法垃圾回收就是内存泄漏,哪些情况会导致内存泄漏:

a、意外的全局变量
由于使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收
b、被遗忘的计时器或回调函数
设置了 setInterval 定时器,而忘记取消它,如果循环函数有对外部变量的引用的话,那么这个变量会被一直留在内存中,而无法被回收
c、脱离 DOM 的引用
获取一个 DOM 元素的引用,而后面这个元素被删除,由于一直保留了对这个元素的引用,所以它也无法被回收
d、闭包
不合理的使用闭包,从而导致某些变量一直被留在内存当中

 

6.2、GC机制

a、垃圾回收的概念

垃圾回收:JavaScript代码运行时,需要分配内存空间来储存变量和值。当变量不在参与运行时,就需要系统收回被占用的内存空间,这就是垃圾回收。

b、回收机制

--- Javascript 具有自动垃圾回收机制,会定期对那些不再使用的变量、对象所占用的内存进行释放,原理就是找到不再使用的变量,然后释放掉其占用的内存。
---JavaScript中存在两种变量:局部变量和全局变量。全局变量的生命周期会持续要页面卸载;

而局部变量声明在函数中,它的生命周期从函数执行开始,直到函数执行结束,在这个过程中,局部变量会在堆或栈中存储它们的值,当函数执行结束后,这些局部变量不再被使用,它们所占有的空间就会被释放。
---当局部变量被外部函数使用时,其中一种情况就是闭包,在函数执行结束后,函数外部的变量依然指向函数内部的局部变量,此时局部变量依然在被使用,所以不会回收。

 

c、回收方式

标记清除、引用计数

 

d、减少垃圾回收:虽然浏览器可以进行垃圾自动回收,但是当代码比较复杂时,垃圾回收所带来的代价比较大,所以应该尽量减少垃圾回收

--对数组进行优化
在清空一个数组时,最简单的方法就是给其赋值为[ ],但是与此同时会创建一个新的空对象,可以将数组的长度设置为0,

以此来达到清空数组的目的
--对object进行优化
对象尽量复用,对于不再使用的对象,就将其设置为null,尽快被回收
--对函数进行优化
在循环中的函数表达式,如果可以复用,尽量放在函数的外面

 

7. this指向的规则(call/bind/apply的使用)

7.1、this指向

this的指向,是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同,一般指向我们的调用者。

this指向分类:
a、普通函数
window
b、构造函数
实例对象,原型对象里面的方法也指向实例对象
c、对象方法
该方法所属对象
注:若对象中的方法为普通函数写法,则this指向该方法所属对象,若为箭头函数,则this指向为window
d、事件绑定函数
绑定事件对象
e、定时器
window
f、立即执行函数
window
g、箭头函数
外层作用域中的this(且this指向不可改变)

7.2、对this对象的理解

apply 、 call 和 bind 调用模式,这三个方法都可以改变指定调用函数的 this 指向。

--apply 方法接收两个参数:一个是 this 绑定的对象,一个是参数数组。

--call 方法接收的参数,第一个是 this 绑定的对象,后面的其余参数是传入函数执行的参数。也就是说,在使用 call() 方法时,传递给函数的参数必须逐个列举出来。

--bind 方法通过传入一个对象,返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了使用 new 时会被改变,其他情况下都不会改变。

7.3、call() 和 apply() 的区别

它们的作用一模一样,区别仅在于传入参数的形式的不同。
● apply 接受两个参数,第一个参数指定了函数体内 this 对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可以为类数组,apply 方法把这个集合中的元素作为参数传递给被调用的函数。
● call 传入的参数数量不固定,跟 apply 相同的是,第一个参数也是代表函数体内的 this 指向,从第二个参数开始往后,每个参数被依次传入函数。

 

8. new和构造函数

8.1、new

new操作符的执行过程:
(1)首先创建了一个新的空对象(创建一个新的内存空间)
(2)设置原型,将对象的原型设置为函数的 prototype 对象。
(3)让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性)
(4)返回新对象(所以构造函数不需要return)

8.2、构造函数

构造函数 ,是一种特殊的方法。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,

总与new运算符一起使用在创建对象的语句中。

特别的一个类可以有多个构造函数 ,可根据其参数个数的不同或参数类型的不同来区分它们 即构造函数的重载

 

9. 原型与原型链的理解

 

 

10. 继承实现的方式和区别?

10.1、继承

构造函数、prototype原型链继承、类继承(extends+super)

11. 深拷贝与浅拷贝

针对引用型数据 

https://blog.csdn.net/SSophia/article/details/123964733

12. 事件循环机制(任务队列,微任务,宏任务,同步,异步,进程和线程,浏览器线程)

12.1、JS是单线程,也就是说,同一时间只能做一件事。

同步(按顺序来):
同步任务:同步任务都在主流程上执行,形成一个执行栈。
异步(同时进行):
异步任务:JS的异步是通过回调函数实现的。异步任务相关回调函数添加到任务队列中(任务队列也称消息队列)。一般而言,异步任务有三种类型:
普通事件,如click、resize等
资源加载,如load、error等
定时器,包括setTimeout、setInterval等。

12.2、JS执行机制--Event Loop【事件循环】

a、先执行执行栈中的同步任务;

b、异步任务(回调函数)放入任务队列中;

c、一旦执行栈中的所有同步任务执行完毕,系统会按次序取任务队列中的异步任务,

于是被读取的异步任务结束等待状态,进入执行栈,开始执行。

 

 

 

13. JS异步解决方案(回调函数、Promise、Generator、async、定时器) 

a、回调函数的方式
使用回调函数的方式有一个缺点是,多个回调函数嵌套的时候会造成回调函数地狱,上下两层的回调函数间的代码耦合度太高,不利于代码的可维护
b、Promise的方式
使用 Promise 的方式可以将嵌套的回调函数作为链式调用。但是使用这种方法,有时会造成多个 then 的链式调用,可能会造成代码的语义不够明确
c、generator的方式
它可以在函数的执行过程中,将函数的执行权转移出去,在函数外部还可以将执行权转移回来。

当遇到异步函数执行的时候,将函数执行权转移出去,当异步函数执行完毕时再将执行权给转移回来。

因此在 generator 内部对于异步操作的方式,可以以同步的顺序来书写。使用这种方式需要考虑的问题是何时将函数的控制权转移回来,因此需要有一个自动执行 generator 的机制,比如说 co 模块等方式来实现 generator 的自动执行
d、async函数的方式
async 函数是 generator 和 promise 实现的一个自动执行的语法糖,它内部自带执行器,当函数内部执行到一个 await 语句的时候,如果语句返回一个 promise 对象,那么函数将会等待 promise 对象的状态变为 resolve 后再继续向下执行。因此可以将异步逻辑,转化为同步的顺序来书写,并且这个函数可以自动执行

 

14. DOM选择器

14.1、DOM树

 

 

15. 常见DOM操作(增,删,改)

 

16. 事件流的过程(事件冒泡和事件捕获)、事件处理程序(DOM0级事件处理程序和DOM2级事件处理程序)、事件对象、事件委托

16.1、事件对象

a、

b、

 

c、 

 

d、

 

16.2、事件流

事件流描述的是从页面中接收事件的顺序。事件发生会在元素节点之间按照特定的顺序传播,这个传播过程就是DOM事件流。

 

 

16.3、事件委托【事件冒泡应用】

a、原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理,通过e.target影响设置每个子节点。

b、作用:只操作了一次DOM,提高了程序的性能

 

标签:构造函数,函数,对象,数据类型,无以至千里,js,执行,不积跬步,变量
From: https://www.cnblogs.com/gs-top/p/16953042.html

相关文章

  • js判断数据类型的五种方法
    1.typeof可以判断数据类型,它返回表示数据类型的字符串(返回结果只能包括number,boolean,string,function,object,undefined);可以使用typeof判断变量是否存在(如if(typeofa!......
  • 关于在文章中插入js函数
    开始使用博客园的时候,还是很不熟练的,便操作边写,接着写了一半,发现结果行不通,很郁闷又不想删除,于是想着使用js函数隐藏内容。花了很长时间查资料,有很多方案,可能是我......
  • js 实现退拽效果
    单个元素拖拽,不随页面滚动css部分body{height:2000px;}div{width:150px;height:150px;cursor:move;position:fixed;top:50px;color:#fff;box-sizing:border-box;z......
  • Go 结构体与 JSON 之间的转换
    耐心和持久胜过激烈和狂热。哈喽大家好,我是陈明勇,今天分享的内容是Go结构体与JSON之间的转换。如果本文对你有帮助,不妨点个赞,如果你是Go语言初学者,不妨点个关注,一起成......
  • js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
    1、强制类型转换Number1.1代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>强制类型Number</title><styletype="text/css"></style>......
  • thinkphp6 json(captcha())为空
    首先:composerrequiretopthink/think-captchav3.0.8  把这张图片下载,后缀名png改成zip,解压到:vendor/topthink ......
  • python json into xlsx
    #--coding:utf-8--**#+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++#pipinstallpandas#pipinstallopenpyxl####http://192:8090/......
  • js字符串转字节stringToByte
    functionstringToByte(str){varlen,c;len=str.length;varbytes=[];for(vari=0;i<len;i++){c=str.charCodeAt(i);......
  • Cookie&jsp入门
    会话技术1,会话:一次会话中包含多次请求和响应一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止。2,功能:在一次会话范围内多次请求间共享数据。3,方式:1,......
  • HTML Js
    HTML<noscript>标签HTML <noscript> 标签定义了替代内容,这些内容将显示给在浏览器中禁用了脚本或浏览器不支持脚本的用户:<script>document.getElementById("demo")......