新的一天开始了。昨天有一位掘友点赞了我的文章，第一次有这种喜悦。也很感谢昨天那位兄弟。步入正题。

今天的开始是开发一个简易UI组件，一个弹窗。没有特别大的难度。说一下里面重要的知识点吧。

选择器

const modal = document.querySelector('.modal');

这是万能的，这是选择类。如果选择id，把点换成#就可以了。如果选择标签元素，须在末尾加上索引。

监听事件

btnCloseModal.addEventListener('click', function () {
    modal.classList.add('hidden')
    overlay.classList.add('hidden')
})

'click'是监听点击事件，后面function是函数，点击之后会发生什么。和onclick非常相似。这不过这个更加灵活。

remove

modal.classList.remove('hidden');

删除一个类。

add modal.classList.add('hidden');

大家猜也猜到了，添加一个类。

contains modal.classList.contains('hidden')

检索一个元素中是否包含这个类

toggle player0El.classList.toggle('player--active');

如果元素中存在该类，则会删除。不存在，则会添加。

js工作原理

将近看他讲了两个小时的js的工作原理，除了知道最好的引擎是Chrome V8引擎，和范围链。没听懂太多，一部分因为确实有点难度，主要还是因为英文授课真的好多ppt都看不了。

范围链可以给大家举点简单的例子。

function abc() {
    const aaa = '5';
    console.log(aaa);
}

abc()
console.log(aaa);

输出结果

显而易见，在function中定义的常量aaa,在外面打印是会报错的。而在里面定义函数或者对象、数组啥的，都会报错，无法获取。而在外面无论定义什么，在函数内都是可以获取的，因为在外面定义是全局的。

时间死区

console.log(me);
console.log(job);
console.log(year);
var me = 'jonas';
let job = 'teacher';
const year = 1991;

输出结果

可以获取到var 定义的 me,只不过显示undefined，而const和let都会报错，就是因为处在时间死区，通俗的说，先定义后调用就可以了。

在举一个函数的例子

console.log(addDecl(2, 3));
console.log(addExpr(2, 3));
console.log(addArrow(2, 3));

function addDecl(a, b) {
    return a + b
}

const addExpr = function (a, b) {
    return a + b
}

const addArrow = (a, b) => a + b

输出结果

函数声明是不会被时间死区所影响，但函数表达式还是会被影响，归根结底还是 const和let。

再聊一个 var let const 的小区别。

var x = 1;
let y = 2;
const z = 3;
console.log(window.x);
console.log(window.y);
console.log(window.z);

var 所定义的变量会被放到window上。而let和const定义的变量不会。

this

这个是js中特别关键的概念。也是一个非常大的坑。在以前记录过，特别注意声明函数和箭头函数中的区别。

声明函数

const jonas = {
    year: 1991,
    calcAge: function () {
        console.log(this);
    }
}
jonas.calcAge()

结果this指向

箭头函数

const jonas = {
    year: 1991,
    calcAge: () => {
        console.log(this);
    }
}
jonas.calcAge()

结果this指向一般情况下，箭头函数中的this都会指向window。

arguments

const addExpr = function (a, b) {
    console.log(arguments)
    return a + b;
}
addExpr(2, 5)
var addArrow = (a, b) => {
    console.log(arguments);
    return a + b
};
addArrow(2, 4)

返回的结果

显而易见，在常规函数中，arguments的值为所传进函数的参数。而在箭头函数中不存在arguments。

总结

今天写的东西是比较散的，this是真的非常非常关键，使用频率非常的高。其他的也很重要。虽然在我学习vue的时候有很多功能都可以用vue中封装好的v-bind来代替，但是这种原生的js知识是必不可少的。无论什么前端框架，都是为了帮助我们更快的完成我们的项目，减少我们的工作量，使我们的代码看起来整洁。我们的js功底千万不要被前端框架所局限。今天就到这了。加油。

第十一天前端浅记录

总结