JavaScript 基础 - JavaScript中的标准内置属性

发表于 | 分类于

JavaScript中的标准内置属性

常量属性

简单值，全局对象的属性。

1）Infinity

表示无穷大，初始值等同于 Number.POSITIVE_INFINITY （正无穷大）。

1
2
3
4
5
6
7
8
9
10
Object.getOwnPropertyDescriptor(window, "Infinity");
// Object {value: Infinity, writable: false, enumerable: false, configurable: false}
-Infinity === Number.NEGATIVE_INFINITY // true
Infinity === Number.POSITIVE_INFINITY // true

console.log(Infinity         ); // Infinity  
console.log(Infinity + 1     ); // Infinity
console.log(Math.pow(10,1000)); // Infinity
console.log(Math.log(0)      ); // -Infinity
console.log(1 / Infinity     ); // 0

相关的方法：

1.1）isFinite() 方法 和 Number.isFinite() 方法（ES6）

这两个方法都是用来判断被传入的参数值是否为一个有限数值（finite number）。

区别：

JavaScriptCore：globalFuncIsFinite

1
2
3
4
EncodedJSValue JSC_HOST_CALL globalFuncIsFinite(ExecState* exec) {
  double n = exec->argument(0).toNumber(exec);
  return JSValue::encode(jsBoolean(std::isfinite(n)));
}

全局的 inFinite()，会先将参数转化成 Number 对象，而 Number.inFinite() 不会。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// isFinite() 与 Number.isFinite() 相同
isFinite(Infinity);    // false
isFinite(NaN);         // false
isFinite(-Infinity);   // false
Number.isFinite(Infinity);  // false
Number.isFinite(NaN);       // false
Number.isFinite(-Infinity); // false

isFinite(0);           // true
isFinite(2e64);        // true
Number.isFinite(0);         // true
Number.isFinite(2e64);      // true

// isFinite() 与 Number.isFinite() 不同
isFinite(null);        // true
Number.isFinite(null); // false
isFinite('0');         // true
Number.isFinite('0');  // false

Polyfill：

1
2
3
Number.isFinite = Number.isFinite || function(value) {
    return typeof value === "number" && isFinite(value);
}

2）NaN

表示 Not-A-Number 的值，初始值为 NaN，和 Number.NaN 的值一样。

1
2
Object.getOwnPropertyDescriptor(window,"NaN");
// Object {value: NaN, writable: false, enumerable: false, configurable: false}

比较运算符（==, !=, ===, !==）不能被用来判断一个值是否是 NaN。
必须使用 Number.isNaN() 方法或 isNaN() 方法。

1
2
3
4
5
6
7
8
9
10
NaN === NaN;        // false
Number.NaN === NaN; // false
isNaN(NaN);         // true
isNaN(Number.NaN);  // true

// 小甜品
function valueIsNaN(v) { return v !== v; }
valueIsNaN(1);          // false
valueIsNaN(NaN);        // true
valueIsNaN(Number.NaN); // true

相关的方法：

2.1）isNaN() 方法 和 Number.isNaN() 方法（ES6）

这两个方法都是用来判断被传入的参数值是否为 NaN。

区别：

JavaScriptCore：globalFuncIsNaN

1
2
3
EncodedJSValue JSC_HOST_CALL globalFuncIsNaN(ExecState* exec) {
  return JSValue::encode(jsBoolean(std::isnan(exec->argument(0).toNumber(exec))));
}

首先，isNaN() 会进行 Number(参数) 操作，
而 Number.isNaN() 会进行 typeof 参数 === “number” 判断。

再判断其值是否为 NaN。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
isNaN(NaN);        // true
Number.isNaN(NaN); // true
isNaN(0/0);        // true
Number.isNaN(0/0); // true

// isNaN() 和 Number.isNaN() 不同结果
isNaN("NaN");                        // true:  Number("NaN") 返回 NaN
Number.isNaN("NaN");                 // false: 非数值类型
isNaN(undefined);                    // true:  Number("undefined") 返回 NaN
Number.isNaN(undefined);             // false: 非数值类型
isNaN({});                           // true:  Number({}) 返回 NaN
Number.isNaN({});                    // false: 非数值类型
isNaN("123ABC");                     // true: Number("123ABC") 返回 NaN
Number.isNaN("123ABC");              // false: 非数值类型
isNaN("blabla");                     // true:  Number("blabla") 返回 NaN
Number.isNaN("blabla");              // false: 非数值类型
isNaN(new Date().toString());        // true: 非数值字符串 返回 NaN
Number.isNaN(new Date().toString()); // false: 非数值类型

// isNaN() 和 Number.isNaN() 都返回 false
isNaN(new Date());        // false: Number(new Date()) 返回 数值，非NaN
Number.isNaN(new Date()); // false: 非数值类型
isNaN(true);              // Number(true) 返回 1，非NaN
Number.isNaN(true);       // 非数值类型
isNaN(null);              // Number(null) 返回 0，非NaN
Number.isNaN(null);       // 非数值类型
isNaN(37);                // Number(37) 返回 37，非NaN
Number.isNaN(37);         // 数值类型 37，非NaN
isNaN("37");              // Number("37") 返回 37，非NaN
Number.isNaN("37");       // 非数值类型
isNaN("37.37");           // Number("37.37") 返回 37.37，非NaN
Number.isNaN("37.37");    // 非数值类型
isNaN("");                // Number("") 返回 0，非NaN
Number.isNaN("");         // 非数值类型
isNaN(" ");               // Number(" ") 返回 0，非NaN
Number.isNaN(" ");        // 非数值类型

Polyfill：

1
2
3
Number.isNaN = Number.isNaN || function(value) {
    return typeof value === "number" && isNaN(value);
}

3）undefined

作为属性或变量 undefined 有两种情况：

1，全局对象的属性 undefined，初始值为 undefined。

1
2
Object.getOwnPropertyDescriptor(window,"undefined");
// Object {value: undefined, writable: false, enumerable: false, configurable: false}

2，自从 undefined 不被当成保留关键字，它可以作为标识符（变量名）出现在全局作用域以外的其他作用域。

1
2
3
4
5
6
7
8
9
10
// logs "foo string"
(function(){
  var undefined = 'foo';
  console.log(undefined, typeof undefined);
})();

// logs "foo string"
(function(undefined){
  console.log(undefined, typeof undefined);
})('foo');

作为值 undefined 有三种情况：

1，未初始化的变量的值为 undefined

2，未传入实参的形参的值为 undefined

3，没有 return 语句的函数的默认返回值为 undefined

判断是否为 undefined

1，使用 严格相等 === 判断

1
2
3
4
5
6
7
var x;
if (x === undefined) {
   // 执行到这里
}
else {
   // 不会执行到这里
}

注意：
不能使用 == 判断，因为 null == undefined 返回 true，
如果 x 的值为 null，那么 x == undefined 等式成立。

2，使用 typeof 运算符 判断

1
2
3
4
5
6
7
8
// 未声明变量只能使用 typeof 判断
if (typeof x === 'undefined') {
   // 执行到这里
}

if(x === undefined){ // x 未声明，抛出 ReferenceError 异常

}

3，使用 void 运算符 判断

void 运算符会返回 undefined。

1
2
3
4
5
6
7
var x;
if (x === void 0) {
   // 执行到这里
}

if (y === void 0) { //  y 未声明，抛出 ReferenceError 异常
}

相关的方法：

1，void 运算符

void 运算符会对给定的表达式进行求值，然后返回 undefined。

通常只用于获取 undefined 的原始值，一般使用 void(0)（等同于 void 0）。

立即调用的函数表达式

在使用立即执行的函数表达式时，可以利用 void 运算符让 JavaScript 引擎把一个函数识别成函数表达式而不是函数声明（语句）。

1
2
3
4
5
6
7
8
9
10
11
void function iife() {
    var bar = function () {};
    var baz = function () {};
    var foo = function () {
        bar();
        baz();
     };
    var biz = function () {};
    foo();
    biz();
}();

JavaScript URIs

当用户点击一个以 javascript: URI 时，浏览器会对冒号后面的代码进行求值，然后把求值的结果显示在页面上，这时页面基本上是一大片空白，这通常不是我们想要的。只有当这段代码的求值结果是 undefined 的时候，浏览器才不会去做这件傻事，所以我们经常会用 void 运算符来实现这个需求。

1
2
3
4
5
6
7
8
<a href="javascript:void(0);">
  这个链接点击之后不会做任何事情，如果去掉 void()，
  点击之后整个页面会被替换成一个字符 0。
</a>

<a href="javascript:void(document.body.style.backgroundColor='green');">
  点击这个链接会让页面背景变成绿色。
</a>

注意：

虽然这么做是可行的，但利用 javascript: 伪协议来执行 JavaScript 代码是不推荐的，推荐的做法是为链接元素绑定 click 事件。

4）null

null 是一个 JavaScript 字面量，表示空值。

null 与 undefined 的区别：

1
2
3
4
typeof null        // object (bug in ECMAScript, should be null)
typeof undefined   // undefined
null === undefined // false
null  == undefined // true