你不知道的JavaScript #

function baz() {
  // 当前调用栈是：baz
  // 因此，当前调用位置是全局作用域
  console.log( "baz" );
  bar(); // <-- bar 的调用位置
}
function bar() {
  // 当前调用栈是 baz -> bar
  // 因此，当前调用位置在 baz 中
  console.log( "bar" );
  foo(); // <-- foo 的调用位置
}
function foo() {
  // 当前调用栈是 baz -> bar -> foo
  // 因此，当前调用位置在 bar 中
  console.log( "foo" );
}
baz(); // <-- baz 的调用位置

var myObject = { };
myObject[true] = "foo";
myObject[3] = "bar";
myObject[myObject] = "baz";
myObject["true"]; // "foo"
myObject["3"]; // "bar"
myObject["[object Object]"]; // "baz"

var myObject = {
  a:2
};
Object.getOwnPropertyDescriptor( myObject, "a" );
// {
// value: 2,  //属性描述符
// writable: true,  //属性描述符  可以重新赋值
// enumerable: true,  //属性描述符  可以使用 defineProperty(..) 方法
// configurable: true  //属性描述符
// }

var myObject1 = {
  // 给 a 定义一个 getter
  get a() {
    return this._a_;
  },
  // 给 a 定义一个 setter
  set a(val) {
    this._a_ = val * 2;
  }
};
myObject1.a = 2;
myObject1.a; // 4

var myObject = {
  a:2
};
("a" in myObject); // true
("b" in myObject); // false

myObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "b" ); // false

// in 操作符会检查属性是否在对象及其 [[Prototype]] 原型链中（参见第 5 章）。相比之下，hasOwnProperty(..) 只会检查属性是否在 myObject 对象中，不会检查 [[Prototype]] 链

var anotherObject = {
  a:2
};
var myObject = Object.create( anotherObject );
anotherObject.a; // 2
myObject.a; // 2
anotherObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "a" ); // false
myObject.a++; // 隐式屏蔽！
anotherObject.a; // 2
myObject.a; // 3
myObject.hasOwnProperty( "a" ); // true

function Foo() {
  // ...
}
// 这时Foo是由constructor属性的
var a = new Foo();
Object.getPrototypeOf( a ) === Foo.prototype; // true
Foo.prototype.constructor === Foo; // true
a.constructor === Foo; // true
// 内部链接 [[Prototype]] 关联的是 Foo.prototype 对象

// a.__proto__ === Foo.prototype === Object.getPrototypeOf(a)
// a.prototype === undefined

Foo.prototype = { /* .. */ }; // 创建一个新原型对象
// 这是Foo是没有constructor属性的
var a1 = new Foo();
a1.constructor === Foo; // false!
a1.constructor === Object; // true!

// 面向对象设计模式
function Foo(who) {
  this.me = who;
}
Foo.prototype.identify = function() {
  return "I am " + this.me;
};
function Bar(who) {
  Foo.call( this, who );
}
Bar.prototype = Object.create( Foo.prototype );
Bar.prototype.speak = function() {
  alert( "Hello, " + this.identify() + "." );
};
var b1 = new Bar( "b1" );
var b2 = new Bar( "b2" );
b1.speak();
b2.speak();
// 对象关联设计模式
Foo = {
  init: function(who) {
    this.me = who;
  },
  identify: function() {
    return "I am " + this.me;
  }
};
Bar = Object.create( Foo );
Bar.speak = function() {
  alert( "Hello, " + this.identify() + "." );
};
var b1 = Object.create( Bar );
b1.init( "b1" );
var b2 = Object.create( Bar );
b2.init( "b2" );
b1.speak();
b2.speak();

function foo() {
  var arr = Array.prototype.slice.call(arguments)
  // var arr = Array.from(arguments)
  arr.push("bam")
  console.log(arr)
}

foo("baz", "bar") // ["baz", "bar", "bam"]

var a = "foo";
var b = ["f", "o", "o"];

a[1] = "O";
b[1] = "0";

a; // "foo"
b; // ["f", "O", "o"]

// 特别大和特别小的数字默认用指数格式显示，与 toExponential() 函数的输出结果相同
var a = 5E10;
a; // 50000000000
a.toExponential(); // "5e+10"

// tofixed(..) 方法可指定小数部分的显示位数：
var a = 42.59;
a.toFixed( 0 ); // "43"
a.toFixed( 1 ); // "42.6"
a.toFixed( 2 ); // "42.59"
a.toFixed( 3 ); // "42.590"
a.toFixed( 4 ); // "42.5900"

// toPrecision(..) 方法用来指定有效数位的显示位数：
var a = 42.59;
a.toPrecision( 1 ); // "4e+1"
a.toPrecision( 2 ); // "43"
a.toPrecision( 3 ); // "42.6"
a.toPrecision( 4 ); // "42.59"
a.toPrecision( 5 ); // "42.590"
a.toPrecision( 6 ); // "42.5900"

// . 运算符需要给予特别注意，因为它是一个有效的数字字符，会被优先识别为数字常量的一部分，然后才是对象属性访问运算符
// 无效语法：
42.toFixed( 3 ); // SyntaxError  . 被视为常量 42. 的一部分
// 下面的语法都有效：
(42).toFixed( 3 ); // "42.000"
0.42.toFixed( 3 ); // "0.420"
42..toFixed( 3 ); // "42.000"

// 还可以用指数形式来表示较大的数字
var onethousand = 1E3; // 即 1 * 10^3
var onemilliononehundredthousand = 1.1E6; // 即 1.1 * 10^6

0xf3; // 243的十六进制          推荐
0Xf3; // 同上
0363; // 243的八进制
0o363; // 243的八进制          推荐
0O363; // 同上
0b11110011; // 243的二进制     推荐
0B11110011; // 同上

0.1 + 0.2 === 0.3; // false
0.1 + 0.2 === 0.30000000000000004; // true

// 判断 0.1 + 0.2 和 0.3 是否相等，最常见的方法是设置一个误差范围值
if (!Number.EPSILON) {
  Number.EPSILON = Math.pow(2,-52);
}
// 可以使用 Number.EPSILON 来比较两个数字是否相等（在指定的误差范围内）
function numbersCloseEnoughToEqual(n1,n2) {
 return Math.abs( n1 - n2 ) < Number.EPSILON;
}
var a = 0.1 + 0.2;
var b = 0.3;
numbersCloseEnoughToEqual( a, b ); // true
numbersCloseEnoughToEqual( 0.0000001, 0.0000002 ); // false

// 数位运算符 | 只适用于 32 位整数，可以将变量 a 中的数值转换为 32 位有符号整数
a | 0

// 表达式 void ___ 没有返回值，因此返回结果是 undefined。void 并不改变表达式的结果，只是让表达式不返回值：
var a = 42;
console.log( void a, a ); // undefined 42

Infinity/Infinity  // NaN

// 判断两个值是否绝对相等
Object.is(a, b)

function foo(x) {
  x.push( 4 );
  x; // [1,2,3,4]
  // 然后
  x = [4,5,6];
  x.push( 7 );
  x; // [4,5,6,7]
}
var a = [1,2,3];
foo( a );
a; // 是[1,2,3,4]，不是[4,5,6,7]

Object.prototype.toString.call( [1,2,3] );
// "[object Array]"
Object.prototype.toString.call( /regex-literal/i );
// "[object RegExp]"
Object.prototype.toString.call( null );
// "[object Null]"
Object.prototype.toString.call( undefined );
// "[object Undefined]"
Object.prototype.toString.call( "abc" );
// "[object String]"
Object.prototype.toString.call( 42 );
// "[object Number]"
Object.prototype.toString.call( true );
// "[object Boolean]"

var a = "abc";
var b = new String( a );
var c = Object( a );

typeof a; // "string"
typeof b; // "object"
typeof c; // "object"

b instanceof String; // true
c instanceof String; // true

Object.prototype.toString.call( b ); // "[object String]"
Object.prototype.toString.call( c ); // "[object String]"

var a = new String( "abc" );
var b = new Number( 42 );
var c = new Boolean( true );

a.valueOf(); // "abc"
b.valueOf(); // 42
c.valueOf(); // true

// 在需要用到封装对象中的基本类型值的地方会发生隐式拆封。
var a = new String( "abc" );
var b = a + ""; // b的值为"abc"

typeof a; // "object"
typeof b; // "string"

// Function.prototype 是一个函数，RegExp.prototype 是一个正则表达式，而 Array.prototype 是一个数组。
typeof Function.prototype; // "function"
Function.prototype(); // 空函数！

RegExp.prototype.toString(); // "/(?:)/"——空正则表达式
"abc".match( RegExp.prototype ); // [""]

function isThisCool(vals = Array.prototype, fn = Function.prototype, rx = RegExp.prototype) {
  return rx.test(
    vals.map( fn ).join( "" )
  ); 
}
isThisCool(); // true
isThisCool(
  ["a","b","c"],
  function(v){ return v.toUpperCase(); },
  /D/
); // false

// JSON.stringify(..) 在对象中遇到 undefined、function 和 symbol 时会自动将其忽略，在数组中则会返回 null（以保证单元位置不变）
JSON.stringify( undefined ); // undefined
JSON.stringify( function(){} ); // undefined
JSON.stringify(
  [1,undefined,function(){},4]
); // "[1,null,null,4]"
JSON.stringify(
  { a:2, b:function(){} }
); // "{"a":2}"
// 对包含循环引用的对象执行 JSON.stringify(..) 会出错。

// 如果对象中定义了 toJSON() 方法，JSON 字符串化时会首先调用该方法，然后用它的返回值来进行序列化。
var o = { };
var a = { 
  b: 42,
  c: o,
  d: function(){}
};
// 在a中创建一个循环引用
o.e = a;
// 循环引用在这里会产生错误
// JSON.stringify( a );
// 自定义的JSON序列化
a.toJSON = function() {
  // 序列化仅包含b
  return { b: this.b };
};
JSON.stringify( a ); // "{"b":42}"

// toJSON() 返回的应该是一个适当的值，可以是任何类型，然后再由 JSON.stringify(..) 对其进行字符串化。
var a = {
  val: [1,2,3],
  // 可能是我们想要的结果！
  toJSON: function(){
    return this.val.slice( 1 );
  }
};
var b = {
  val: [1,2,3],
  // 可能不是我们想要的结果！
  toJSON: function(){
    return "[" +
      this.val.slice( 1 ).join() +
    "]"; 
  }
};
JSON.stringify( a ); // "[2,3]"
JSON.stringify( b ); // ""[2,3]""

var a = {
  valueOf: function(){
    return "42";
  }
};
var b = {
  toString: function(){
    return "42";
  }
};
var c = [4,2];
c.toString = function(){
  return this.join( "" ); // "42"
};
Number( a ); // 42
Number( b ); // 42
Number( c ); // 42
Number( "" ); // 0
Number( [] ); // 0
Number( [ "abc" ] ); // NaN

var a = 42;
var b = String( a );
var c = "3.14";
var d = Number( c );
b; // "42"
d; // 3.14

0 | -0; // 0
0 | NaN; // 0
0 | Infinity; // 0
0 | -Infinity; // 0
// 以上这些特殊数字无法以 32 位格式呈现（因为它们来自 64 位 IEEE 754 标准），因此 ToInt32 返回 0。

// ~x 大致等同于 -(x+1)
~42; // -(42+1) ==> -43

var a = [ 
  1,
  function(){ /*..*/ },
  2,
  function(){ /*..*/ }
];
JSON.stringify( a ); // "[1,null,2,null]"
JSON.stringify( a, function(key,val){
  if (typeof val == "function") {
    // 函数的ToBoolean强制类型转换
    return !!val;
  }
  else {
    return val;
  }
});
// "[1,true,2,true]"

var a = [1,2];
var b = [3,4];
a + b; // "1,23,4"

var a = {
  valueOf: function() { return 42; },
  toString: function() { return 4; }
};
a + ""; // "42"
String( a ); // "4"

function foo() {
  console.log( a );
}
var a = 42;
a && foo(); // 42

var a = 42;
var b = "42";
a === b; // false
a == b; // true

var a = "42";
var b = true;
a == b; // false
// "42" == 1 > 42 == 1

var a = 42;
var b = [ 42 ];
a == b; // true

var a = 3 * 6; // 声明语句
b = a;         // 赋值表达式
b;             // 表达式语句
// var 的结果值为undefined
// {...} 的结果值为 其最后一个语句 / 表达式的结果

// 下面这样的代码无法运行
var a, b;
a = if (true) {
  b = 4 + 38;
};
// 因为语法不允许我们获得语句的结果值并将其赋值给另一个变量

var a = 42;
var b = a++;  // === var b = (a++);
a; // 43
b; // 42

var a = 42, b;
b = ( a++, a );
a; // 43
b; // 43

var a = b = 42  // 创建全局变量b

function vowels(str) {
  var matches;
  if (str) {
    // 提取所有元音字母
    matches = str.match( /[aeiou]/g );
    if (matches) {
      return matches;
    } 
  }
}
vowels( "Hello World" ); // ["e","o","o"]
// 利用赋值语句的副作用将两个 if 语句合二为一
function vowels(str) {
  var matches;
  // 提取所有元音字母
  if (str && (matches = str.match( /[aeiou]/g ))) {
    return matches;
  }
}
vowels( "Hello World" ); // ["e","o","o"]

// 标签为foo的循环
foo: for (var i=0; i<4; i++) {
  for (var j=0; j<4; j++) {
  // 如果j和i相等，继续外层循环
    if (j == i) {
      // 跳转到foo的下一个循环
      continue foo;
    }
    // 跳过奇数结果
    if ((j * i) % 2 == 1) {
      // 继续内层循环（没有标签的）
      continue; 
    }
    console.log( i, j );
  }
}
// 1 0
// 2 0
// 2 1
// 3 0
// 3 2

// 标签为foo的循环
foo: for (var i=0; i<4; i++) {
  for (var j=0; j<4; j++) {
    if ((i * j) >= 3) {
      console.log( "stopping!", i, j );
      break foo; 
    }
    console.log( i, j );
  }
}
// 0 0
// 0 1
// 0 2
// 0 3
// 1 0
// 1 1
// 1 2
// 停止！ 1 3

// 标签为bar的代码块
function foo() {
  bar: {
    console.log( "Hello" );
    break bar;
    console.log( "never runs" );
  }
  console.log( "World" );
}
foo();
// Hello
// World

true || false && false; // true
(true || false) && false; // false
true || (false && false); // true

// && > || > ?: > =
a ? b : c ? d : e;  //  a ? b : (c ? d : e)  ? : 是右关联

a && b || c ? c || b ? a : c && b : a;  // ((a && b) || c) ? ((c || b) ? a : (c && b)) : a

function foo( a = 42, b = a + 1 ) {
  console.log( a, b );
}
foo(); // 42 43
foo( undefined ); // 42 43
foo( 5 ); // 5 6
foo( void 0, 7 ); // 42 7
foo( null ); // null 1  null 被强制类型转换为 0

function foo( a = 42, b = a + 1 ) {
  console.log(arguments.length, a, b, arguments[0], arguments[1]);
}
foo(); // 0 42 43 undefined undefined
foo( 10 ); // 1 10 11 10 undefined
foo( 10, undefined ); // 2 10 11 10 undefined
foo( 10, null ); // 2 10 null 10 null

function foo() {
  try {
    return 42;
  } 
  finally {
    console.log( "Hello" );
  }
  console.log( "never runs" );
}
console.log( foo() );
// Hello
// 42

// 这里 return 42 先执行，并将 foo() 函数的返回值设置为 42。然后 try 执行完毕，接着执行 finally。最后 foo() 函数执行完毕，console.log(..) 显示返回值。

// try 中的 throw 也是如此：
function foo() {
  try {
    throw 42; 
  }
  finally {
    console.log( "Hello" );
  }
  console.log( "never runs" );
}
console.log( foo() );
// Hello
// Uncaught Exception: 42

// 如果 finally 中抛出异常（无论是有意还是无意），函数就会在此处终止。如果此前 try 中已经有 return 设置了返回值，则该值会被丢弃：
function foo() {
  try {
    return 42;
  } 
  finally {
    throw "Oops!";
  }
 console.log( "never runs" );
}
console.log( foo() );
// Uncaught Exception: Oops!

// continue 和 break 等控制语句也是如此：
for (var i=0; i<10; i++) {
  try {
    continue; 
  }
  finally {
    console.log( i );
  }
}
// 0 1 2 3 4 5 6 7 8 9
// continue 在每次循环之后，会在 i++ 执行之前执行 console.log(i)，所以结果是 0..9 而非1..10。

// finally 中的 return 会覆盖 try 和 catch 中 return 的返回值：
function foo() {
  try {
    return 42;
  } 
  finally {
    // 没有返回语句，所以没有覆盖
  } 
}
function bar() {
  try {
    return 42;
  }
  finally {
    // 覆盖前面的 return 42
    return; 
  }
}
function baz() {
  try {
    return 42;
  } 
  finally {
    // 覆盖前面的 return 42
    return "Hello";
  }
}
foo(); // 42
bar(); // undefined
baz(); // Hello

function foo() {
  bar: {
    try {
      return 42;
    } 
    finally {
      // 跳出标签为bar的代码块
      break bar;
    }
  }
  console.log( "Crazy" );
  return "Hello";
}
console.log( foo() );
// Crazy
// Hello

<div id="foo"></div>

if (typeof foo == "undefined") {
 foo = 42; // 永远也不会运行
}
console.log( foo ); // HTML元素

// shim/polyfill
if (!Array.prototype.foobar) {
  // 幼稚
  Array.prototype.foobar = function() {
    this.push( "foo", "bar" );
    // 问题在于一些标准功能无法被完整地 polyfill/prollyfill
  }; 
}

function addAll() {
  var sum = 0;
  for (var i=0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}
addAll( 2, 4, 6 ); // 12
addAll( 1000 ); // 1000 arguments.length===1  arguments[0]===1000  arguments[1]===undefined
addAll.apply( null, nums ); // 应该是: 499950000

function now() {
  return 21;
}
function later() {
  answer = answer * 2;
  console.log( "Meaning of life:", answer );
}
var answer = now();
setTimeout( later, 1000 ); // Meaning of life: 42

function now() {
  return 21;
}
function later() { .. }
var answer = now();
setTimeout( later, 1000 );

answer = answer * 2;
console.log( "Meaning of life:", answer );

// 事件循环伪代码
// eventLoop是一个用作队列的数组
// （先进，先出）
var eventLoop = [ ];
var event;
// “永远”执行
while (true) {
  // 一次tick
  if (eventLoop.length > 0) {
    // 拿到队列中的下一个事件
    event = eventLoop.shift();
    // 现在，执行下一个事件
    try {
      event();
    }
    catch (err) {
      reportError(err);
    }
  }
}

var a = 20; 
function foo() { 
  a = a + 1; 
} 
function bar() { 
  a = a * 2; 
} 
// ajax(..)是某个库中提供的某个Ajax函数
ajax( "http://some.url.1", foo ); 
ajax( "http://some.url.2", bar );

console.log( "A" ); 
setTimeout( function(){ 
  console.log( "B" ); 
}, 0 ); 
// 理论上的"任务API" 
schedule( function(){ 
  console.log( "C" ); 
  schedule( function(){ 
    console.log( "D" ); 
  } ); 
} ); 
// A C D B
// 因为任务处理是在当前事件循环 tick 结尾处，且定时器触发是为了调度下一个事件循环 tick（如果可用的话！）

var a, b; 
a = 10; 
b = 30; 
a = a + 1; 
b = b + 1; 
console.log( a + b ); // 42 

// 比如，引擎可能会发现，其实这样执行会更快：
var a, b; 
a = 10; 
a++; 
b = 30; 
b++; 
console.log( a + b ); // 42 

// 或者这样：
var a, b; 
a = 11; 
b = 31; 
console.log( a + b ); // 42 

// 或者甚至这样：
// 因为a和b不会被再次使用
// 我们可以inline，从而完全不需要它们！
console.log( 42 ); // 42 

// 前面的所有情况中，JavaScript 引擎在编译期间执行的都是安全的优化，最后可见的结果都是一样的。但是这里有一种场景，其中特定的优化是不安全的，因此也是不允许的（当然，不用说这其实也根本不能称为优化）：
var a, b; 
a = 10; 
b = 30; 
// 我们需要a和b处于递增之前的状态！
console.log( a * b ); // 300 
a = a + 1; 
b = b + 1; 
console.log( a + b ); // 42

listen( "click", function handler(evt){ 
  setTimeout( function request(){ 
    ajax( "http://some.url.1", function response(text){ 
      if (text == "hello") { 
        handler(); 
      } 
      else if (text == "world") { 
        request(); 
      } 
    } ); 
  }, 500) ; 
} );

doA( function(){ 
  doB();
  doC( function(){ 
    doD(); 
  } ) 
  doE(); 
} ); 
doF();

if ( 
  p !== null && 
  ( 
    typeof p === "object" || 
    typeof p === "function" 
  ) && 
  typeof p.then === "function" 
) { 
  // 假定这是一个thenable! 
} 
else { 
  // 不是thenable 
}

Object.prototype.then = function(){}; 
Array.prototype.then = function(){}; 
var v1 = { hello: "world" }; 
var v2 = [ "Hello", "World" ]; 

p.then( function(){ 
  p.then( function(){ 
    console.log( "C" ); 
  } ); 
  console.log( "A" ); 
} ); 
p.then( function(){ 
  console.log( "B" ); 
} ); 
// A B C 
// 这里，"C" 无法打断或抢占 "B"，这是因为 Promise 的运作方式。

var p3 = new Promise( function(resolve,reject){ 
  resolve( "B" ); 
} ); 
var p1 = new Promise( function(resolve,reject){ 
  resolve( p3 ); 
} ); 
p2 = new Promise( function(resolve,reject){ 
  resolve( "A" ); 
} ); 
p1.then( function(v){ 
  console.log( v ); 
} );
p2.then( function(v){ 
  console.log( v ); 
} ); 
// A B <-- 而不是像你可能认为的B A 

var p = new Promise( function(resolve,reject){ 
  foo.bar(); // foo未定义，所以会出错！
  resolve( 42 ); // 永远不会到达这里 :( 
} ); 
p.then( 
  function fulfilled(){ 
    // 永远不会到达这里 :( 
  }, 
  function rejected(err){ 
    // err将会是一个TypeError异常对象来自foo.bar()这一行
  } 
); 

var p1 = new Promise( function(resolve,reject){ 
  resolve( 42 ); 
} ); 
var p2 = Promise.resolve( 42 );

var p1 = Promise.resolve( 42 ); 
var p2 = Promise.resolve( p1 );
p1 === p2; // true

var p = { 
  then: function(cb) { 
    cb( 42 ); 
  } 
}; 
// 这可以工作，但只是因为幸运而已
p 
.then( 
  function fulfilled(val){ 
    console.log( val ); // 42 
  }, 
  function rejected(err){ 
    // 永远不会到达这里
  } 
); 

var p = { 
  then: function(cb,errcb) { 
    cb( 42 ); 
    errcb( "evil laugh" ); 
  } 
}; 
p 
.then( 
  function fulfilled(val){ 
    console.log( val ); // 42 
  }, 
  function rejected(err){ 
    // 啊，不应该运行！
    console.log( err ); // 邪恶的笑
  } 
); 
// 这个 p 是一个 thenable，

Promise.resolve( p ) 
.then( 
  function fulfilled(val){ 
    console.log( val ); // 42 
  }, 
  function rejected(err){ 
    // 永远不会到达这里
  } 
);