本篇参考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Functions
https://developer.mozilla.org/zh-CN/docs/Glossary/Scope
https://trailhead.salesforce.com/help?article=Salesforce-Certified-JavaScript-Developer-I-Exam-Guide
最近在准备备考salesforce javascript dev1,按照官方的guide的考纲进行学习,发现好多的概念和功能曾经自己是会的,但是概念理解的不深入,好多东西一变形自己就不太清楚了,所以在查看完MDN增强学习以后做一些总结,可以为了以后更好的去理解和学习。
一. 基础数据类型与 typeof
javascript 定义了8种数据类型。
像我们常用的 Array / Set / Map / JSON等等,这些都不是基础的数据类型,都是属于 Object。那么给你一个变量,如何知道它属于哪个类型呢?这个时候可以使用 typeof去做最简单的区分。
typeof用于返回一个未经计算的操作数的类型。根据不同的数据类型会返回不同的结果。下面的表为数据类型以及返回结果之间的关系。
类型 | 结果 |
---|---|
Undefined | "undefined" |
Null | "object" |
Boolean | "boolean" |
Number | "number" |
BigInt(ECMAScritp2020新增) | "bigint" |
String | "string" |
Symbol(ECMAScript2015新增) | "symbol" |
宿主对象(由js环境提供) | 取决于具体实现 |
Function对象(按照ECMA-262规范实现【Call】) | "function" |
其他任何对象 | "object" |
举几个例子进行更好的理解:
// 数值
typeof 37 === 'number';
typeof NaN === 'number'; // 尽管它是 "Not-A-Number" (非数值) 的缩写
// 字符串
typeof ' ' === 'string';
typeof (typeof 1) === 'string'; // typeof 总是返回一个字符串
typeof String(1) === 'string'; // String 将任意值转换为字符串,比 toString 更安全
// 布尔值
typeof true === 'boolean';
typeof Boolean(1) === 'boolean'; // Boolean() 会基于参数是真值还是虚值进行转换
typeof !!(1) === 'boolean'; // 两次调用 ! (逻辑非) 操作符相当于 Boolean()
// Symbols
typeof Symbol('foo') === 'symbol';
// Undefined
typeof undefined === 'undefined';
typeof declaredButUndefinedVariable === 'undefined';
// Object
// 使用 Array.isArray 或者 Object.prototype.toString.call
// 区分数组和普通对象
typeof [1, 2, 4] === 'object';
typeof null === 'object';
typeof new Date() === 'object';
// 函数
typeof function() {} === 'function';
typeof class C {} === 'function'
// 下面的例子令人迷惑,非常危险,没有用处。避免使用它们。因为当使用 new关键字去声明变量时,只有 Function 会返回function,其他都会返回 object。
typeof new Boolean(true) === 'object';
typeof new Number(1) === 'object';
typeof new String('abc') === 'object';
二. Falsy 值 情况总结
针对Boolean布尔类型大家肯定都不陌生,布尔类型只有两个值,一个是true,也叫Truthy, 一个是false,也叫 Falsy。我们在用布尔类型时,好多时候都不是直接赋值一个变量是 true / false,而是通过表达式通过上下文强制转换将值转换成布尔值。下面整理一下所有的 Falsy的情况,除了以下的情况,便都是Truthy。
值 | 解释 |
---|---|
false | false关键字 |
0 | 数值 0 |
-0 | 在数值中分成 +0 、-0,-0也被代表false |
On | 当 BigInt 作为布尔值使用时, 遵从其作为数值的规则. 0n 是 falsy 值. |
"", ", `` | 这是一个空字符串 (字符串的长度为零). JavaScript 中的字符串可用双引号 "", 单引号 '', 或 模板字面量 `` 定义。 |
null | null - 缺少值 |
undefined | undefined - 原始值 |
NaN | NaN - 非数值 |
举一个例子更好的理解:我们看着 []没有值或者 {}没有值以为是 false,其实按照上面的表格,不包含他们,所以只要是不包含,都是 true的情况,执行以后的结果为 execute true
let test = [];
if(test) {
console.log('execute true');
} else {
console.log('execute false');
}
三 . Function 与 Scope
函数在我们日常开发中极其常见。我们在函数声明时通常使用两种。函数声明式 以及 函数表达式, 除了这两种情况我们还可以使用 构造函数方式声明一个函数。针对每一样举一个简单例子。
函数表达式:下面声明了一个阶乘函数,用来算 3!的值,我们可以看到前面使用一个变量 = function 形式,function可以有名字,也可以没有名字。比如下面的square函数就没有函数名称。
const factorial = function fac(n) {
return n<2 ? 1 : n*fac(n-1)
};
console.log(factorial(3));
const square = function(number) { return number * number; };
let x = square(4); // x gets the value 16
函数声明式:对上面的square函数进行一下变形,这种函数声明也是我们用的特别多的。
function square(number) {
return number * number;
}
使用构造函数声明
const sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6));
说完函数声明以后,接下来就是函数嵌套以及作用域的问题。你可以在一个函数里面嵌套另外一个函数。嵌套(内部)函数对其容器(外部)函数是私有的。它自身也形成了一个闭包。一个闭包是一个可以自己拥有独立的环境与变量的表达式(通常是函数)。
既然嵌套函数是一个闭包,就意味着一个嵌套函数可以”继承“容器函数的参数和变量。换句话说,内部函数包含外部函数的作用域。
可以总结如下:
闭包的详细描述可以查看上面的针对函数的链接。通过嵌套函数了解一下三种函数的作用域区别。
let param = 'test out';
function outer() {
let param = 'test inner';
function functionUsingExpression() {
console.log(param);
}
let functionUsingDefine = function() {
console.log(param);
};
let functionWithConstructor = new Function('\tconsole.log(param);');
functionUsingExpression();
functionUsingDefine();
functionWithConstructor();
}
outer();
输出结果:
通过结果可以发现当我们使用函数表达式和函数声明式方式情况下,使用当前scope的变量,当我们使用构造函数方式声明的函数时,不继承当前的scope,需要使用全局的变量。
总结:篇中针对考纲做了简单地三个总结。篇中有错误地方欢迎指出,有不懂欢迎留言。