南阳网站seo公司,网站商城建设6,郑州it培训机构有哪些,武进网站建设一、ES5 变量定义 1.在全局作用域中 this 其实就是window对象
scriptconsole.log(window this)
/script输出结果: true 2.在全局作用域中用var定义一个变量其实就相当于在window上定义了一个属性 例如: var name 孙悟空 其实就相当于执行了 win…一、ES5 变量定义 1.在全局作用域中 this 其实就是window对象
scriptconsole.log(window this)
/script输出结果: true 2.在全局作用域中用var定义一个变量其实就相当于在window上定义了一个属性 例如: var name 孙悟空 其实就相当于执行了 window.name 孙悟空 或者this.name 孙悟空
// 用var 定义一个变量其实就是在window上添加一个属性
var name 孙悟空
console.log(name)
console.log(window.name)
console.log(this.name)执行结果
孙悟空
孙悟空
孙悟空 3.变量提升 使用var声明变量会自动提升到函数作用域顶部 可以分为两种情况在全局作用域和在代码块或者方法中
script// name 变量是在下面定义的但是可以在上面使用 name 这个变量// 这是因为变量被提升到作用域的最上面console.log(name)console.log(window.name)console.log(this.name)var name 孙悟空/script运行结果:
空白
空白
空白可以看到这里直接相当于在最上面定义了 var name 但是没有初始化我感觉因该是输出undefined
但是这里啥也没输出但是没有报错
这里测试的时候千万不要刷新页面刷新就相当于前一次把name放入window对象中
function printName(){console.log(name)
}printName()
var name 孙悟空运行结果:
空白同样是因为在全局作用域使用var定义变量就相当于在最上面定义了一个变量其实就是在编译的时候直接把这个变量放在window身上了但是没有初始化调用printName()的时候还未执行初始化语句所以输出空白
script// 在代码块中{console.log(address)var address 花果山console.log(address)}// 在方法中function defineSex(){console.log(sex)var sex 男console.log(sex)}defineSex()/script运行结果:undefined
花果山undefined
男这里没有报错只是输出了undefined说明在执行的时候是存在这个变量的只是没有进行初始化
以上代码相当于下面的代码script// 在代码块中{var address;console.log(address)address 花果山console.log(address)}// 在方法中function defineAge(){var sex;console.log(sex)sex 男console.log(sex)}defineAge()/script 4.在方法中用 var 定义的变量只在方法中有效在方法外面是访问不到的因为当方法执行完的时候在其中用var定义的变量就销毁了
scriptfunction defineSex(){var sex 男console.log(sex)}defineSex()console.log(sex)/script运行结果:
男Uncaught ReferenceError: sex is not defined 5.在代码块中用 var 定义的变量在代码快中有效在代码块外面也能访问到
scriptconsole.log(address)if(true){var address 花果山console.log(address)}console.log(address)/script运行结果:
undefined
花果山
花果山scriptconsole.log(address)while(true){var address 花果山console.log(address)break;}console.log(address)/script运行结果:
undefined
花果山
花果山 6.不使用 var 直接进行变量定义
script// 虽然这里能够访问到 name 但是输出是空白说明也是做了变量提升将name放在最前面// 但是由于没有初始化所以不能输出孙悟空这里有点好奇为啥不输出undefined// 这种情况下大家测试的时候千万要重新开一个浏览器窗口第二次刷新的时候就不准确了// 可以输出 孙悟空 因为第一次打开的时候就将name放入 window 了刷新就相当于// window 中已经有 name 这个属性了console.log(name)// 在全局作用域不使用var直接定义的变量相当于全局变量在上面也能访问到name 孙悟空function defineGlobal(){// 在方法中不使用var直接定义的变量相当于全局变量但是必须得是在这个方法被调用过之后// 才可以在方法外面访问到这个全局变量global 我是全局变量}defineGlobal()console.log(global)function defineGlobal1(){global1 我是全局变量1}// defineGlobal1 没有被调用所以在defineGlobal1 中定义的全局变量global1在方法// 外面是访问不到的console.log(global1)/script运行结果空白没有报错我是全局变量Uncaught ReferenceError: global1 is not defined 7.在网上看到一个面试题挺有意思
script// 变量提升将下面定义的 a 和 b 提到最上面但是不初始化所以这里a b 都是undefinedconsole.log(1, a, b); //1 undefined undefined// 这里对 a b 进行初始化var a 12, b34;function foo(){// 这里换了一个作用域也就是在方法体内部// 由于在这个作用域中又定义了一个 a 变量所以 a 会被提到当前作用域(方法内)的最上面// 但不会初始化所以这里的 a 其实是方法中新定义的 a ,所以是undefined,// 方法中没有重新定义 b所以还用方法外面定义且初始化好的 bconsole.log(2, a, b); //2 undefined 34// 这里重新对方法中定义的 a 进行初始化var ab12;// 上面对方法中定义的 a 初始化所以这里输出 方法中定义的 a 和 外面定义的 b 都是12console.log(3, a, b); //3 12 12}foo()//这里输出的是 外面定义的 a 外面定义的 b 由于b在方法中被修改为12console.log(4, a, b); //4 12 12/script运行结果:
1 undefined undefined
2 undefined 34
3 12 12
4 12 12
script// 变量提升将下面定义的 a 和 b 提到最上面但是不初始化所以这里a b 都是undefinedconsole.log(1, a, b); //1 undefined undefined// 这里对 a b 进行初始化var a 12, b34;function foo(){// 这里换了一个作用域也就是在方法体内部// 由于在这个作用域中又定义了一个 a 变量一个b变量所以 重新定义的 a b 会被// 提到当前作用域(方法内)的最上面// 但不会初始化所以这里的 a 和 b 其实是方法中新定义的 a b ,所以都是undefined,console.log(2, a, b); //2 undefined undefined // 这里重新对方法中定义的 a 进行初始化var a12 , b12;// 上面对方法中定义的 a 初始化所以这里输出 方法中定义的 a 和 外面定义的 b 都是12console.log(3, a, b); //3 12 12}foo()// 这里输出的是外面定义的 a 外面定义的 b ,这次方法中重新定义了一个b所以外面的b没有被// 修改console.log(4, a, b); //4 12 34/script运行结果:
1 undefined undefined
2 undefined undefined
3 12 12
4 12 34 8.可以在同一作用域中重复多次用 var 定义相同名称的变量
scriptvar name 孙悟空var name 猪八戒console.log(name)/script运行结果:
猪八戒没有报错二、ES6 let 申明变量 1.块级作用域
scriptconsole.log(address)if(true){let address 花果山console.log(address)}console.log(address)/scriptUncaught ReferenceError: address is not defined 2.在同一作用域中不能重复定义
scriptlet name 孙悟空let name 猪八戒
//Uncaught SyntaxError: Identifier name has already been declared 了解此错误
/scriptscriptfunction printName(){let name 孙悟空let name 猪八戒}
//Uncaught SyntaxError: Identifier name has already been declared了解此错误
/scriptscriptlet name 孙悟空//function printName(){let name 猪八戒console.log(name)}printName()console.log(name)
/script没有报错运行结果
猪八戒
孙悟空说明在不同的作用域可以定义相同名称的变量scriptlet name 1;if(true){let name 2;console.log(name)}console.log(name)/script
运行结果:
2
1
scriptlet address 花果山var address 猪八戒
/scriptUncaught SyntaxError: Identifier address has already been declared
scriptvar address 猪八戒let address 花果山
/script
Uncaught SyntaxError: Identifier address has already been declared 3.不存在变量提升
scriptconsole.log(address)let address 猪八戒/scriptUncaught ReferenceError: Cannot access address before initialization这里跟 var 有很大不同 var会进行变量提升不会报错的 4.let 在全局作用域定义的变量是不会挂到window身上的
scriptlet address 猪八戒console.log(window.address)var name 孙悟空console.log(window.name)/script运行结果:
undefined
孙悟空说明 var 在全局作用域定义的变量会挂到window身上 但是let在全局作用域定义的变量不会挂到window身上
三、ES6 const 申明变量 1.声明变量时必须同时初始化 scriptconst name;/scriptUncaught SyntaxError: Missing initializer in const declaration 2.一旦申明完了不能修改
scriptconst name 孙悟空;name 猪八戒;
/scriptUncaught TypeError: Assignment to constant variable. 其实这里的不能修改指的是不能修改 const 变量指向的内存地址但是修改内存地址里面的数据是可以的。
scriptconst TEAM [唐僧 ,孙悟空 , 猪八戒];TEAM.push(沙僧)TEAM.push(白龙马)console.log(TEAM)/script scriptconst TEAM [唐僧 ,孙悟空 , 猪八戒];TEAM [唐僧 ,孙悟空 , 猪八戒];
/scriptUncaught TypeError: Assignment to constant variable.
scriptconst person {name:孙悟空,address:花果山}person.weapon 金箍棒console.log(person)/script scriptconst person {name:孙悟空,address:花果山}person {name:孙悟空,address:花果山}
/scriptUncaught TypeError: Assignment to constant variable
varletconst函数级作用域块级作用域块级作用域重复声明不可重复声明不可重复声明变量提升不存在变量提升不存在变量提升值可更改值可更改值不可更改全局变量挂载到window全局变量不会挂载到window全局变量不会挂载到window
for (var i 1; i 5; i) {setTimeout(function () {console.log(i);}, 0);}console.log(window.i) // 6 var定义的变量会挂到 window 上运行结果:
6
6
6
6
6
6在每次循环迭代中都会调用 setTimeout 函数传入一个匿名函数回调函数和一个延迟时间
这里是 0 毫秒。尽管延迟时间设置为 0这并不意味着回调函数会立即执行。相反
它会被添加到 JavaScript 的事件队列中等待当前执行栈清空后执行// 如果要用var定义变量的话需要通过闭包的方式来解决
for (var i 1; i 5; i) {(function(j) {setTimeout(function () {console.log(j);}, 0);})(i);
}
for (let i 1; i 5; i) {setTimeout(function () {console.log(i);}, 0);}console.log(window.i) // undefined let定义的变量不会挂到window运行结果:
undefined
1
2
3
4
5下面这个例子要求当点击某个div的时候将其背景颜色改成粉色
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{border-style: inset;border-color: black;border-width: 1px;height: 100px;width: 100px;float: left;margin-left: 20px;background-color: white;}/style/headbodydiv/divdiv/divdiv/div
/bodyscriptvar boxes document.getElementsByTagName(div)console.log(boxes)console.log(boxes[0])// 这里使用 let 定义 变量 i 进行遍历没问题for (let i 0; i boxes.length ; i) {boxes[i].onclick function (){boxes[i].style.background pink}}/script/htmlscriptvar boxes document.getElementsByTagName(div)console.log(boxes)console.log(boxes[0])// 这里使用 var 定义 变量 i 进行遍历就会报错for (var i 0; i boxes.length ; i) {boxes[i].onclick function (){boxes[i].style.background pink}}/scriptUncaught TypeError: Cannot read properties of undefined (reading style)这里主要原因是 var i 定义了一个全局变量这个变量会挂到 window 上当for循环执行完的时候i 3
也就是我们点击的时候 i 3boxes只有3个元素当我们点击的时候就会回调
boxes[i].style.background pink boxes[3]是undefined所以会报错
