前端学习笔记!

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了前端学习笔记!脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

作为一个前端新人,看了很多关于前端的博客,觉得有必要去记录点知识点和自己的总结,所以在工作之余写了这篇文章,该博客有引用到其他文章的内容,纯属学习,在此膜拜一下各位前端大大。

一.声明定义

  1. var es6之前的方法 用于定义变量

  2. let es6的新语法 用于定义跨级作用域本地变量

  3. const es6的新语法 用于定义常规变量(定义的变量不会被重新定义)

  4. 申明了变量没有赋值打印出来是undefinded,没有申明变量打印出来为NULL
    5.未赋值的变量做计算,它的值为NAN

二.作用域

es6支持块级作用域,需要用es6的let属性来声明变量 例如ifsetTimeout等等

if(true){
    VAR a = 1;
}
console.LOG(a); // 输出为1

当使用let

if(true){
    let a = 1;
}
console.log(a); // a is not defined(…)

变量上浮:
javascript会自动将变量的声明上浮到函数或者全局的最前面,所以再代码执行前,变量的赋值就已经为undefined

console.log(a);//undefinded
var a = 3;

//例如
var b = 5;
function work(){
   console.log(b);//undefinded
   var b = 4;
}
work();

三.数据类型

6种基础类型
1.Bollean(布尔值)
2.string(字符串)
3.undefined
4.null
5.Number
6.symbol(ES6新增):
symbol是程序创建并且可以用作属性键的值,并且它能避免命名冲突的风险。symbol与其它类型并不完全相像,symbol被创建后就不可变更,你不能为它设置属性(在严格模式下尝试设置属性会得到TyPEError的错误)。他们可以用作属性名称,这些性质与字符串类似。另一方面,每一个symbol都独一无二,不与其它symbol等同,即使二者有相同的描述也不相等;你可以轻松地创建一个新的symbol。这些性质与对象类似。

种对象类型:Object
对象和函数的区别在于前者是值的容器,后者是应用程序的过程

四.控制流和错误处理

1.块表达式
块表达式用于控制流,例如ifwhilefor
ES6之后有块域范围:在ES6中,我们可以把块域声明var改成let,让变量只作用域block范围。
2.逻辑判断
判断为false的特殊值:false、undefined、null、0、NaN、”"。
简单boolean和对象Boolean类型有俩种区别 前者是Javascript的一种原始类型,它只有俩种值,true和false
使用Boolean(value)方法可以强制转换任意值为boolean类型

1. alert(Boolean('')); //outpt false   
2. alert(Boolean('hello')); //output true   
3. alert(Boolean(100)); //output true  
4. alert(Boolean(0)); //output false 
5. alert(Boolean(NaN)); //output false 
6. alert(Boolean(null)); //output false   
7. alert(Boolean(undefined)); //output false   
8. alert(Boolean(new Object())); //output true   

五.内存空间

1.堆和栈
JavaScript没有严格的去区分栈内存和堆内存,一般它的所有数据都存取在堆内存里。
堆内存的存取方式可以比喻成书架放书,书柜里的书没有什么先后拿去顺序,可以哪区任何位置的书籍和放回到任何位置,好比在JSON格式的数据中,我们存储的key-value是可以无序的,因为顺序的不同并不影响我们的使用,我们只需要关心书的名字。
栈内存的存取方式就像一个兵乓球盒子,具有先进后出,后进先出的特点,存储原理如图。

前端学习笔记!

2.变量对象
Javascript的执行上下文生成的时候,会创建一个叫做变量对象的特殊对象,Javascript的基础数据会保存在该变量对象里
3.引用数据类型与堆内存
JS的引用数据类型例如数组Array,它们的值是不确定的,引用数据类型的值是保存在堆内存中的对象。Javascript不能直接访问堆内存空间,因此我们不能直接操作堆内存空间中的变量。因此我们在操作对象的时候其实是在引用该堆内存的对象,变量对象里保存的只是来自堆内存空间对象的地址,该地址与实际的堆内存值相关联。

 var a1 = 0;   // 变量对象
 var a2 = 'this is string'; // 变量对象
 var a3 = null; // 变量对象
 var b = { m: 20 }; // 变量b存在于变量对象中,{m: 20} 作为对象存在于堆内存中
 var c = [1, 2, 3]; // 变量c存在于变量对象中,[1, 2, 3] 作为对象存在于堆内存中

当我们要访问堆内存的引用数据类型时,首先从变量对象中获取该对象的地址指针,再通过地址指针来获取堆内存的数据

// DEMO
var m = { a: 10, b: 20 }
var n = m;
n.a = 15;

// 这时m.a为15

六.执行上下文(Execution Context)

每次当控制器转到可执行代码的时候,就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境,它会形成一个作用域。运行包括三种情况:
1.全局环境
2 函数环境
3 eval:
每次当控制器转到可执行代码的时候,就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境,它会形成一个作用域。

var code1='"a" + 2'; //表达式 
varcode2='{a:2}'; //语句 
alert(eval(code1)); //->'a2' 
alert(eval(code2)); //->undefined 
alert(eval('(' + code2 + ')')); //->[object Object] 

在一个javascript的程序执行时,会产生多个执行上下文,javascript会以堆栈的方式处理它们。
栈底为全局上下文,栈顶为当前上下文

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

上下文执行过程如图

前端学习笔记!

上下文部分特点
1单线程
2同步执行,只有栈顶的上下文处于执行中,其他上下文需要等待
3全局上下文只有唯一的一个,它在浏览器关闭时出栈
4函数的执行上下文的个数没有限制
5每次某个函数被调用,就会有个新的执行上下文为其创建,即使是调用的自身函数,也是如此。
执行上下文-生命周期
1.创建阶段
在这个阶段中,执行上下文会分别创建变量对象,作用域链和this指向
2.代码执行阶段
创建完成,开始执行代码,完成变量赋值,函数引用,以及其他代码执行

前端学习笔记!

脚本宝典总结

以上是脚本宝典为你收集整理的前端学习笔记!全部内容,希望文章能够帮你解决前端学习笔记!所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。