【每日十分钟前端】基础篇11，data-属性的作用、元素“看不见”的方式、JS执行上下文栈和作用域链

1、[HTML]data- 属性的作用？
2、[CSS]让一个元素“看不见”的方式有哪些？有什么区别？
3、[JS]JS 执行上下文栈和作用域链的理解？

---

1、data- 属性的作用？

使用data-*属性来嵌入私有的自定义数据，所有HTML标签都可用。
能被JavaScript调用dataset/getAttribute，（不能进行Ajax调用或服务端数据库查询）。
属性名小写，前缀“data-”后面必须至少带一个字符，属性值可以是任意字符串。

2、让一个元素“看不见”的方式有哪些？有什么区别？

display: none;不占据空间，无法点击；
opacity: 0;占据空间，无法点击；
visibility: hidden;占据空间，无法点击；
position: absolute; top: -999em;不占据空间，无法点击；
position: relative; top: -999em;占据空间，无法点击；

3、JS 执行上下文栈和作用域链的理解？

JS执行上下文：

当前JavaScript代码运行环境的抽象概念，Jacascript中运行任何的代码都是执行上下文中运行；
js代码在执行前，js引擎总要做一番准备工作，这份工作其实就是创建对应的执行上下文；
执行行下文类型分为：全局执行上下文、函数上下文、eval上下文。

（1）、全局执行上下文：

一般由浏览器自动创建，也就是window对象，能通过this直接访问到它，它也是var声明的全局变量的载体。

（2）、函数执行上下文：

可存在无数个，每当一个函数被调用时都会创建一个函数上下文，同一个函数多次调用，也都会创建一个新的上下文。

执行上下文栈：

也叫调用栈，先进后出，执行栈用于存储代码执行期间创建的所有上下文。
JS代码首次运行，都会先创建一个全局执行上下文并压入到执行站中，之后每当有函数被调用，都会创建一个新的函数执行上下文并压入站内。
JS代码执行完毕前在执行栈底部永远有个全局执行上下文。

作用域：

（1）、全局作用域：
在代码任何地方都能访问到的对象。
一般有：最外层函数和最外层函数外面定义的变量、未定义直接赋值的变量、window对象的属性。

（2）、局部作用域：
一般之在固定的代码片段可以访问到。
一般有：函数内部。

作用域链：

函数也是对象，与其他对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中有一个内部属性，包含了函数被创建的作用域中对象的集合，这个集合就是作用域链，它决定了哪些数据能被函数访问，它会随着函数的调用而创建，函数的执行结束而销毁。函数内部未定义的变量会随着作用域链向上查找，一直找到同名的属性为止。