function doSomething() {
  "use strict";
  // TODO
}

if (test) console.log("test"); // 有效但容易出错，不要使用

if (test) {
  console.log("test"); // 推荐
}

var foo = true;
if (foo) {
  let bar = foo * 2;
  console.log(bar); // 2
}
console.log(bar); // ReferenceError

var foo = true;
if (foo) {
  {
    // <-- 显式的块
    let bar = foo * 2;
    console.log(bar); // 2
  }
}
console.log(bar); // ReferenceError

function process(data) {
  // 在这里做点有趣的事情
}
var someReallyBigData = { .. };
process( someReallyBigData );

var btn = document.getElementById( "my_button" );
btn.addEventListener( "click", function click(evt) {
  console.log("button clicked");
}, /*capturingPhase=*/false );

// 在这个块中定义的内容可以销毁了！
{
  let someReallyBigData = { .. };
  process( someReallyBigData );
}

{
  let j;
  for (j = 0; j < 5; j++) {
    let i = j; // 每个迭代重新绑定！
    console.log(i); // 0 1 2 3 4
  }
}

console.log(a); // undefined
var a = 2;

var a;
a = 2;
console.log(a); // undefined

foo(); // 不是ReferenceError, 而是TypeError!
var foo = function bar() {
  // ...
};

function wait(message) {
  setTimeout(function timer() {
    console.log(message);
  }, 1000);
}
wait("Hello, closure!");

var a = 2;
(function IIFE() {
  console.log(a); // 2
})();

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i);
  }, i * 1000);
}

// 但是这样依然不行，因此每个作用域是空的，
for (var i = 1; i <= 5; i++) {
  (function() {
    setTimeout(function timer() {
      console.log(i);
    }, i * 1000);
  })();
}

// 下面的便可以，因此每次都封装一个j
for (var i = 1; i <= 5; i++) {
  (function() {
    var j = i;
    setTimeout(function timer() {
      console.log(j);
    }, j * 1000);
  })();
}

// 改进一下，通过给IIFE传参
for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function timer() {
      console.log(j);
    }, j * 1000);
  })(i);
}

// 如下便是利用let来劫持块作用域
for (var i = 1; i <= 5; i++) {
  let j = i; // 是的，闭包的块作用域！
  setTimeout(function timer() {
    console.log(j);
  }, j * 1000);
}

// 此处let声明的i每次都会声明，而且每次都会用上一次迭代结束时的值初始化
for (let i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i); // 1 2 3 4 5
  }, i * 1000);
}

var msg;

var msg = "hi javascript";
msg = 100; // 有效但不推荐

function identify() {
  return this.name.toUpperCase();
}
function speak() {
  var greeting = "Hello, I'm " + identify.call(this);
  console.log(greeting);
}
var me = {
  name: "Kyle"
};
var you = {
  name: "Reader"
};
identify.call(me); // KYLE
identify.call(you); // READER
speak.call(me); // Hello, 我是KYLE
speak.call(you); // Hello, 我是 READER

// 这段代码可以在不同的上下文对象（me 和you）中重复使用函数identify() 和speak()，
// 不用针对每个对象编写不同版本的函数。
// 其实根据最佳实践来说，共享函数都是定义在原型上，所以并不是针对谁的函数，而是大家都可以调用

// 如果不使用this，那就需要给identify() 和speak() 显式传入一个上下文对象。
function identify(context) {
  return context.name.toUpperCase();
}
function speak(context) {
  var greeting = "Hello, I'm " + identify(context);
  console.log(greeting);
}
identify(you); // READER
speak(me); //hello, 我是KYLE
// 然而，this 提供了一种更优雅的方式来隐式“传递”一个对象引用，
// 因此可以将API 设计得更加简洁并且易于复用。

// this 永远指向最后调用它的那个对象
var name = "windowsName";
function a() {
  var name = "Cherry";
  console.log(this.name); // windowsName
  console.log("inner:" + this); // inner: Window
}
a();

var name = "windowsName";
var a = {
  name: "Cherry",
  fn: function() {
    // 在对象属性引用链调用模式下
    // 只有最顶层或者说最后一层会影响调用位置，也就是此处的a
    console.log(this.name); // Cherry
  }
};
window.a.fn();

// 因为this就是指向a，而a中没有定义name
var name = "windowsName";
var a = {
  // name: "Cherry",
  fn: function() {
    console.log(this.name); // undefined
  }
};
window.a.fn();

// 这是作用域链起作用，注意与上方的对比
// 此时a只是个对象，并不是一个块级作用域
var name = "windowsName";
var a = {
  name: "Cherry",
  fn: function() {
    console.log(name); // "windowsName"
  }
};
window.a.fn();

// 此时fn是个函数，组成了一个块级作用域
// 因此内部作用域屏蔽了全局作用域
var name = "windowsName";
function fn() {
  var name = "Cherry";

  innerFunction();
  function innerFunction() {
    console.log(name); // "Cherry"
  }
}
fn();

// 虽然innerFunction在函数内部执行的，
// 但并没有带任何修饰的函数引用进行调用的，因此只能使用默认绑定this规则
var name = "windowsName";
function fn() {
  var name = "Cherry";
  innerFunction();
  function innerFunction() {
    console.log(this.name); // windowsName
  }
}
fn();

// ---------默认绑定this规则-------------
// 注意：虽然this的绑定规则取决于调用位置
// 但对于默认绑定来说，决定this 绑定对象的并不是调用位置是否处于严格模式，
// 而是函数体是否处于严格模式。
// 如果函数体处于严格模式，this 会被绑定到undefined，
// 否则this 会被绑定到全局对象。
function foo() {
  "use strict";
  // 此时函数体处于严格模式下，会被绑定到undefined
  console.log(this.a);
}
var a = 2;
foo(); // TypeError: Cannot read property 'a' of undefined

// 如下，函数体在非严格模式，而执行在严格模式
function foo() {
  console.log(this.a);
}
var a = 2;
(function() {
  "use strict";
  foo(); // 2，正常打印
})();

// 然而如果你把null 或者undefined 作为this 的绑定对象传入call、apply 或者bind，
// 这些值在调用时会被忽略，实际应用的是默认绑定规则。
// 然而，总是使用null 来忽略this 绑定可能产生一些副作用。
// 如果某个函数确实使用了this（比如第三方库中的一个函数），
// 那默认绑定规则会把this 绑定到全局对象（在浏览器中这个对象是window），这将导致不可预计的后果（比如修改全局对象）。

// 如果实在是不在乎被谁调用的话
// 一种“更安全”的做法是传入一个特殊的对象，把this 绑定到这个对象不会对你的程序产生任何副作用
// 创建一个空对象最简单的方法就是Object.create(null)，
// 它和{} 很像， 但是并不会创建Object.prototype 这个委托，因此更加干净
function foo(a, b) {
  console.log("a:" + a + ", b:" + b);
}
// 创建一个很空很空的对象，这样既不会使用默认绑定规则，也不会产生副作用
var ø = Object.create(null);
// 把数组展开成参数
foo.apply(ø, [2, 3]); // a:2, b:3

// 还可用console.log
console.log.apply(ø, [1, 2, 3]); // 1 2 3
// 等价于
console.log(1, 2, 3);

// 使用bind(..) 进行柯里化
var bar = foo.bind(ø, 2);
bar(3); // a:2, b:3

// ---------改变this的指向-------------
// 1. 使用 ES6 的箭头函数
// 2. 在函数内部使用 _this = this
// 3. 使用 apply、call、bind
// 4. new 实例化一个对象

// 箭头函数的 this 始终指向函数定义时的 this，而非执行时。
// 根据当前的词法作用域来决定 this，具体来说，
// 箭头函数会继承最近一层外层非箭头函数调用的 this 绑定(无论 this 绑定到什么)
var name = "windowsName";

var a = {
  name: "Cherry",

  func1: function() {
    console.log(this.name);
  },
  func2: function() {
    setTimeout(function() {
      this.func1(); // this为window
    }, 100);
  },
  func3: function(){
    setTimeout(() => {
      this.func1();
    })
  },
  func4: () => {console.log(this)}
};

a.func2(); // this.func1 is not a function
a.func3(); // "Cherry"，此时this为对象a
a.func4(); // window

// 改造下面代码，让打印10
var b = 10;
(function b(){
    b = 20;
    // 只需console.log(this.b)
    console.log(b); // 默认打印函数体
})();

// ---------使用call,apply,bind-------------
var a = {
  // 省略
  func2: function() {
    // apply或call
    setTimeout(
      function() {
        this.func1();
      }.call(a),
      100
    );

    // bind，需要调用
    setTimeout(
      function() {
        this.func1();
      }.bind(a)(),
      100
    );
  }
};

// ---------apply语法-------------
// MDN：apply() 方法调用一个函数, 其具有一个指定的this值，
// 以及作为一个数组（或类似数组的对象）提供的参数
fun.apply(thisArg, [argsArray]);
// 其实就是thisArg对象调用fun函数。因此this指向thisArg
// 如果传入的是null,undefined，则会被忽略，其实还是应用的默认规则
// 如果传入原始类型，则会自动指向对应的包装类型
// argsArray为一个数组或类数组

// ---------call语法-------------
// 除了传参模式与apply不同，其他都相同
// fun.call(thisArg[, arg1[, arg2[, ...]]])

// ---------bind语法-------------
// thisArg调用绑定函数时作为this参数传递给目标函数的值
// arg1, arg2,...当目标函数被调用时，预先添加到绑定函数的参数列表中的参数。
// function.bind(thisArg[, arg1[, arg2[, ...]]])

// 示例
var p = {};
function person(name, age) {
  console.log(this, name, age);
}
var fn = person.bind(p, "manster", "23");
fn(); // {} "manster" "23"

function add(x, y) {
  return x + y;
}
console.log(add(1, 2)); // 3

// 修改为柯理化
function add2(x) {
  return function(y) {
    return x + y;
  };
}
console.log(add2(1)(2)); // 3

// 手写bind函数:
// 此时定义的myBind是多个参数
Function.prototype.myBind = function(context, ...args) {
  return () => this.apply(context, args);
};
// 测试一下
let obj1 = { name: "test1" };
let func1 = function(p1, p2) {
  console.log(this.name); // 'test1'
  console.log(p1, p2); // 1 2
};

let fn = func1.myBind(obj1, 1, 2);
fn();

// 上面代码将func1的this指向了obj了，因此就可以打印出obj里的name属性。。。
// 另外，修改this指向时传入了参数1，2也同样打印出来了。。。
// 但fn()调用时没有传参，如果再继续传参又该如何处理呢？
Function.prototype.myBind = function (context, ...args){
  // 要记住，返回的是一个函数，如果想执行的话，则需要调用
  return (...args2) => {
    this.apply(context, [...args, ...args2]);
  };
};

// 测试一下
let obj2 = { name: "test2" };
let func2 = function(p1, p2, p3, p4) {
  console.log(this.name); // 'test2'
  console.log(p1, p2, p3, p4); // 1 2 3 4
};

let fn = func2.myBind(obj2, 1, 2);
fn(3, 4);

// ---------this指向规则判断优先级(完结)-------------
// 1. 函数是否在new 中调用（new 绑定）？如果是的话this 绑定的是新创建的对象。
var bar = new Foo();
// 2. 函数是否通过call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是指定的对象。
var bar = foo.call(obj2);
// 3. 函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上下文对象。
var bar = obj1.foo();
// 4. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局对象。
var bar = foo();
// 注意：对于正常的函数调用来说，理解了这些知识你就可以明白this 的绑定原理了。不过……凡事总有例外。
// 也就是如果把null 或者undefined 作为this 的绑定对象传入call、apply 或者bind，
// 这些值在调用时会被忽略，实际应用的是默认绑定规则

// 柯里化，可以理解为提前接收部分参数，延迟执行，不立即输出结果，
// 而是返回一个接受剩余参数的函数。
// 思考一个场景，设计一个算法记录一个月的加班时间？
// 常规方法是首先记录每天加班时间，然后再将每天的时间相加。。。
var monthTime = 0;

function overtime(time) {
  return (monthTime += time);
}

overtime(3.5); // 第一天
overtime(4.5); // 第二天
overtime(2.1); // 第三天
//...

console.log(monthTime); // 10.1
// 缺点：浪费性能，没有必要每天都计算，尤其数据量大的时候

// 因此我们可以只保存每天的加班时间，到月底只计算一次就好。。。
function currying(fn) {
  var allArgs = [];

  // 利用闭包，将allArgs一直保存在内存中
  return function next() {
    var args = [].slice.call(arguments);

    if (args.length > 0) {
      // 收集参数，进行缓存
      allArgs = allArgs.concat(args);
      return next;
    } else {
      // 符合执行条件，执行计算
      return fn.apply(null, allArgs);
    }
  };
}
var add = currying(function() {
  var sum = 0;
  for (var i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
});

// 因为是根据有无参数来决定是否执行计算，最后传空表示可以计算
// 参考下面方法四更简单
add(3.5)(4.5)(2.1)(); // 10.1

// 扩展：
// 实现 add(1)(2, 3)(4)(5) === 15 的效果。
// 此时怎么知道执行的时机呢？
// 其实，这里有个忍者技艺：valueOf和toString。
// js在获取当前变量值的时候，会根据语境，隐式调用valueOf和toString方法进行获取需要的值。
// 因此，代码如下(弊端是覆盖原型上的toString和valueOf，设计到隐式转换的都会触发)
function currying(fn) {
  var allArgs = [];

  function next() {
    var args = [].slice.call(arguments);
    allArgs = allArgs.concat(args);
    return next;
  }
  // 字符类型
  next.toString = function() {
    return fn.apply(null, allArgs);
  };
  // 数值类型
  next.valueOf = function() {
    return fn.apply(null, allArgs);
  };

  return next;
}
var add = currying(function() {
  var sum = 0;
  for (var i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
});

// 以下是几种柯力化方法，
// 方法一
let currying = (fn, length, ...args) =>
  args.length === length
    ? fn(...args)
    : currying.bind(null, fn, args.length, ...args);

// 方法二
const curry = (fn, arr = []) => (...args) =>
  (arg => (arg.length === fn.length ? fn(...arg) : curry(fn, arg)))([
    ...arr,
    ...args
  ]);

// 方法三
// 参考：https://juejin.im/post/5bf9bb7ff265da616916e816
const curry = fn => {
  if (fn.length <= 1) return fn;
  const generator = args =>
    args.length === fn.length ? fn(...args) : arg => generator([...args, arg]);

  return generator([], fn.length);
};
// 测试
const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);
const res = curriedSum(1)(2)(3);
console.log(res); // 6

const log = (a, b, c) => {
  console.log(a, b, c);
};
const curriedLog = curry(log);
curriedLog("a")("b")("c"); // a b c

// 方法四
// 参考：https://juejin.im/post/5bf18715e51d45244939acc5
function curry(fn, ...args) {
  return (..._arg) => {
    return fn(...args, ..._arg);
  };
}
function sum() {
  let mySum = 0;
  for (let i = 0; i < arguments.length; i++) {
    mySum += arguments[i];
  }
  return mySum;
}
curry(sum, 1, 2)(); // 3
curry(sum, 1, 2, 3)(); // 6

// ---------反柯力化-------------
// 反柯里化的作用是，当我们调用某个方法，不用考虑这个对象在被设计时，
// 是否拥有这个方法，只要这个方法适用于它，我们就可以对这个对象使用它。

// 手写promise
// 参考：https://juejin.im/post/5c6ad98e6fb9a049d51a0f5e
// 参考：https://juejin.im/post/5b2f02cd5188252b937548ab
// 都是基于PromiseA+规范：https://promisesaplus.com/

// 结构一需满足
// 1. new Promise(executor)中参数executor(执行器)是函数，且自动执行，
// 2. 执行器可执行resolve或者reject，且都是函数
class Promise {
  // 构造器
  constructor(executor) {
    // 成功
    let resolve = () => {};
    // 失败
    let reject = () => {};
    // 立即执行
    executor(resolve, reject);
  }
}

// 结构二需满足
// 1. 三种状态(state)：pending、fulfilled、rejected
// 2. pending为初态，可转化为fulfilled（成功态）和rejected（失败态）
// 3. 成功后，不可再转为其他状态，且必须有一个不可改变的值（value）
// 4. 失败后，不可再转为其他状态，且必须有一个不可改变的原因（reason）
// 5. resolve为成功，接收参数value，状态改变为fulfilled，不可再次改变。
// 6. reject为失败，接收参数reason，状态改变为rejected，不可再次改变。
// 7. 若是executor函数报错 直接执行reject();
class Promise {
  constructor(executor) {
    // 初始态
    this.state = "pending";
    this.value = undefined;
    this.reason = undefined;

    let resolve = value => {
      // 只有pending可变为其他
      if (this.state === "pending") {
        // 修改状态
        this.state = "fulfilled";
        this.value = value;
      }
    };
    let reject = reason => {
      if (this.state === "pending") {
        this.state = "rejected";
        this.reason = reason;
      }
    };

    // 如果executor执行报错，直接执行reject
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
}

// 结构三需满足
// 1. 具有then方法，且then方法有两个参数onFulfilled,onRejected
// 2. 当状态是fulfilled，执行onFulfilled，传入value
// 3. 当状态是rejected，执行onRejected，传入reason
// 4. 如果onFulfilled,onRejected是函数，分别在对应状态改变后执行，
//    value或reason依次作为他们的第一个参数
class Promise1 {
  constructor(executor) {
    // 初始态
    this.state = "pending";
    this.value = undefined;
    this.reason = undefined;

    let resolve = value => {
      // 只有pending可变为其他
      if (this.state === "pending") {
        // 修改状态
        this.state = "fulfilled";
        this.value = value;
      }
    };
    let reject = reason => {
      if (this.state === "pending") {
        this.state = "rejected";
        this.reason = reason;
      }
    };

    // 如果executor执行报错，直接执行reject
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  then(onFulfilled, onRejected) {
    if (this.state === "fulfilled") {
      onFulfilled(this.value);
    }
    if (this.state === "rejected") {
      onRejected(this.reason);
    }
  }
}

// 测试一把
var p = new Promise1((resolve, reject) => {
  console.log("start");
  resolve("msg");
});

p.then(
  val => {
    console.log(val);
  },
  reason => {
    console.log(reason);
  }
);

console.log("end");
// 顺序还有问题
// start msg end

// 结构四需满足
// 结构三对于同步代码没有问题，但是异步则不行
// 1. 若处在pendding时就调用then，需将对应的回调存到各自数组
// 2. 当状态改变后，再执行数组中存的回调(类似订阅发布模式)
// 3. 一个promise可以有多个并列的then(不是链式)
class Promise2 {
  constructor(executor) {
    this.state = "pending";
    this.value = undefined;
    this.reason = undefined;
    // 成功存放的数组
    this.onResolvedCallbacks = [];
    // 失败存放法数组
    this.onRejectedCallbacks = [];
    let resolve = value => {
      if (this.state === "pending") {
        this.state = "fulfilled";
        this.value = value;
        // 一旦resolve执行，调用成功数组的函数
        this.onResolvedCallbacks.forEach(fn => fn());
      }
    };
    let reject = reason => {
      if (this.state === "pending") {
        this.state = "rejected";
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };

    // 如果executor执行报错，直接执行reject
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  then(onFulfilled, onRejected) {
    if (this.state === "fulfilled") {
      onFulfilled(this.value);
    }
    if (this.state === "rejected") {
      onRejected(this.reason);
    }
    // 和非pending态比，只是没有执行的函数而已
    if (this.state === "pending") {
      this.onResolvedCallbacks.push(() => {
        onFulfilled(this.value);
      });
      this.onRejectedCallbacks.push(() => {
        onRejected(this.reason);
      });
    }
  }
}

// 结构五需满足
// 1. 满足链式new Promise().then().then()
// 1-1. 第一个then可返回一个promise，并传递给下一个then
// 1-2. 第一个then还可返回一个普通值，并传递给下一个then

// 2. 判断第一个then的返回值(这里用x代替)
// 2-1. 首先，要看x是不是promise。
// 2-2. 如果是promise，则取它的结果，作为新的promise2成功的结果
// 2-3. 如果是普通值，直接作为promise2成功的结果
// 2-4. 所以要比较x和promise2
// 2-5. resolvePromise的参数有promise2（默认返回的promise）、x（我们自己return的对象）、resolve、reject
// 2-6. resolve和reject是promise2的
class Promise {
  constructor(executor) {
    this.state = "pending";
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = value => {
      if (this.state === "pending") {
        this.state = "fulfilled";
        this.value = value;
        this.onResolvedCallbacks.forEach(fn => fn());
      }
    };
    let reject = reason => {
      if (this.state === "pending") {
        this.state = "rejected";
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  then(onFulfilled, onRejected) {
    // 声明返回的promise2
    let promise2 = new Promise((resolve, reject) => {
      if (this.state === "fulfilled") {
        // 注意x来自这里
        let x = onFulfilled(this.value);
        // resolvePromise函数，处理x和默认的promise2
        resolvePromise(promise2, x, resolve, reject);
      }
      if (this.state === "rejected") {
        let x = onRejected(this.reason);
        resolvePromise(promise2, x, resolve, reject);
      }
      if (this.state === "pending") {
        this.onResolvedCallbacks.push(() => {
          let x = onFulfilled(this.value);
          resolvePromise(promise2, x, resolve, reject);
        });
        this.onRejectedCallbacks.push(() => {
          let x = onRejected(this.reason);
          resolvePromise(promise2, x, resolve, reject);
        });
      }
    });
    // 返回promise，完成链式
    return promise2;
  }
}

// resolvePromise函数
// 规范规定一段代码，让不同的promise代码互相套用，这就是resolvePromise
// 1. 如果 x === promise2，则是会造成循环引用，自己等待自己完成，则报“循环引用”错误
// 2. 判断x
// 2-1. x 不能是null
// 2-2. x 是普通值 直接resolve(x)
// 2-3. x 是对象或者函数（包括promise），let then = x.then
// 2-4. 如果取then报错，则走reject()
// 2-5. 如果then是个函数，则用call执行then，第一个参数是this，后面是成功的回调和失败的回调
// 2-6. 如果成功的回调还是pormise，就递归继续解析
// 2-7. 成功和失败只能调用一个 所以设定一个called来防止多次调用
function resolvePromise(promise2, x, resolve, reject) {
  // 循环引用报错
  if (x === promise2) {
    // reject报错
    return reject(new TypeError("Chaining cycle detected for promise"));
  }
  // 防止多次调用
  let called;
  // x不是null 且x是对象或者函数
  if (x != null && (typeof x === "object" || typeof x === "function")) {
    try {
      // A+规定，声明then = x的then方法
      let then = x.then;
      // 如果then是函数，就默认是promise了
      if (typeof then === "function") {
        // 就让then执行 第一个参数是this 后面是成功的回调 和 失败的回调
        then.call(
          x,
          y => {
            // 成功和失败只能调用一个
            if (called) return;
            called = true;
            // resolve的结果依旧是promise 那就继续解析
            resolvePromise(promise2, y, resolve, reject);
          },
          err => {
            // 成功和失败只能调用一个
            if (called) return;
            called = true;
            reject(err); // 失败了就失败了
          }
        );
      } else {
        resolve(x); // 直接成功即可
      }
    } catch (e) {
      // 也属于失败
      if (called) return;
      called = true;
      // 取then出错了那就不要在继续执行了
      reject(e);
    }
  } else {
    resolve(x);
  }
}

// 结构六，其他问题
// 1. 规范规定onFulfilled,onRejected都是可选参数，如果他们不是函数，必须被忽略
// 1-1. onFulfilled返回一个普通的值，成功时直接等于 value => value
// 1-2. onRejected返回一个普通的值，失败时如果直接等于 value => value，
//      则会跑到下一个then中的onFulfilled中，所以直接扔出一个错误reason => throw err
// 2. 规范规定onFulfilled或onRejected不能同步被调用，必须异步调用。
// 2-1. 我们就用setTimeout解决异步问题
// 2-2. 如果onFulfilled或onRejected报错，则直接返回reject()
class Promise {
  constructor(executor) {
    this.state = "pending";
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = value => {
      if (this.state === "pending") {
        this.state = "fulfilled";
        this.value = value;
        this.onResolvedCallbacks.forEach(fn => fn());
      }
    };
    let reject = reason => {
      if (this.state === "pending") {
        this.state = "rejected";
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };
    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  then(onFulfilled, onRejected) {
    // onFulfilled如果不是函数，就忽略onFulfilled，直接返回value
    onFulfilled =
      typeof onFulfilled === "function" ? onFulfilled : value => value;
    // onRejected如果不是函数，就忽略onRejected，直接扔出错误
    onRejected =
      typeof onRejected === "function"
        ? onRejected
        : err => {
            throw err;
          };
    let promise2 = new Promise((resolve, reject) => {
      if (this.state === "fulfilled") {
        // 异步
        setTimeout(() => {
          try {
            let x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      }
      if (this.state === "rejected") {
        // 异步
        setTimeout(() => {
          // 如果报错
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      }
      if (this.state === "pending") {
        this.onResolvedCallbacks.push(() => {
          // 异步
          setTimeout(() => {
            try {
              let x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          // 异步
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });
    // 返回promise，完成链式
    return promise2;
  }
}

// Promise.resolve方法
Promise.resolve = function(val) {
  return new Promise((resolve, reject) => {
    resolve(val);
  });
};
// Promise.reject方法
Promise.reject = function(val) {
  return new Promise((resolve, reject) => {
    reject(val);
  });
};
// Promise.race方法
Promise.race = function(promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(resolve, reject);
    }
  });
};
// Promise.all方法(获取所有的promise，都执行then，把结果放到数组，一起返回)
Promise.all = function(promises) {
  let arr = [];
  let i = 0;
  function processData(index, data) {
    arr[index] = data;
    i++;
    if (i == promises.length) {
      resolve(arr);
    }
  }
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(data => {
        processData(i, data);
      }, reject);
    }
  });
};

// 其他方式实现Promise.all
if (!Promise.all) {
  Promise.all = function(promiseArray) {
    return new Promise(function(resolve, reject) {
      //判断参数类型
      if (!Array.isArray(promiseArray)) {
        return reject(new TypeError("arguments muse be an array"));
      }

      var counter = 0,
        promiseNum = promiseArray.length,
        resolvedArray = new Array(promiseNum);

      for (var i = 0; i < promiseNum; i++) {
        (function(i) {
          Promise.resolve(promiseArray[i]).then(
            function(value) {
              counter++;
              // resolvedArray.push(value);
              resolvedArray[i] = value; // 原始运算符始终比函数调用要高效
              if (counter == promiseNum) {
                return resolve(resolvedArray);
              }
            },
            function(reason) {
              return reject(reason);
            }
          );
        })(i);
      }
    });
  };
}

// 可以用promises-aplus-tests包测试

typeof "hello"; // 'string'
typeof true; // 'boolean'
typeof 100; // 'number'
typeof undefined; // 'undefined'
typeof null; // 'object'
typeof function() {}; // 'function'

var aa;
typeof aa; // 'undefined'
typeof bb; // 'undefined'
delete aa; // false
delete bb; // true

// 另外注意
null == undefined;  // true , 实际上undefined值是派生自null值的(null出现的早)
null === 0 ; // true ,+ 其实就是数字转化，相当于Number(null)
Number(null) === 0; // true
-null === -0; // true , - 也是数字转化，但有符号问题
+ 0 === -0; // true

var octalNum1 = 070; // 8进制56 即 (7 * 8 + 0 * 8)
var octalNum2 = 079; // 无效的8进制，丢弃前导0，后面解析为10进制，即79
var octalNum3 = 08; // 无效的8进制，丢弃前导0，后面解析为10进制，即8

var num1 = 0o71; // 8进制57 即 (7 * 8^1 + 1 * 8^0)

var hexNum1 = 0xa; // 十六进制10
var hexNum2 = 0xa; // 十六进制10
var hexNum3 = 0x1f; // 十六进制31 即 1 * 16^1 + 15 * 16^0

var floatNum1 = 3.125e7; // 等于31250000，即3.125 * 10^7
var floatNum2 = 0.0000003; // 等于3e-7

0.1 + 0.2 === 0.30000000000000004; // 小数点后正好17位
0.15 + 0.15 === 0.3; // true

// 注意结果有的为字符串格式
(0.1 + 0.2).toFixed(10); // '0.3000000000'
parseFloat((0.1 + 0.2).toFixed(10));   // 0.3
( 0.1 + 0.2 ).toPrecision(1); // '0.3'
parseFloat((0.1 + 0.2).toPrecision(1)); // 0.3

// 针对大多数浏览器
Number.MAX_VALUE; // 保存着最大值 1.7976931348623157e+308
Number.MIN_VALUE; // 保存着最小值 5e-324

Number.MAX_VALUE * 2; // 最大值溢出，显示为Infinity
Number.MIN_VALUE - 2e308; // 最小值溢出，显示为-Infinity

Number.MIN_VALUE - 2e307; // -2e+307
Number.MIN_VALUE - 2; // -2，此时和精度有关
Number.MIN_VALUE / 2; //  0，此时和精度有关

Number.POSITIVE_INFINITY; //  Infinity，保存着溢出后的最大值
Number.NEGATIVE_INFINITY; // -Infinity，保存着溢出后的最小值

var overflowMaxVal = Number.MAX_VALUE * 2;
var overflowMinVal = Number.MIN_VALUE - 2e308;

isFinite(overflowMaxVal); // false
isFinite(overflowMinVal); // false
isFinite(666); // true

isNaN(NaN); // true
isNaN("string"); // true
isNaN(undefined); // true
isNaN({}); // true

isNaN(10); // false
isNaN("10"); // false，'10'会被转换10
isNaN(true); // false，true会被转换1
isNaN(null); // false，null会被转换0

// 如何让 a == 1 && a == 2 && a == 3

const a = {
  value: [3,2,1],
  valueOf(){ return this.value.pop() }
}
a == 1 && a == 2 && a == 3;    // true

// 其实下面的这几个没必要调用valueOf，因为都是原始值
1.230.valueOf()                  // 1.23
'1.230'.valueOf()                // '1.230'
true.valueOf()                   // true
null.valueOf()                   // Cannot read property 'valueOf' of null
undefined.valueOf()              // 同上

// Date对象转换后，直接就是数字了，直接调用数字转化规则
new Date().valueOf()             // 1551667119234 距今的毫秒数

// 下面几个对象转换之后仍然是对象，因此需要再调用toString()
[].valueOf()                     // []
["ABC", true, 12, -5].valueOf()  // ["ABC", true, 12, -5]
({}).valueOf()                   // {}
({a:1}).valueOf()                // {a:1}
(function(){}).valueOf()         // function(){}

[].valueOf().toString()                     // ''
["ABC", true, 12, -5].valueOf().toString()  // "ABC,true,12,-5"
({}).valueOf().toString()                   // "[object Object]"
({a:1}).valueOf().toString()                // "[object Object]"
(function(){}).valueOf().toString()         // "function(){}"

console.log(1 + "5"); // "15"
console.log([1, 3, 5] + 1); // "1,3,51"
console.log(10 + true); // 11
console.log(15 + {}); // "15[object Object]"
console.log(8 + null); // 8
console.log("queen" + null); // "queennull"
console.log({} + null); // "[object Object]null"
console.log(12 + undefined); // NaN
console.log("w3cplus" + undefined); // "w3cplusundefined"
console.log([] + null); // "null"
console.log([] + undefined); // "undefined"
console.log([] + "w3cplus"); // "w3cplus"

// 前置减号和前置加号，都优先转换为数字再计算
console.log(+"12" + "34"); // '1234'
console.log(+"12" + 34); // 46
console.log(+12 + "34"); // '1234'
console.log(+12 + 34); // 46

console.log(-"12" + "34"); // '-1234'
console.log(-"12" + 34); // 22
console.log(-12 + "34"); // '-1234'
console.log(-12 + 34); // 22

// 减号在中间，两侧都转换为数值，否则为NaN
console.log("11" + 2 - "1"); // 111  数字
console.log("12" - "34"); // -22
console.log("12" - "34a"); // NaN
console.log("12" - 34); // -22
console.log(12 - "34"); // -22
console.log(12 - 34); // -22

parseInt(" "); // NaN，而Number(' ') => 0
parseInt("1.1"); // 1, 符号.在parseInt里为无效符号
parseInt("123abc"); // 123
parseInt("0xf"); // 15

parseInt("071"); // 57，在ES3引擎上为8进制

parseInt("011", 2); // 3
parseInt("011"); // 11
parseInt("071"); // 71
parseInt("071", 8); // 57
parseInt("0o71"); // 0
parseInt("0o71", 8); // 0
parseInt("0b11"); // 0

// string 要被解析的值。如果参数不是一个字符串，则将其转换为字符串(使用toString 抽象操作)
// radix 一个介于2和36之间的整数(数学系统的基础)，表示上述字符串的基数。当未指定基数时，不同的实现会产生不同的结果，通常将值默认为10，如果指定0也按10处理。
parseInt(string, radix);

// 以下例子均返回15
parseInt("0xF", 16);
parseInt("F", 16);
parseInt("17", 8);
parseInt(021, 8); // 和parseInt('021', 8) => 17不同
parseInt("015", 10); // parseInt(015, 10); 返回 15
parseInt(15.99, 10);
parseInt("15,123", 10);
parseInt("FXX123", 16);
parseInt("1111", 2);
parseInt("15 * 3", 10);
parseInt("15e2", 10);
parseInt("15px", 10);
parseInt("12", 13);

// 以下例子均返回 NaN:
parseInt("Hello", 8); // 根本就不是数值
parseInt("546", 2); // 除了“0、1”外，其它数字都不是有效二进制数字

// 以下例子均返回 -15：
parseInt("-F", 16);
parseInt("-0F", 16);
parseInt("-0XF", 16);
parseInt(-15.1, 10);
parseInt(" -17", 8);
parseInt(" -15", 10);
parseInt("-1111", 2);
parseInt("-15e1", 10);
parseInt("-12", 13);

// 下例中也全部返回 17，因为输入的 string 参数以 "0x" 开头时作为十六进制数字解释，而第二个参数假如经过 Number 函数转换后为 0 或 NaN，则将会忽略而仍然解析为十六进制
parseInt("0x11", 16);
parseInt("0x11", 0);
parseInt("0x11", NaN);
// 如果给十六进制数传其他进制，则无法识别，直接返回0
parseInt("0x11", 8); // 0

// 另外被解析参数的第一个字符若无法被转换，则返回NaN
parseInt("211", 2); // 返回 NaN，因为二进制不可能有2
parseInt("a11", 2); // 返回 NaN，因为二进制无法转换a字符

parseInt(021, 8); // 15
parseInt(0x21, 8); // 27, 2*16^1 + 1 => 33, 33 => 3*8^1 + 3 => 27
parseInt(022, 8); // 1, 2*8 + 2 => 18 ,18的8对于8进制无效，因此为1
parseInt(019, 8); // 1, 019的9是非法8进制数，因此只识别01也就是1，再转一次也是1

// 面试题
['1', '2', '3'].map(parseInt)
// 这里其实考察两个点：map函数的参数和parseInt字符串转化
// map函数的参数是回调函数cb(currentVal[, index ,[, array]])，注意这里的index
// 所以相当与执行下面的逻辑
parseInt('1', 0) // 1， 基数为0依然按照10处理
parseInt('2', 1) // NaN， 基数1，不可能是2
parseInt('3', 2) // NaN， 基数2，不可能是有3

"a \n".length; // 3
("b \u03a3"); // 'b ∑'

var str = "java";
str = "java" + "script";

(10).toString(); // '10' ，之所以加()，因为小数点优先级高，会把10.toString看成数值而出错
(10).toString(2);// '1010'
(10).toString(8);// '12'
(10).toString(16); // 'a'
"10".toString(16); // '10'，注意此处传参了，但调用toString的不是数值，原样输出

// 声明变量
var num1 = 1,
  num2 = 2,
  num3 = 3;

// 赋值
var num = (5, 1, 4, 8); // num的值为8

var person = new Object();

var person = {
  name: "jane",
  home: "beijing", // 属性名可以使用字符串
  66: true, // 数值属性会自动转为字符串
  age: 18 // 在老的浏览器，最后一个属性后加,号，会出错
};

var propertyName = "name";
person[propertyName]; // 变量
person["first name"]; // 特殊字符空格

var arr1 = new Array();
var arr2 = new Array(20); // length为20的数组（传递一项且为数值则为长度）
var arr3 = new Array("red"); // 只包含一项'red'的数组(传递一项且为非数值则为内容)
var arr4 = new Array("red", "blue");
var arr5 = Array("red", "blue"); // 还可以不用new操作符

var arr6 = ["red", "blue"];
var arr6 = [1, 2];
var arr6 = [, , ,]; // 几个逗号length便为几，值undefined

var colors = ["red", "blue", "green"];

colors.toString(); // 返回字符串，"red,blue,green"
colors.valueOf(); // 返回数组，["red", "blue", "green"]
alert(colors); // alert接收字符串参数，后台会调用toString()方法

var person1 = {
  toLocaleString: function() {
    return "Nikolaos";
  },

  toString: function() {
    return "Nicholas";
  }
};

var person2 = {
  toLocaleString: function() {
    return "Grigorios";
  },

  toString: function() {
    return "Greg";
  }
};

var people = [person1, person2];
alert(people); // Nicholas,Greg
alert(people.toString()); // Nicholas,Greg
// 此处如果没有toLocaleString则调用toString()，如果都没有则返回'[object Object]'
alert(people.toLocaleString()); // Nikolaos,Grigorios

[null, undefined, "see"].join(); // ',,see'
[null, undefined, "see"].toString(); // ',,see'
[null, undefined, "see"].toLocaleString(); // ',,see'
[null, undefined, "see"].valueOf(); // 数组调用返回自身 [null, undefined, "see"]

var arr = [];
arr.push("red", "blue"); // 2，返回数组length
arr.pop(); // 弹出最后一项并返回，没有参数

var arr = [];
arr.unshift("red", "blue"); // 2，返回数组length
arr.shift(); // 弹出最前面一项并返回，没有参数

var values = [0, 1, 5, 10, 15];
// 这里虽然5小于10，但进行字符串比较时，'10'则位于'5'前面
values.sort(); // [0, 1, 10, 15, 5]，修改了原数组

// compare每次都会接收values数组中的两项作为参数，进行比较
function compare(val1, val2) {
  if (val1 < val1) {
    return -2;
  } else if (val1 > val1) {
    return 2;
  } else {
    return 0;
  }
}

var values = [0, 1, 5, 10, 15];
values.sort(compare); // [0, 1, 5, 10, 15]

"a" < "b"; // true
"a" - "b"; // NaN

// 对于数值类型或其valueOf()方法会返回数值类型的对象类型
function compare(val1, val2) {
  return val1 - val2;
}

var arr = ["red", "blue", "yellow"];
arr.slice(1); // ['blue', 'yellow']
arr.slice(1, 2); // ['blue']
arr.slice(-2, -1); // ['blue'], 等价于slice(-2+3, -1+3) => slice(1, 2)
arr.slice(-1, -2); // []
arr; // ['red', 'blue', 'yellow']

var arr = ["red", "blue", "yellow"];
arr.splice(); // []
arr.splice(1, 1); // ['blue']
arr; // ['red', 'yellow']
arr.splice(-1, 0, "code", "js"); // 位置支持负数，只需加上length即可
arr; // ['red', 'code', 'js', 'yellow']

// 可以求和
var values = [1, 2, 3, 4, 5];
var sum = values.reduce((prev, cur, index, array) => {
  return prev + cur;
});
// 第一次执行回调，prev是1，cur是2。第二次prev是3（1加2的结果），cur是3（数组第三项）...直到将数组中项都访问一遍
sum; // 15

// 还可以拍平数组求和，这里涉及数组判断，因此传入0，可以少判断
var arr = [2, [3, 4], [4, [5, 6]]];
var sum = arr => arr.reduce((p, c) => p + (Array.isArray(c) ? sum(c) : c), 0);
sum(arr); // 24

// 拍平数组
var flattenArr = arr =>
  arr.reduce((p, c) => p.concat(Array.isArray(c) ? flattenArr(c) : c), []);
flattenArr(arr); // [2,3,4,4,5,6]

// 循环
const flatten = function(arr) {
  while (arr.some(item => Array.isArray(item))) {
    arr = [].concat(...arr);
  }
  return arr;
};

var now = new Date();

Date.parse(2019); // 1546300800000
Date.parse("2019 1"); // 1546272000000
new Date(Date.parse(2019)); // Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间)
new Date(Date.parse("2019 1")); // Tue Jan 01 2019 00:00:00 GMT+0800 (中国标准时间)

Date.UTC(2019, 0); // 1546300800000 同 Date.parse(2019)
Date.UTC(2019); // 1546300800000，其实月省略后也可以
Date.UTC(2019, 1); // 1548979200000
new Date(Date.UTC(2019, 1)); //Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间)

function getDate() {
  console.log(Date.now()); // 1557651029232
  console.log(+new Date()); // 1557651029232
}

var s1 = "some text";
var s2 = s1.substring(2); // "me text"

var s1 = "some text";
s1.color = "red";
s1.color; // undefined

var str = new Object("test string");
str instanceof String; // true

var num = new Object(666);
num instanceof Number; // true

var booleanVal = new Object(true);
booleanVal instanceof Boolean; // true

var val1 = Number("25"); // 转型函数
typeof val1; // 'number'

var val2 = new Number("25"); // 构造函数
typeof val2; // 'object'

var falseObj = new Boolean(false);
falseObj.valueOf(); // false
falseObj.toString(); // 'false'
falseObj && "look me"; // 'look me'，切忌用基本包装对象的实例用在布尔表达式中

// toFixed(n)方法会按照指定的小数位返回数值的字符串表示。
// n取值0~20（可能有浏览器差异）
var num = 10;
num.toFixed(2); // '10.00'

// 如果数值本身的小数位大于指定的数目，那么接近指定的最大小数位的值就会舍入
// 可能有浏览器差异
var num1 = 10.0005;
num1.toFixed(2); // '10.00'
var num2 = 10.005;
num2.toFixed(2); // '10.01'

// toExponential()方法会返回e表示法表示的数值的字符串形式。
var num3 = 102000;
num3.toExponential(); // "1.02e+5"

// 但是还有一个方法可以自动分析采用toFixed()还是toExponential()
// 也就是方法会根据传入的参数分析数值，选择更适合展示数值的方式
// toPrecision()可以表现1~21位小数(可能有浏览器差异)
var num4 = 99;
num4.toPrecision(1); // '1e+2'
num4.toPrecision(2); // '99'
num4.toPrecision(3); // '99.0'

var str = "hello world";
str.charAt(1); // 'e'
str[1]; // 'e'
str.charCodeAt(1); // 101

// concat()返回拼接后的新字符串，不影响原有字符串
var str1 = "hello";
str1.concat(" world"); // 'hello world'
str1; // 'hello'

var str2 = "hello world";
str2.slice(3); // 'lo world'
str2.substring(3); // 'lo world'
str2.substr(3); // 'lo world'

str2.slice(3, 7); // 'lo w' ，从3开始，不包含索引为7的字符
str2.substring(3, 7); // 'lo w' ，同上
str2.slice(3, 7); // 'lo worl'，从3开始，共7个字符

var str3 = "hello";
str3.slice(-2); // 'lo'
str3.substr(-2); // 'lo'
str3.substring(-2); // 'hello'

str3.slice(-2, -1); // 'l', 等价于slice(3, 4)
str3.substr(-2, -1); // '', 等价于substr(3, 0)
str3.substring(-2, -1); // '', 等价于slice(0, 0)

var str4 = "hello world";
str4.indexOf("o"); // 4
str4.lastIndexOf("o"); // 7

str4.indexOf("o", 5); // 7
str4.lastIndexOf("o", 8); // 7
str4.lastIndexOf("o", 1); // -1，索引的位置都是从前向后数的，即使从最后开始遍历

var stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit";
var positions = [];
var pos = stringValue.indexOf("e");

while (pos > -1) {
  positions.push(pos);
  pos = stringValue.indexOf("e", pos + 1);
}

console.log(positions); // [3, 24, 32, 35, 52]

var text = "cat, bat, sat, fat";
var pattern = /.at/;

var matches = text.match(pattern); // ["cat", index: 0, input: "cat, bat, sat, fat", groups: undefined]
matches.index; // 0
matches[0]; // "cat"
pattern.lastIndex; // 0，可以给正则表达式对象设置lastIndex，但对match方法无效，匹配总是从字符串的第一个字符开始

var text = "cat, bat, sat, fat";
var pattern = /.at/g; // g开启全局搜索模式，匹配到所有匹配的项
pattern.lastIndex = 2;

var matches = text.match(pattern); // ["cat", "bat", "sat", "fat"]，全局模式不含index，input等信息
matches.index; // undefined
pattern.lastIndex; // 0，上面设置无效

var text = "cat, bat, sat, fat";
var result = text.replace("at", "ond");
alert(result); //"cond, bat, sat, fat"

result = text.replace(/at/g, "ond");
alert(result); //"cond, bond, sond, fond"

var text = "cat, bat, sat, fat";
text.replace(/(.at)/g, "word ($1)");
// "word (cat), word (bat), word (sat), word (fat)"

text.replace(/(.at)/, "hello $&");
// "hello cat, bat, sat, fat"

text.replace(/(.at)/g, "hello $&");
// "hello cat, hello bat, hello sat, hello fat"

text.replace(/(.at)/, "hello $`");
// "hello , bat, sat, fat"

text.replace(/(.at)/g, "hello $`");
// "hello , hello cat, , hello cat, bat, , hello cat, bat, sat, "

text.replace(/(.at)/, "hello $'"); // 需转义，或双引号包裹
// "hello , bat, sat, fat, bat, sat, fat"