深入理解JS | 青训营笔记

39 阅读2分钟

JS的基本概念

诞生

1995年Brendan Eich开发

基本概念

  • 单线程
  • 动态、弱类型
  • 面向对象、函数式
  • 解释类语言、JIT
  • 安全、性能差

数据类型

复杂数据类型和一般数据类型

const a = {
    name: 'hemm'
}
const b = a;
b.name = 'wangyy';
console.log(a, b); // { name: 'wangyy' } { name: 'wangyy' }
const str = 'this';
let newStr = str;
newStr = 'that';
console.log(str, newStr); // this that

由此可见,复杂数据类型赋值是给内存地址,而一般的数据类型就是赋值,分配新的内存地址。 还有复杂的数据类型初值是可以被改变的,而基础数据类型初始值是不会被改变的(重新赋值操作除外)

const str = '01234';
str.slice(1,4);
console.log(str); // 01234
const arr = [0, 1, 2];
arr.push(4);
console.log(arr); // [ 0, 1, 2, 3, 4 ]

作用域

概念:变量的可访问性和可见性

  • 全局作用域
  • 函数作用域
  • 块级作用域

变量提升

console.log(company);
const company = 'hemingming'; //Uncaught ReferenceError: 
// Cannot access 'company' before initialization
console.log(company1);
let company1 = 'hemingming';  //Uncaught ReferenceError: 
// Cannot access 'company' before initialization
console.log(company1);
var company1 = 'hemingming';  //undefined
// 函数可以先调用后定义
  • var有变量提升
  • let、const没有变量提升,提前访问会报错
  • function函数可以先调用后定义
  • 赋值给变量的函数无法提前调用

JS是怎么执行的

image.png

执行上下文

image.png

  • 全局执行上下文
    代码开始执行时就会创建,将他压入执行栈的栈底,每个生命周期只有一份
  • 函数执行上下文
    当执行一个函数时,这个函数内的代码就会被编译,生成变量环境,词法环境等,当函数执行结束的时候该执行环境从栈顶弹出。

创建执行上下文时候做了什么:

  • 绑定This
  • 创建词法环境
  • 创建变量环境

词法环境:基于ECMAScript代码的词法嵌套结构来定义标识符和具体变量和函数的关联。一个词法环境由环境记录器和一个可能的引用外部词法环境的空值组成
变量环境:变量环境和词法环境的一个不同就是前者被用来储存函数声明和变量(let和const)绑定,而后者只是用来储存var变量绑定
Outer:指向外部变量环境的一个指针

const company = 'sichuang';
function testCompany() {
    const company = 'liangshan';
    function testCompany1() {
        const company = 'yonglang';

        function testCompany2() {
            return company;
        }
        return testCompany2();
    }
    return testCompany1();
}
console.log(testCompany()); // yonglang

JS进阶

总结