深入理解JS(简易版) | 青训营笔记

229 阅读4分钟

image.png

JS有什么作用?

  1. 嵌入动态文本于HTML页面
  2. 对浏览器事件做出响应
  3. 读写HTML元素
  4. 在数据被提交到服务器之前验证数据
  5. 检测访客的浏览器信息
  6. 基于Node.js技术进行服务器端编程

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。

一、JS的基本概念

诞生 : 1995年,Brendan Eich开发

  1. 借鉴C语言的基本语法
  2. 借鉴Java语言的数据类型和内存管理
  3. 借鉴Scheme语言,将函数提升到"第一等公民”(first class)的地位
  4. 借鉴Self语言,使用基于原型(prototype).的继承机制

发展

  1. Mocha->.1995.9 LiveScript->1995.12 JavaScript
  2. 1997年6月,第一版ECMAScript发布
  3. 1999年12月,第三版ECMAScript发布
  4. 2009年12月,第五版ECMAScript发布
  5. 2009年,Ryan创建了Node.js
  6. 2010年,lsaac基于node.js写出了npm
  7. 2015年6月,第六版ECMAScript发布

image.png

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

JS的基本概念 -- 数据类型

image.png

JS的基本概念 -- 作用域

变量的可访问性和可见性

静态作用域,通过它就能够预测代码在执行过程中如何查找标识符

//全局作用域
        var company = "Bytedance";
        function showCompany() {
            console.log(company);
        }

        showCompany()
        
//函数作用域
        var company = "Bytedance";

        function showCompany() {
            company = "douyin"
            console.log(company);
        }

        showCompany()
        
//块级作用域
        {
            const company = "Bytedance";
            console.log(1, company);
        }

        console.log(2, company);

JS的基本概念 -- 变量提升

  • var有变量提升
  • let、const没有变量提升,.提前访问会报错
  • function函数可以先调用再定义
  • 赋值给变量的函数无法提前调用

image.png

image.png

二、JS是怎么执行的

拿到源代码之后,首先会通过词法分析、语法分析来生成AST(还会创建一个执行上下文),生成AST之后会转换成字节码,再把逐行解释执行字节码,转换成机器码进行编译执行(字节码的代码量比机器码少得多,节约了内存的开销),编译执行的时候v8就会直接将多次出现的代码(热代码)直接转化成机器码。

image.png

当JS引擎解析到可执行代码片段(通常是函数调用)的时候,就会先做一些执行前的准备工作,这个准备工作,就叫做 “ 执行上下文( execution context简称EC) ”,也叫执行环境

image (3).png

  • 全局执行上下文:代码开始执行时就会创建,将他压执行栈的栈底,每个生命周期内只有一份
  • 函数执行上下文:当执行一个函数时,这个函数内的代码会被编译,生成变量环境、词法环境等,当函数执行结束的时候该执行环境从栈顶弹出。
var scop = 'global';
func( );
console.log(company);
function func() {
    var funcVar ='func' ;
    console.log('这是个函数', funcVar );
}
var company ='字节跳动';

image.png

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

绑定this、创建词法环境、创建变量环境

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

三、JS的进阶知识点

闭包

通常,如果引用闭包的函数是一个全局变量,那么闭包会一直存在直到页面关闭;但如果这个闭包以后不再使用的话,就会造成内存泄漏。

如果引用闭包的函数是个局部变量,等函数销毁后,在下次JavaScrpt引擎执行垃圾回收时,判断闭包这块内容如果已经不再被使用了,那么JaxaScipt引擎的垃圾回收器就会回收这块内存。

image.png image.png

this

概念:解析器每次调用函数的时候会向函数内部传递一个隐含的参数

这个参数就是this,this指向一个对象

这个对象就是函数执行的上下文

根据函数调用方式不同,this会指向不同的对象

在构造函数中,this的使用也是相当广泛的


普通函数的this指向windows

image.png

1.对象调用指向对象 2.先赋值再调用,看调用的地方

image.png

1.创建临时对象 2.将this指向临时对象 3.执行构造函数 4.返回临时对象

image.png

垃圾回收

image.png