JavaScript变量声明如何提升

这篇文章主要讲解了“JavaScript变量声明如何提升”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript变量声明如何提升”吧！一个变量只定义但没有赋初值，默认值是 undefined定义变量时必须写var（不用var定义，而直接将值赋给它，随不引发报错，但会产生作用域问题）你可以提前使用一个稍后才声明的变量，而不会引发异常再执行所有代码前，js有预解析阶段，会预读所有变量的定义注意：变量声明提升只提升定义不提升值基本数据类型当我们需要将对象销毁、数组销毁或者删除事件监听时、通常将他们设置为nullundefined既是值又是一种类型，这种类型只有它自己一个值字符串常用方法substring(a, b) 从a开始到b结束的子串，不包括b处；如果省略第二个参数，返回的子串会一直到字符串的结尾，若a > b，会自动调整为小数在前substr(a, b) 从a开始长度为b的子串；如果省略第二个参数，返回的子串会一直到字符串的结尾；a可以是负数，表示倒数位置slice(a, b) 从a开始到b结束的子串，不包括b处；两个参数都可以是负数；a必须小于b，否则没有结果（空串）所有数字部分大小、不分整浮、不分正负，都是数字类型较大或较小数（绝对值较小）可以写成科学计数法3e8就是3^8二进制数值以0b开头，八进制以0开头，十六进制以0x开头NaN，not a number，即“不是一个数”，但它是一个数字类型的值（数学运算中，若结果不能得到数字，结果往往都是NaN，NaN == NaN结果为false）Infinity无穷大或无穷小NumberStringBooleanUndefinedNull复杂数据类型ObjectArrayFunctionRegExpDateMapSet……可以用来检测值或变量的类型使用**Number()**函数**parseInt()**函数将字符串转为整数将自动截掉第一个非数字字符之后的所有字符**parseFloat()**函数将字符串转为浮点数自动截掉第一个非数字字符、非小数点之后的所有字符**String()**函数变成“长得相同”的字符串。科学计数法和非10进制数字会转为10进制的值**Boolean()**函数**prompt()**函数函数弹出输入框如果参与数学运算的某操作数不是数字型，那么JavaScript会自动将此操作数转换位数字型隐式转换的本质是内部调用Number()函数**isNaN()**函数判断变量值是否为NaN但isNaN()也不好用，它的机理是：只要该变量传入Number()的执行结果是NaN，则isNaN()函数都会得到truea && b a真，值为b；a假，值为aa||b a真，值为a，a假，值为b逻辑运算优先级：非 –> 与 –> 或综合运算运算顺序：非 –> 数学运算 –> 关系运算 –> 逻辑运算随机数函数Math.random()得到[a, b]区间的整数，公式为 parseInt(Math.random() * (b – a + 1)) + a;下标访问越界时返回undefinedArray.isArray()方法可以用来检测数组函数定义函数声明的提升函数优先提升实参与形参个数不同实参个数多于形参，没有形参接收它实参个数少于形参，没有接收到实参的形参值为undefinedarguments 类数组对象函数内arguments表示它接收到的实参列表，它是一个类数组对象类数组对象：所有属性均从0开始的自然数序列，并且有length属性，和数组类似可以用方括号书写下标访问对象的某个属性值，但不能调用数组的方法var声明与省略在函数外，用var声明的变量为全局变量，不用var声明的变量为全局变量在函数中，用var声明的变量为局部变量，不用var声明的变量为全局变量同为全局变量，同为window对象的其中一个属性，用var声明的变量不可以删除，不用var声明的变量可以删除！返回值若函数没有返回值，则对它打印的结果是undefinedsort(a, b)方法这个函数中的a、b分别表示数组中靠前和靠后的项，如果需要将它们交换位置，则返回任意正数；否则就返回负数变量赋值数组深度克隆局部函数定义在一个函数内部的函数是局部函数只能在函数内部调用作用域链在函数嵌套中，变量会从内到外逐层寻找它的定义闭包闭包是函数本身和该函数声明时所处的环境状态的组合函数能够”记忆住“其定义时所处的环境，即使函数不在其定义的环境中被调用，也能访问定义时所处环境的变量在js中，每次创建函数时都会创建闭包，但是闭包特性往往需要将函数”换一个地方“执行，才能被观察出来闭包的功能：记忆性：当闭包产生时，函数所处环境的状态会始终保持在内存中，不会在外层函数调用后被自动清除。模拟私有变量注意：不能滥用闭包，否则会造成网页的性能问题，严重时可能导致内存泄漏。立即调用函数IIFE特殊写法，一旦被定义，就立即被调用函数必须转为函数表达式才能被调用可以用来给变量赋值在一些场合（如for循环中）将全局变量变为局部变量，语法更紧凑解决方法：nodeType常用属性值节点的nodeType属性可以显示这个节点具体的类型和document对象访问元素节点主要依靠document对象几乎所有DOM的功能都被封装到了document对象中document对象也表示整个HTML文档，它是DOM节点树的根访问元素节点的常用方法document.getElementById()如果页面上有相同id的元素，则只能得到第一个我是一个盒子我是一个段落getElementsByTagName()数组方便遍历，从而可以批量操控元素节点即使页面上只有一个指定标签名的节点，也将得到长度为1的数组任何一个节点元素也可以调用getElementsByTagName()方法，从而的到其内部的某种类的元素节点段落段落段落段落getElementsByClassName()盒子盒子盒子盒子querySelector()该方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素
段落段落段落段落querySelectAll()即使页面上只有一个符合选择器的节点，也将得到长度为1的数组延迟运行使用window.onload = function() {}事件（给window对象添加事件监听，onload表示页面都加载完毕了），使页面加载完毕后，再执行指定的代码节点的关系注意：文本节点也属于节点，所以我们一般情况下会排除文本节点的干扰（用只考虑元素节点）书写常见节点关系函数
段落段落段落段落改变元素节点中的内容改变元素节点中的内容可以使用两个相关属性innerHTML能以HTML语法设置节点中的内容innerText只能以纯文本的形式设置节点中的内容改变元素节点的CSS样式相当于在设置行内style属性改变元素节点的HTML属性标准的W3C属性，如src、href等，只需直接打点进行更改即可不符合W3C标准的属性，要使用setAttribute()和getAttribute()来设置、读取节点的创建document.createElement()方法用于创建一个指定tagname的HTML元素新创建出的节点是”孤儿节点“，并没有被挂载到DOM树上，无法看见他必须继续使用appendChild() 或 insertBefore() 方法将孤儿节点插入到DOM树上任何已经在DOM树上的节点，都可以调用appendChild() 方法，它可以将孤儿节点挂载到他的内部，成为它的最后一个子节点任何已经在DOM树上的节点，都可以调用insertBefore() 方法，它可以将孤儿节点挂载到它的内部，成为它的”标杆子节点“之前的节点移动节点如果将已经挂载到DOM树上的节点成为appendChild()或者insertBefore()的参数，这个节点将会被移动删除节点removeChild() 方法从DOM中删除一个子节点克隆节点cloneNode()方法可以克隆节点，克隆出的节点是”孤儿节点“参数是boolean类型，表示是否采用深度克隆，若为true，则该节点的所有后代节点也都会被克隆，若为false，则只克隆该节点本身事件常见的鼠标事件监听onmouseenter不冒泡，onmouseover冒泡常见的键盘事件监听常见的表单事件监听常见的页面事件监听当盒子嵌套时事件监听的执行顺序

事件传播事件的传播是：先从外到内，然后再从内到外（最内层不是先捕获再冒泡，而是根据书写代码顺序决定。同名盒子同阶段与顺序有关。如果给元素设置相同的两个或多个同名事件，则DOM0级写法后面写的会覆盖先写的；而DOM2级会按顺序执行）onxxxx（DOM0级事件监听）只能监听冒泡阶段，所以观察出来的结果是从内到外addEventListener()方法（DOM2级事件监听）事件对象事件处理函数提供一个形式参数，它是一个对象，封装了本次事件的细节这个参数通常用单词event或字母e来表示对象相关属性鼠标位置相关属性触发这次事件时鼠标的位置的属性e.charCode和e.keyCode属性e.charCode属性通常用于onkeypress事件中，表示用户输入的字符的“字符码”e.keyCode属性通常用于onkeydown和onkeyup事件中，表示用户按下的按键的“键码”阻止默认事件e.preventDefault()方法用来阻止事件产生的“默认动作”e.stopPropagation()方法用来阻止事件继续传播批量添加事件监听性能问题每一个事件监听注册都会消耗一定的系统内存，而批量添加事件会导致监听数量太多，内存消耗会很大事件委托每一个事件监听注册都会消耗一定的系统内存，而批量添加事件会导致监听数量太多，内存消耗会很大（当有大量类似元素需要批量添加事件监听时，使用事件委托可以减少内存开销）利用事件冒泡机制，将后代元素事件委托给祖先元素注意：不能委托不冒泡的事件给祖先元素当有动态元素节点上树时，使用事件委托可以让新上树的元素具有事件监听相关属性定时器setInterval()函数可以重复调用一个函数，在每次调用之间具有固定的时间间隔清除定时器clearInterval() 函数可以清除一个定时器延时器setTimeout() 函数可以设置一个延时器，当指定时间到了之后，会执行函数一次，不再重复执行异步异步： 不会阻塞CPU继续执行其他语句，当异步完成时，会执行 ”回调函数“（callback）setInterval() 和 setTimeout() 是两个异步语句函数节流一个函数执行一次后，只有大于设定的执行周期后才允许执行第二次BOM（Browser Object Model，浏览器对象模型）是JS与浏览器窗口交互的接口ｗindow对象window对象是当前 js 脚本运行所处的窗口，而这个窗口中包含DOM结构，window.document属性就是document对象在有标签页功能的浏览器中，每个标签都拥有自己的window对象；也就是说，同一个窗口的标签页之间不会共享一个window对象全局变量会成为window对象的属性这意味着多个js文件之间是共享全局作用域的，即js文件没有作用域隔离功能内置函数普遍是window的方法如setInterval()、alert()等内置函数，普遍是window的方法窗口尺寸相关属性获得不包含滚动条的窗口宽度，要用document.documentElement.clientWidthresize事件在窗口大小改变之后，就会触发resize事件，可以使用window.onresize或者window.addEventListener(‘resize’)来绑定事件处理函数已卷动高度window.scrollY属性表示在垂直方向已滚动的像素值document.documentElement.scrollTop属性也表示窗口卷动高度为了更好的浏览器兼容行，通常将两个一起写document.documentElement.scrollTop不是只读的，而window.scrollY是只读的scroll事件在窗口被卷动之后，就会触发scroll事件，可以使用window.onscroll或者window.addEventListener(‘scroll’)来绑定事件处理函数Navigator对象window.navigator属性可以检索navigator对象，它内部含有用户此次活动的浏览器的相关属性和标识History对象window.history 对象提供了操作浏览器会话历史的接口常用的操作就是模拟浏览器回退按钮Location对象window.location 标识当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转重新加载当前页面可以调用location的reload方法以重新加载当前页面，参数true表示从服务器强制加载GET 请求查询参数window.location.search 属性即为当前浏览器的 GET 请求查询参数offsetTops属性该属性表示此元素到定位祖先元素的垂直距离定位祖先元素：在祖先中，离自己最近的且拥有定位属性的元素使用这个属性的时候，所有祖先元素不要有定位对象（object）是”键值对“的集合，表示属性和值的映射关系注意：如果对象的属性键名不符合js标识符命名规范，则这个键名必须用引号包裹如果属性名不符合js标识符命名规范，则必须用方括号的写法来访问如果属性名以变量形式存储，则必须使用方括号形式对象的创建删除属性使用delete操作符删除某个对象的属性对象的方法如果某个属性值是函数，则它被称为对象的方法对象的遍历对象的遍历需要使用for…in…循环，可是遍历对象的每个键对象的深克隆函数的上下文函数中可以使用this关键字，它表示函数的上下文同一个函数，用不同的形式调用它，则函数的上下文不同函数只有被调用，他的上下文才能被确定相关规则区别：new操作符调用函数js规定，使用new操作符调用函数会进行“四步走”：函数体内会自动创建出一个空白对象函数的上下文（this）会指向这个对象函数体内的语句会执行函数会自动返回上下文对象，即使函数没有return语句构造函数将之前的函数进行一小步改进用new调用一个函数，这个函数就被称为“构造函数”，任何函数都可以是构造函数，只需要用new调用它构造函数用来“构造新对象”，它内部的语句将为新对象添加若干属性和方法，完成对象的初始化为对象添加方法prototype任何函数都有prototype属性，prototype是英语”原型“的意思，prototype属性值是个对象，它默认拥有constructor属性指回函数
构造函数的prototype是实例的原型
原型链查找实例可以打点访问它的原型的属性和方法，这被成为”原型链查找“hasOwnProperty()该方法可以检查对象是否真正”自己拥有“某属性或者方法inin运算符只能检查某个属性或方法是否可以被对象访问，不能检查是否是自己的属性或方法在prototype上添加方法将方法直接添加到实例身上的缺点：每个实例和每个实例的方法函数都是内存中不同的函数，造成了内存的浪费，可以通过将方法写道prototype上来解决。原型链的终点数组的原型链继承借助原型链实现继承让Student的prototype属性指向父类的实例，然后给Student的prototype添加Student的方法通过原型链实现继承免费云主机、域名的问题如果父类的属性中有引用类型值，则这个属性会被所有子类的实例共享子类的构造函数中，往往需要重复定义很多超类定义过的属性。即，子类的构造函数写的不够优雅借助构造函数为了解决原型中包含引用类型值所带来问题和子类构造函数不优雅的问题，通常使用一种叫做 “借助构造函数” 的技术，也被称为 “伪造对象” 或 “经典继承”在子类构造函数的内部调用超类的构造函数，但要注意使用call()绑定上下文组合继承将借用原型链和借用构造函数的技术组合到一起，叫做组合继承，也叫做伪经典继承缺点：组合继承最大的问题就是无论在什么情况下，都会调用两次超类的构造函数：一次是在创建子类原型的时候，另一次是在子类构造函数的内部。原型式继承Object.create()方法，可以根据指定的对象为原型创建出新对象(IE9)在没有必要 “兴师动众” 的创建构造函数，而只是想让新对象与现有对象 “类似” 的情况下，使用Object.create() 即可胜任，称为原型式继承Object.create() 的兼容性写法在低版本浏览器中实现Object.create()寄生式继承编写一个函数，它可以 “增强对象”，只要把对象传入这个函数，这个函数将以此对象为 “基础” 创建出新对象，并为新对象赋予新的预置方法缺点：由于不能做到函数复用而降低效率（方法没有写到prototype上）寄生组合式继承通过借用构造函数来继承属性，通过原型链的混成形式来继承方法instanceof运算符用来检测 ”某对象是不是某个类的实例“内置构造函数JavaScript有很多内置构造函数，比如Array就是数组类型的构造函数，Function就是函数类型的构造函数，Object就是对象类型的构造函数内置构造函数非常有用，所有该类型的方法都是定义在它的内置构造函数的prototype上的，我们可以给这个对象添加新的方法，从而拓展某些类型的功能内置构造函数的关系Object.prototype是万物原型链的终点，JavaScript中函数数组皆为对象。任何函数都可以看做是Function “new出来的”，Object是函数，所以它也是Function类的对象包装类包装类的目的就是为了让基本类型值可以从它们的构造函数的prototype上获得方法Math对象Date对象常见方法时间戳通过getTime()方法或者Date.parse()函数可以将日期对象变为时间戳通过new Date(时间戳)的写法，可以将时间戳变为日期对象正则表达式正则表达式（regular expression）描述了字符串的 “构成模式”，经常被用于检查字符串是否符合预定的格式要求
创建正则表达式使用/内容/的语法形式new RegExp(‘内容’)的形式元字符不管一个符号有没有特殊意义，都可以在其之前加上一个以确保它表达的是这个符号本身方括号表示法使用方括号，如[xyz]，可以创建一个字符集，表示匹配方括号中的任意字符使用短横-来指定一个字符范围，^表示否定量词修饰符也叫标志（flags），用于使用正则表达式实现高级搜索正则表达式相关方法字符串的相关正则方法感谢各位的阅读，以上就是“JavaScript变量声明如何提升”的内容了，经过本文的学习后，相信大家对JavaScript变量声明如何提升这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云技术，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: web前端怎么实现图片选择题特效

这篇文章主要介绍“web前端怎么实现图片选择题特效”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“web前端怎么实现图片选择题特效”文章能帮助大家解决问题。 抽象整体的实现思路如下MediaPipe Face Mesh是…