一,数据类型
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 语句创建了自己的作用域,这个作用域里的变量与外面的变量无关。
2,变量提升是怎么回事?
JavaScript会把作用域里的所有变量和函数提到函数的顶部声明,带着这个原理看以下的例子。
上图中的值是undefined说明变量已经提前声明,只是没有被赋值。由此解释,变量提升指的是变量声明的提升,不会提升变量的初始化和赋值。
let的情况不同:
浏览器认为c没有声明,是否意味着没有变量提升呢?再看一个例子,
这里同样认为c没有声明,但是,如果c没有变量提升,执行到console.log时应该是输出全局作用域中的c,而不是出现错误。
可以推知let也出现了变量提升。出现这种情况我们称为“暂时性死区”(temporal dead zone,简称 TDZ),在代码块内,使用let、const命令声明变量之前,该变量都是不可用的。
3,函数会被优先提升到上面
4,语句块是没有局部作用域的,在下面的语句块中,与外部是完全一致的。if里面的变量和函数也会被提升到函数顶部
三,js引擎是怎么执行代码的
js引擎想要执行代码,一定会创建一个执行栈ECStack(执行上下文环境栈)。
栈内存,我们简单的理解为执行代码所用,那么函数执行就是个进栈和出栈的过程。
步骤如下:
1,把创建的上下文压缩到栈中执行 => 进栈
2,执行完有的上下文就没用了 => 出栈
3,有的还要用,会把它压缩到栈底 => 闭包
我们执行下面函数分析其过程:
四,闭包的理解
《JavaScript高级程序设计》里面对闭包的定义是,闭包是指有权访问另一个函数作用域中的变量的函数。对定义中的另一个函数作用域理解可能有点模糊。
而上面三中简单的说了下当函数进栈执行后,还要用到该函数不能出栈,就形成闭包。结合《JavaScript高级程序设计》分析闭包,如图:
五,关于作用域
创建一个函数的时候,会创建一个堆,存储代码字符串和对应的键值对,初始化当前函数的作用域[[scope]] = 所在上下文EC中的变量对象VO/AO。
执行函数的时候,会创建一个新的执行上下文EC,初始化this的指向,初始化作用域链[[scopeChain]]:
六,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() )
理解上图查找后可以对照下面的原型链万能表加深理解:
八,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