前端基础整理 | Javascript基础 (一)

个人向,对JS知识进行了查漏补缺,主要来源于《JS高级程序设计》和网上博客,本文内容主要包括以下:

  1. 在HTML中引入JS
  2. 数据类型基础
  3. 作用域
  4. 垃圾回收

一、在HTML中引入JS

  1. async 和 defer
    普通情况 <script src="script.js"></script>
    遇到该语句,阻塞原渲染过程,立刻加载并执行脚本
    async <script async src="script.js"></script>
    遇到该语句立刻异步加载,加载时不阻塞原渲染,加载完毕立刻执行,执行时阻塞原渲染
    defer <script defer src="myscript.js"></script>
    遇到该语句立刻异步加载,加载时不阻塞原渲染,加载完毕不执行,等到html都渲染好了再执行。
    目前来说,就实用性兼容性,把script丢在body最后面是最佳的。
对比图

二、数据类型基础

  1. 数据类型
    • 简单数据类型:Undefined Null Number String Boolean Symbol
    • 复杂数据类型:Object
  2. typeof
    • typeof null -> 'object'
    • typeof (function(){}) -> 'function‘
  3. null 和 undefined
    • null是空对象指针。
    • undefined由null派生,所以 undefined == null。
  4. Number:
    • 浮点数相加精度不够
      0.1+0.2 === 0.30000000000000004
    • 超过数字Number.MAX_VALUE就会变成Infinity,小于最小就是-Infinity。【检测函数 isFinite()】
    • NaN 不是一个数字。任何涉及NaN的运算操作都返回NaN。而且NaN不等于自身【检测函数 isNaN() 把不能转换为数字的都返回True】
    • 把对象转为数字的方法: Number() ParseInt() ParseFloat()
  5. String
    • 把对象转化为字符串的方法:String() 和 toString()
  6. Object
    • valueOf() 返回对象的字符串、数值、布尔值表示,通常返回值和toString()一样(通常返回字符串)
  7. 函数
    • 函数默认返回:undefined
    • arguments对象:函数参数可以访问传入的任意数量,都会被收入argument对象。

三、 作用域

执行环境(execution context):定义了变量或函数有权访问的其他数据,决定了它们各自的行为。
变量对象(variable object):与执行环境关联,环境中定义的所有变量和函数都保存在这个对象中。(代码不可访问,但解析器会使用它)

关于执行环境和变量对象的扩展,摘自知乎:执行环境(Execution Context,简称Context)只是一个抽象概念,在具体JS Engine实现中,它对应很多内容,变量对象(Variable Object,简写VO)是其一,还有Scope Chain,this等,这些共同组成了执行环境这个概念。

全局执行环境:在Web浏览器中,全局执行环境是window对象,因此所以全局变量和函数都是作为window对象的属性和方法创建的。
环境的销毁:环境中的所有代码执行完毕后,该环境销毁,保存在其中的所有变量和函数定义也随之销毁。而全局执行环境是在应用程序退出后销毁。(比如window环境在关闭浏览器窗口时销毁)
执行流:每个函数都有自己的执行环境,当执行流进入一个函数的时候,函数的环境会被推入一个环境栈(execution context stack),函数执行后,环境出栈,控制权返还给原先的执行环境。

作用域链(scope chain):
(1)创建:代码在环境中执行,就会创建变量对象的作用域链。
(2)用途:保证对 执行环境 “有权访问的所有变量和函数” 的 有序访问。
(3)描述:作用域链的最前端,就是当前执行代码所在环境的变量对象。下一个变量对象来自包含环境,再下一个来自下一个包含环境,延续到全局执行环境。(如果环境是函数,则将其活动对象(activation object) 作为变量对象,活动对象最开始只包含一个变量,即arguments对象)
(4)延长作用域链:try-catch的catch内会将"错误对象"添加到作用域链前端,with会将"指定对象"添加到作用域链前端

做个题增强理解一下:

/* 以下的代码的输出是什么? */
var name = 'globalName';
function func() {
     console.log(name);
     var name = 'funcName';
     console.log(name);
     console.log(age);
}
 
funcA();

有些人会认为是: globalName funcName ReferenceError
其实是: undefined funcName ReferenceError
为什么呢?因为根据作用域链最前面的是所在环境的变量对象,所以我们应该先局限于func内去想一下会出现什么结果:由于func内存在name声明赋值语句,根据变量提升,name的声明将被提升到函数的最顶部。初始值这时候应该是默认的undefined。由于在此变量对象中找到了想要的东西,就不用去拿下一个变量的对象的值了。

四、垃圾收集

JS的垃圾回收是自动的,垃圾收集器的最基本原理是:找出那些不再继续使用的变量,然后释放其占用的内存。垃圾回收器会按照固定的时间间隔周期性地执行这些操作。

JS的垃圾回收方法有:

  1. 标记清除(mark and sweep):

    • 标记:当一个变量进入环境的时候,标志该变量为“进入环境”,当变量离开环境的时候,将其标记为“离开环境”。因为只要执行流进入相应的环境,就有可能用到这些变量,所以在环境的变量不能被清除。
    • 清除过程:垃圾收集器在运行的时候给存储在内存的所有变量都加上标记,然后,去掉环境中的变量和被它们引用的变量的标记。然后把剩下的有标记的当成垃圾,销毁他们的值并回收他们的空间,完成内存清除。
  2. 引用计数(reference counting) - 不常见 有缺陷

    • 垃圾收集器会清除引用次数为0的值。
    • 模拟过程:
      声明变量并赋值引用类型:该值的引用次数 = 1
      赋给另一个变量: 该值的引用次数 + 1 = 2
      引用该值的变量取了另外一个值:该值的引用次数 - 1 = 1
      该值的引用次数为0:被清理回收

管理内存:当你的对象不需要的时候,可以手动解引用,赋一个null,最根本的方法,让值脱离环境。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,084评论 1 32
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,096评论 0 21
  • 第1章 JavaScript 简介 JavaScript 具备与浏览器窗口及其内容等几乎所有方面交互的能力。 欧洲...
    力气强阅读 1,111评论 0 0
  • 面试题一:https://github.com/jimuyouyou/node-interview-questio...
    R_X阅读 1,611评论 0 5
  • 11、数据类型检测与toString方法的理解 1,typeof value (检测一个值的类型:原始类型或者引用...
    萌妹撒阅读 813评论 0 0