前端总结js基础原理,js执行过程理解

一,数据类型

1,基本数据类型(值类型):

number,string,boolean,null,undefined。

2,引用数据类型:

对象,数组,函数。

如:{ },[ ], 日期对象new Date(), Math,实例对象...

3,ES6中新增,Symbol(唯一值)

例如:let a = Symbol('1')

          let b = Symbol('1')

          a != b  // true

另:NaN == NaN  // false,NaN和谁都不相等。

二,变量

创建一个变量会有三步操作

例如:let a = 1

1,创建变量:声明 let a

2,创建值: 基本值直接在栈中创建和存储  1

3,让变量和值关联起来(赋值):定义 defined。当然未赋值是undefined(ps:终于知道undefined怎么来的了)。

在第2步中,当引用值是复杂的结构时特殊处理。

如:let obj = { a: 1 }

function Fn(){ let a = 1 }

(ps:函数也是变量,和let创建的变量本质上是一样的,区别是存储的值是个函数类型的值。)

1,开辟一个存储对象中键值对(存储函数中的代码)的内存空间“堆内存”。

2,所有的堆内存都有一个可被后续查找的16进制地址。

3,后续关联赋值的时候,是把堆内存地址给与变量操作。

如下图所示存储:

图二

问题:

1,let 和 var的区别?

let 语句创建了自己的作用域,这个作用域里的变量与外面的变量无关。

图1-1
图1-2

2,变量提升是怎么回事?

JavaScript会把作用域里的所有变量和函数提到函数的顶部声明,带着这个原理看以下的例子。

图2-1

上图中的值是undefined说明变量已经提前声明,只是没有被赋值。由此解释,变量提升指的是变量声明的提升,不会提升变量的初始化和赋值。

let的情况不同:

图2-2

浏览器认为c没有声明,是否意味着没有变量提升呢?再看一个例子,

图2-3

这里同样认为c没有声明,但是,如果c没有变量提升,执行到console.log时应该是输出全局作用域中的c,而不是出现错误。

可以推知let也出现了变量提升。出现这种情况我们称为“暂时性死区”(temporal dead zone,简称 TDZ),在代码块内,使用let、const命令声明变量之前,该变量都是不可用的。

3,函数会被优先提升到上面

图2-4

4,语句块是没有局部作用域的,在下面的语句块中,与外部是完全一致的。if里面的变量和函数也会被提升到函数顶部

图2-5

三,js引擎是怎么执行代码的

js引擎想要执行代码,一定会创建一个执行栈ECStack(执行上下文环境栈)。

栈内存,我们简单的理解为执行代码所用,那么函数执行就是个进栈和出栈的过程。

步骤如下:

1,把创建的上下文压缩到栈中执行 => 进栈

2,执行完有的上下文就没用了 => 出栈

3,有的还要用,会把它压缩到栈底 => 闭包

我们执行下面函数分析其过程:

图 三

四,闭包的理解

《JavaScript高级程序设计》里面对闭包的定义是,闭包是指有权访问另一个函数作用域中的变量的函数。对定义中的另一个函数作用域理解可能有点模糊。

而上面三中简单的说了下当函数进栈执行后,还要用到该函数不能出栈,就形成闭包。结合《JavaScript高级程序设计》分析闭包,如图:

图四

五,关于作用域

创建一个函数的时候,会创建一个堆,存储代码字符串和对应的键值对,初始化当前函数的作用域[[scope]] = 所在上下文EC中的变量对象VO/AO。

执行函数的时候,会创建一个新的执行上下文EC,初始化this的指向,初始化作用域链[[scopeChain]]:,创建AO变量对象来存储变量。(对比上图四)

六,this执行主体的简单判断

第一种,函数执行,看前面是否有“点”,有点前面是谁this就是谁 如:obj.fn()   this->obj, obj._proto_.fn  this->obj._proto

没有点,this是window(严格模式下是undefined)  相当window.fn()   this->window

自执行函数一般this都是window。

第二种,给元素的事件行为绑定方法(DOM0/DOM2),事件触发,方法会执行,此时方法中的this一般都是当前元素本身,如:

  box.onclick = function() {

this-> box

  }

  box.addEventListener("click", function(){

this->box

  })

七,原型和原型链

原型(prototype),每个函数都有一个prototype属性,他默认指向一个Object空对象,原形对象有个constructor, 他指向函数对象。

我们给原型对象添加属性(一般是方法)时,函数的所有实例对象会自动拥有原型中的属性。

例如:

function A() {}    //  内部语句:this.prototype = {}

A.prototype.test= function() {

  console.log(test)

}

let a  = new A()  //  内部语句:this(fn).__proto__ = Fn.prototype

a.test()  // test

原型有显式原型和隐式原型。

每个函数都有个prototype,即显示原型。在定义函数时自动添加,默认值是一个空Object对象。

每个实例对象都有一个__proto__,称隐式原型。在创建对象时自动添加,默认值是构造函数的prototype属性。函数也是对象,故也创建了__proto__,下图所示

对象的隐式原型的值为其对应构造函数的显示原型的值,fn.__proto__ === Fn.prototype

在ES6之前,可以直接操作显式原型,但不能直接操作隐式原型。

图七

原型链,访问一个对象时,先在自身属性中查找,找到返回。如果没找到,沿__proto__这条链向上查找,找到返回。如果最终没找到,返回undefined。所以别名又叫隐式原型链 。

作用:查找对象的属性和方法(备注:读取对象属性值是,会自动查找原型链;如果是设置对象属性时,不会查找原型链)

我们执行下面函数分析其查找过程:(备注:创建对象 let obj = {}相当 new Object(),function Fn(){}相当 Fn = new Function() )


图七-1

理解上图查找后可以对照下面的原型链万能表加深理解:

图七-2

八,js事件循环

先引进概念:

1,js是单线程的,也就是说,同一个时间只能做一件事。(ps:为啥是单线程?假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准)。

2,浏览器是多线程的:

浏览器多线程

3,setTimeout的执行:setTimeout在栈中执行后触发浏览器的定时触发器线程,定时器触发线程倒计时在setTimeout设置的时间(如300ms)后把回调函数里面的数据加到消息队列中。

4,回调函数的执行:回调函数会加到微任务队列中等待执行。如:promise执行后会把then的回调函数加到微任务队列中。

5,先执行宏任务,在执行微任务队列,最后执行消息队列。

js事件循环机制解决单线程阻塞问题。那js是怎么处理异步(setTimeout)和回调函数(promise.then(()=>{...}))的呢?以下面代码例子:


图八


。。。如理解有误望指点学习。

作用域参考文章:https://cloud.tencent.com/developer/article/1196843

你可能感兴趣的:(前端总结js基础原理,js执行过程理解)