前端入门7-JavaScript语法之相关术语

声明

本系列文章内容全部梳理自以下几个来源:

作为一个前端小白,入门跟着这几个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

PS:梳理的内容以《JavaScript权威指南》这本书中的内容为主,因此接下去跟 JavaScript 语法相关的系列文章基本只介绍 ES5 标准规范的内容、ES6 等这系列梳理完再单独来讲讲。

正文-相关术语

对于从 Java 或 C++ 转过来的开发人员来说 JavaScript 会有点让人困惑,因为它全部都是动态的,都是运行时,而且不存在类机制。所有的都是实例对象。所以,学习一些 JavaScript 的语言特性时,最好不要试图从 Java 中寻找相关概念硬套过来,类比可以。

接下去一系列关于 JavaScript 语法的文章中,将会出现很多在 Java 里出现或者没出现过的专业术语,所以第一篇就先来罗列一下,每个术语先给一定的解释。

有的理解不了没关系,等这系列文章看完,再回过头来看这一张基本也都能理解了。先罗列出来,至少有个印象,不至于到时看到一脸懵逼。

直接量

可以直接使用的数据值,即在程序中直接出现的数据值,如:

"hello world"

123

{name:dasu}

[]

...

等等这些直接出现可直接使用的数据值称为直接量,不同数据类型有不同的叫法,常见的有:数字直接量、字符串直接量、正则表达式直接量、对象直接量、数组直接量等。

字面量

跟直接量没什么区别,都是同一个单词 literals 的不同翻译而已,所以直接量也就是字面量,字面量就是直接量,不同书可能用的不同翻译而已。

原始值

原始类型的值称为原始值,原始值是不可变的。在 JavaScript 中,有两种数据类型:原始类型和对象类型。

原始类型包括:数字(Number)、字符串(String)、布尔(Boolean)、null、undefined。

表达式&语句

表达式可以理解成方程式,用于计算某个结果值或某种行为的代码可称为表达式,通常它们并不会改变程序状态,也不会影响程序后续执行流程,如算术表达式: x+1。

语句表示一个完整的行为,可以是多个表达式与关键字、运算符等的组合。

函数&方法

function 关键字声明的称为函数,但将函数置于对象内时,此时称它为对象的方法。

简单的理解,从不同的角度看待,如果是从函数本身,那么它就是个函数,如果是从对象角度看待,那么称某个函数是对象的方法,本质上没什么区别。但当调用时会有所区别。

另外,函数本质上也是一个对象。

构造函数

JavaScript 没有类似于 Java 的 class 机制,一个函数,当和 new 关键字一起使用时,此时称这个函数为构造函数。

也就是所有的函数都可以作为构造函数,当它和 new 关键字一起使用时,此时它的行为有区别于普通的函数调用。

全局对象

在前端里,当 js 的宿主是浏览器时,全局对象是 window。全局对象有几点特性:

  1. js 文件中不在函数内声明的所有变量和函数都是作为全局对象的属性存在。
  2. 全局对象的属性使用时,可以直接通过属性名访问,不必添加前缀,也就是不必像 window.name 这么使用。
  3. js 文件中,函数外出现的 this 都指向全局对象 window。

全局属性

全局对象的属性就称全局属性,但这里的全局属性,更多的是在表示这种场景下为全局对象创建的属性:

<script type="text/javascript">

     weixin = dasuAndroidTv;

</script>

当我们在函数外部直接对一个不存在的变量赋值操作时,此时等价于执行 this.weixin = dasuAndroidTv,而 this 指向全局对象,所以会自动为全局对象添加一个属性,属性名为 weixin。

所以,有时候,全局属性是特指这种场景下为全局对象创建的属性。之所以会用全局属性来称呼这种场景,是为了跟下面的全局变量和全局函数区分开。

全局变量

<script type="text/javascript">

     var weixin = dasuAndroidTv;

</script>

像这种不在函数内声明的变量,称为全局变量。虽然,它们最终也都是作为全局对象 window 的属性而存在,但由于这种方式为 window 创建的属性和上述介绍的不加 var 关键字为全局对象添加属性的方式有本质上的区别。

所以,为了和上述介绍的全局属性概念区别开来,通常称这种通过 var 为全局对象创建的属性为全局变量。

既然全局对象的属性在任何地方都可以不加前缀的直接访问使用,所以全局变量在任何地方都可以被使用。

对于上述介绍的那种直接对不存在的属性进行赋值操作行为而创建的全局属性,是可通过 delete 动态删除的;

而通过 var 或 function 这种声明全局变量的方式为全局对象创建的属性,是不可通过 delete 删除的。

全局函数

<script type="text/javascript">

     function add() {}

</script>

像这种不在函数内声明的函数,称为全局函数。它跟全局变量的特性、用意一模一样,区别只在于一个是变量、一个是函数而言。

包装对象

原始类型所对应的对象类型,类似于 Java 中的包装类。

因为原始类型不是对象,不可操作方法和属性,但可将其转换为对应的对象类型,此时称为包装对象,即可像操作对象一样操作这些转成包装对象的原始类型数据。

包装对象有:Number, Boolean, String

原型

由于在 JavaScript 中,除了原始类型,其余的皆为对象,所以它的继承双方只能都是对象,也就是说,对象也是继承自对象的,那么作为父类角色,作为被继承的那个对象,此时称它为原型。

所以,才说 JavaScript 是基于原型的继承语言。

原型就是类似于 Java 中父类的概念。

原型链

既然涉及继承,那么自然就有继承结构,这个结构在 JavaScript 中就称为原型链。

比如对象 a 继承自对象 b,对象 b 继承自对象 c,那么 a 的原型链就表示为:a -> b -> c(省略掉内置的继承关系)。

原型链用于当操作对象某个属性时,寻找该属性的来源。

作用域

作用域指的是变量和函数的作用域,下面统称变量,在 JavaScript 中,变量分两种:全局变量和局部变量。

全局变量指的是在函数外定义的变量,作用域是全局,在任何地方都可以使用,即使跨 js 文件中也可以使用,因为它们实际上是作为全局对象的属性存在,在前端里就是作为 window 的属性,而多个 <script> 中的不同 js 文件,都是共用同一个全局对象 window,自然就可以跨文件使用它的属性。

局部变量指函数内部定义的变量,或者函数形参,作用域为函数内。需要区别于 Java 中的局部变量,Java 里的局部变量的作用域为块级作用域:只能在局部变量声明的代码块且声明位置之后使用;但在 JavaScript 中,变量都有声明提前的特性,局部变量在函数内不管哪里都可以访问,即使声明的位置在末尾,或内嵌的代码块中。

作用域链

在 JavaScript 中,允许在函数内部继续定义函数,所以函数可以存在很深的嵌套层次,这里的嵌套层次不是指调用的嵌套,而是指函数声明的嵌套,A 函数在 B 函数中定义,作为 B 函数的局部变量存在这种。

而内部函数是可以访问外部函数内的变量的,也可以访问全局的变量,那么当内部函数使用了某个外部变量,就会借助作用域链,沿着作用域链中寻找这个外部变量究竟是外部函数内的变量,还是全局变量。

从原理上解释,每个函数调用时,都会创建一个函数执行上下文,执行上下文中存储着当前上下文中的所有变量,作用域链,就是将具有嵌套层次的函数的上下文中的变量串接起来的存在。

还是要反复强调,上面的嵌套层次指的不是函数调用时的嵌套层次,而是函数定义时的嵌套层次。可以将这里有嵌套层次关系的函数理解成 Java 中的内部类。

闭包

MDN 中的文章对其的解释为:闭包是函数和声明该函数的词法环境的组合,这个环境包含了这个闭包创建时所能访问的所有局部变量。

某篇文章中看到过这么一种解释:闭包是代码块和创建该代码块的上下文中数据的结合。

闭包的概念不怎么好理解,有的文章里会说,函数就是闭包,有的说内嵌的函数是闭包,这里先不做评价,先尝试着从上面两种解释中去理解一下,看能否理解,后续会专门写一篇来讲讲。



大家好,我是 dasu,欢迎关注我的公众号(dasuAndroidTv),公众号中有我的联系方式,欢迎有事没事来唠嗑一下,如果你觉得本篇内容有帮助到你,可以转载但记得要关注,要标明原文哦,谢谢支持~

原文地址:https://www.cnblogs.com/dasusu/p/10048550.html

时间: 2024-10-24 09:10:20

前端入门7-JavaScript语法之相关术语的相关文章

网站前端_JavaScript.0003.JavaScript语法变量

语法构成: 1. JavaScript中的一切(变量,函数名,操作符等)都是区分大小写的 2. JavaScript中的标识符(变量,函数,属性名称,函数参数名称),首字符必须为字母/下划线/美元符号$,其它字符可以为字母/数字/下划线 3. JavaScript中不能把关键字/保留字/true/false/null作为标识符 代码注释: 说明: JavaScript使用C风格的注释,包含单行注释(//)和多行注释(/**/) 变量相关: 1. JavaScript的变量是松散型(可用来保存任何

前端入门12-JavaScript语法之函数

声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Translation/JavaScript 作为一个前端小白,入门跟着这几个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下. PS:梳理的内容以<JavaScript权威指南>这本书中的内容为主,因此接下去跟 JavaScrip

《前端之路》之 Babel 下一代 JavaScript 语法编译器

写本章的内容的出发点主要是 为了对于之前关于 JS 版本的一个总结,在之前的开发中,我们始终对于 ECMAScript 的版本的更新不够重视,以至于在后面的 开发过程中,我们始终会被各种新奇的语法打断了我们的思考思路,所以对于基础的追求,是任何时候都不能忘记的.不然会的框架再多,会玩儿的花样再多,到头来都只是API . 另外 一个目的就是想做一个好玩的东西,就是 实时编译所写的高版本(ES2015+)的 JS 代码.转化成现在大部分浏览器可以兼容的 ES5 . ES3 等. 下面就正式介绍下 B

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

JavaScript 语法:松软科技前端教程

JavaScript 语法是一套规则,它定义了 JavaScript 的语言结构. var x, y; // 如何声明变量 x = 7; y = 8; // 如何赋值 z = x + y; // 如何计算值 JavaScript 值 JavaScript 语句定义两种类型的值:混合值和变量值. 混合值被称为字面量(literal).变量值被称为变量. JavaScript 字面量 书写混合值最重要的规则是: 写数值有无小数点均可: 15.90 10011 字符串是文本,由双引号或单引号包围: "

转摘_结合个人经历总结的前端入门方法

转载请注明出处: https://github.com/qiu-deqing/FE-learning Table of Contents generated with DocToc FE-learning 必备基础技能 基本开发工具 学习方法和学习目标 入门之路 继续提高 一些个人经历 LingyuCoder的学习经历 工具 技能 语言基础 进阶 项目 未来 其他 入门书 一些不错的网站 历程 MrRaindrop的学习经历 缘起 项目,下一个项目 收集癖和知识管理 跟对神 读书 前端的定位 最

前端入门方法(大全)

转载请注明出处: https://github.com/qiu-deqing/FE-learning Table of Contents generated with DocToc FE-learning 必备基础技能 基本开发工具 学习方法和学习目标 入门之路 继续提高 一些个人经历 LingyuCoder的学习经历 工具 技能 语言基础 进阶 项目 未来 其他 入门书 一些不错的网站 历程 MrRaindrop的学习经历 缘起 项目,下一个项目 收集癖和知识管理 跟对神 读书 前端的定位 最

前端html、Javascript、CSS技术小结

简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页,只需要找找内部是否有html5的标志性标签就行了.然而平时虽然写了不少html,却没怎么关注它的发展史: GML(Generalized Marcup Language)通用标记语言 和SGML(Standard Generalized Markup Language)标准通用标记语言. 由Tim

前端入门选择编辑器

什么是编辑器? 在我接触前端开发的这段时间,编辑器对我来说就是写代码的一个工具,简称--IDE.每一款编辑器的用法大致都一样,如果你会使用其中一个,那么其他的你都会了.(不要去看官方的解释,呵呵...). 在我学习前端开发对的这段时间所接触的编辑器中,个人认为webStorm和Sublime这两款还不错. 我们先说一下WebStorm WebStorm=PhpStorm-PHP-Database-support 总体印象只专注Web前端开发 优点: 1:代码导航:Shift+Shift快速查文件