zjn225 / zjn225.github.io Goto Github PK

Function.prototype.myCall = function (context) {
    if (typeof this !== 'function') {
      throw new TypeError('Error')
    }
    context = context || window
    const mySymbol = Symbol() // 利用Symbol而不是直接在context添加属性，保证了不会覆盖已有属性
    context[mySymbol] = this // 这里的this，是xx.Mycall的xx函数
    const args = [...arguments].slice(1)  // 获取第二个参数开始的参数，也就是除了上下文外的参数
    const result = context[mySymbol](...args) // call可以传入多个参数作为调用函数的参数
    delete context[mySymbol]
    return result
}

window.value = "outer"
let foo = {
    value: "inner"
}
let bar = function () {
    console.log("this", this)
    console.log("value", this.value)
    console.log("------------")
}
bar.myCall(foo);  // value为inner

let that = context[mySymbol];
that(...args)  // 这样子虽然that和context[mySymbol]指针是一样的，但是此时的上下文是指向context[mySymbol]整体的，而不是context

Function.prototype.myApply = function (context) {
    if (typeof this !== 'function') {
      throw new TypeError('Error')
    }
    let result;
    context = context || window
    const mySymbol = Symbol()
    context[mySymbol] = this
    if (arguments[1]) {
        result = context[mySymbol](...arguments[1])
    } else {
        result = context[mySymbol]()
    }
    delete context[mySymbol]
    return result
}

this.value = 2
var foo = {
    value: 1
}
var bar = function() {
  console.log(this.value)
}
var result = bar.bind(foo)
bar() // 2
result() // 1,即this === foo

this.value = 2
var foo = {
    value: 1
};
var bar = function(name, age, school) {
  console.log(name) // 'An'
  console.log(age) // 22
  console.log(school) // '广东财经大学'
}
var result = bar.bind(foo, 'An') //预置了部分参数'An'
result(22, '广东财经大学') //返回的函数能继续传入参数

var value = 2;
var foo = {
    value: 1
};

function bar(name, age) {
    this.habit = 'shopping';
    console.log(this.value);
    console.log(name);
    console.log(age);
}

bar.prototype.friend = 'kevin';

var bindFoo = bar.bind(foo, 'daisy');
// 1
// daisy

var obj = new bindFoo('18'); 
obj.friend === 'kevin'  // 测试new后原型链是否继承父类
// obj == {habit: "shopping"}  obj.friend = 'kevin'
// 实例化的时候也执行了bar函数，此时this是指向bar本身的，所以this.value == undefined，name = "daisy",age=18

// 初始版本,未考虑到原型链，在new一个bind生成的函数的时候，没有继承原函数的原型
Function.prototype.bind2 = function (context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  const _this = this
  const args = [...arguments].slice(1)
  // 返回一个函数
  return function F() {
    // 因为返回了一个函数，我们可以 new F()，所以需要判断
    if (this instanceof F) {
      return _this.apply(this, args.concat(...arguments))
    }
    return _this.apply(context, args.concat(...arguments))
  }
}

// 完全版本
Function.prototype.bind2 = function (oThis) {
    if (typeof this !== 'function') {
        throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }
    var aArgs = Array.prototype.slice.call(arguments, 1),
        that = this,  //保存this值，指的调用bind的函数也就是bar
        fNOP = function () { }, //原型式继承的第一步
        fBound = function () {  //要返回的函数等于后面的foo,再次调用时才执行这里面的代码
            //直接bind的话this=window，new了this=fBound，而fBound.__proto__ = FNOP
            return that.apply(this instanceof fNOP ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
        };
    // 以下两步和上面初始化FNOP相当于原型式继承，等于fbound.prototype = Object.create(this.prototype);
    // 目的是为了在实例化的时候，能让 fBound 构造的实例能够继承绑定函数bar的原型中的值
    fNOP.prototype = that.prototype;
    fBound.prototype = new fNOP();  // fBound.__proto__ = FNOP
    return fBound;
};

var value = 2;

var foo = {
    value: 1
};

function bar(name, age) {
    this.habit = 'shopping';
    console.log(this.value);
    console.log(name);
    console.log(age);
}

bar.prototype.friend = 'kevin';

var bindFoo = bar.bind2(foo, 'daisy');
// 1
// daisy
//当不实例化时,this instanceof FNOP = false，由于是直接执行foo()，相当于window.foo(),所以内部this是window，that是bar
//当实例化后bind出来的新函数后，this是指向本身的，this instanceof FNOP = true，内部this是fBound,而fBound.__proto__ = FNOP,that是bar
var obj = new bindFoo('18'); 
obj.friend === 'kevin'  // 测试new后原型链是否继承父类

export default {
    data () {
        return {
            test: '1'
        };
    },
    methods () {
        handleClick () {
            this.test = '2';
            console.log(this.$refs.test.innerText);//打印“1”
        }
    }
}

export function renderMixin (Vue: Class<Component>) {
  // 省略...
  Vue.prototype.$nextTick = function (fn: Function) {
    return nextTick(fn, this)
  }
  // 省略...
}

getData(res).then(()=>{
  this.xxx = res.data
  this.$nextTick(() => {
    // 这里我们可以获取变化后的 DOM
  })
})

/* @flow */                // 静态类型检测

import { noop } from 'shared/util'   // 空函数
import { handleError } from './error' 
import { isIE, isIOS, isNative } from './env'

export let isUsingMicroTask = false  // 是否使用了microTask

const callbacks = []  // 存储所有需要执行的回调函数
let pending = false  // 用来标志是否正在执行回调函数

// 用来执行callbacks里存储的所有回调函数。
function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0  // 保存回调函数后清空
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

let timerFunc // 宿主环境不同，可能会是以下四种的其中一种

// 检查宿主环境是否支持promise，如果支持，则利用promise来触发执行回调函数；
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)  // IOS兼容，虽然能触发微任务，但是这个微任务不会更新，需要浏览器做一些事情比如注册一个macrotask，即使这个macrotask什么都不做
  }
  isUsingMicroTask = true
  // 如果支持MutationObserver（HTML5中的新API，是个用来监视DOM变动的接口），则实例化一个观察者对象，观察文本节点发生变化时，触发执行所有回调函数。
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  let counter = 1
  const observer = new MutationObserver(flushCallbacks) // 得到实例，里面的回调函数会在实例监听的dom发生改动时触发
  const textNode = document.createTextNode(String(counter))  // 创建一个观测对象
  observer.observe(textNode, {
    characterData: true  //说明监听的dom文本内容有修改
  })
  timerFunc = () => {
    // 修改counter，让实例监听到dom变化，进而执行回调
    // 归根到底就是nextTick想借用这个异步API来执行回调，也就是利用了MutationObserver的回调会被当作microTask来执行
    counter = (counter + 1) % 2  
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
// 检测是否支持setImmediate，此时isUsingMicroTask是false，表示此时所有的回调都注册为宏任务了
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
// 都不支持的话就调用setTimeout，此时isUsingMicroTask是false，表示此时所有的回调都注册为宏任务了
} else {
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}
// 之所以是以上的顺序，是因为执行优先级、以及性能

 /*
    推送到队列中下一个tick时执行
    cb 回调函数
    ctx 上下文
  */
export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 传入的cb会被push进callbacks中存放起来
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })
  // 先判断是否正在执行回调，如果不在执行，就将pengding设为true，然后执行timerFunc
  if (!pending) {
    pending = true
    timerFunc()
  }
  // 这是当 nextTick 不传 cb 参数的时候，提供一个 Promise 化的调用，比如：nextTick().then(() => {})
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

import React, { Component } from 'react'

export default (WrappedComponent, name) => {
  class NewComponent extends Component {
    constructor () {
      super()
      this.state = { data: null }
    }

    componentWillMount () {
      let data = localStorage.getItem(name)
      this.setState({ data })
    }

    render () {
      return <WrappedComponent data={this.state.data} />
    }
  }
  return NewComponent
}

class List extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      list: props.getList()
    };
  }

  handleChange() {
    // 当数据源更新时，更新组件状态
    this.setState({
      list: props.getList()
    });
  }

  render() {
    return (
      <div>
        {this.props.render(this.state)} // 调用父组件的render方法
      </div>
    );
  }
}

class Page extends React.Component {
  //...
  render() {
    return (
        <List getList={DataSource.getItems}
              render={list=>(
                <div>{list.map(item=>(<Item item={item} key={item.id} />))} </div>
             )} /> 
    );
  }
}

import React, { useState, useEffect } from 'react';

function useData(getData) {
  // useState 会返回一对值：当前状态和一个让你更新它的函数
  const [list, setList] = useState([]);
  useEffect(() => {
    function handleChange() {
      setList(getData());
    }

    DataSource.addChangeListener(this.handleChange);
    return () => {
      DataSource.removeChangeListener(this.handleChange);
    };
  });
  }
  return list;

function ItemList(props) {
  const list = useData(DataSource.getItems);
  return (
    <div>
    {list.map(item=>(<Item item={item} key={item.id}/>))}
    </div>
  )
}

let a = 20;  
const b = 30;  
var c;

function multiply(e, f) {  
 var g = 20;  
 return e * f * g;  
}
c = multiply(20, 30);

// 全局执行上下文
GlobalExectionContext = {  
  ThisBinding: <Global Object>,  // 1.确定this
  LexicalEnvironment: {          // 2.词法环境 
    EnvironmentRecord: {         //   2.1环境记录
      Type: "Object",  
      // 标识符绑定在这里  
      a: < uninitialized >,  
      b: < uninitialized >,  
      multiply: < func >  
    }  
    outer: <null>               //   2.2 对外部环境的引用
  },

  VariableEnvironment: {       //  3.变量环境
    EnvironmentRecord: {       //    3.1环境记录
      Type: "Object",  
      // 标识符绑定在这里  
      c: undefined,  
    }  
    outer: <null>            //      3.2对外部环境的引用
  }  
}

// 函数上下文，类似上
FunctionExectionContext = {  
   
  ThisBinding: <Global Object>,

  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // 标识符绑定在这里  
      Arguments: {0: 20, 1: 30, length: 2},  
    },  
    outer: <GlobalLexicalEnvironment>  
  },

  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // 标识符绑定在这里  
      g: undefined  
    },  
    outer: <GlobalLexicalEnvironment>  
  }  
}

/**
 * Promise 实现 遵循promise/A+规范
 * Promise/A+规范译文:
 * https://malcolmyu.github.io/2015/06/12/Promises-A-Plus/#note-4
 */

// promise 三个状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

function Promise(excutor) {
    let that = this; // 缓存当前promise实例对象
    that.status = PENDING; // 初始状态
    that.value = undefined; // fulfilled状态时 返回的信息
    that.reason = undefined; // rejected状态时 拒绝的原因
    that.onFulfilledCallbacks = []; // 存储fulfilled状态对应的onFulfilled函数
    that.onRejectedCallbacks = []; // 存储rejected状态对应的onRejected函数

    // value为成功态时接收的终值
    function resolve(value) {
        // 如果value是Promise，则再次执行then 
        if (value instanceof Promise) {
            return value.then(resolve, reject);
        }

        // 规范规定要确保 onFulfilled 和 onRejected 方法异步执行，且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。
        setTimeout(() => {
            // 调用resolve 回调对应onFulfilled函数
            if (that.status === PENDING) {
                // 只能由pending状态 => fulfilled状态 (避免调用多次resolve reject)
                that.status = FULFILLED;
                that.value = value;
                that.onFulfilledCallbacks.forEach(cb => cb(that.value));
            }
        });
    }

    // reason失败态时接收的拒因
    function reject(reason) {
        setTimeout(() => {
            // 调用reject 回调对应onRejected函数
            if (that.status === PENDING) {
                // 只能由pending状态 => rejected状态 (避免调用多次resolve reject)
                that.status = REJECTED;
                that.reason = reason;
                that.onRejectedCallbacks.forEach(cb => cb(that.reason));
            }
        });
    }

    // 捕获在excutor执行器中抛出的异常，栗子如下
    // new Promise((resolve, reject) => {
    //     throw new Error('error in excutor')
    // })
    try {
        excutor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

/**
 * resolve中的值几种情况：
 * 1.普通值
 * 2.promise对象
 * 3.thenable对象/函数，有then方法的函数或对象
 * 2和3统一处理
 */

/**
 * 用来处理then方法返回结果包装成promise 方便链式调用
 * 对resolve 进行改造增强 针对resolve中不同值情况 进行处理
 * @param  {promise} promise2 promise1.then方法返回的新的promise对象
 * @param  {[type]} x         promise1中onFulfilled或onRejected的返回值
 * @param  {[type]} resolve   promise2的resolve方法，传进来方便更改promise最后的状态
 * @param  {[type]} reject    promise2的reject方法，传进来方便更改promise最后的状态
 */
function resolvePromise(promise2, x, resolve, reject) {
    // 如果从onFulfilled中返回的x 就是promise2本身 就会导致循环引用报错，自己等待自己，一辈子等不完
    if (promise2 === x) {
        return reject(new TypeError('循环引用'));
    }
      // 用来记录promise2的状态改变，一旦发生改变了 就不允许 再改成其他状态  成功和失败只能只能调用一个  限制既调resolve，也调reject
      // 主要是调用then方法的时候用的，和递归没什么关系   
    let called = false;
    if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
        // 如果x是一个对象或者函数 那么他就有可能是promise 需要注意 null typeof也是 object 所以需要排除掉
        // 先获得x中的then 如果这一步发生异常了，那么就直接把异常原因reject掉
        try {
            let then = x.then;
            if (typeof then === 'function') {
                // 如果then是个函数 那么就调用then 并且把成功回调和失败回调传进去；如果then是函数，就默认当作是promise了
                // 如果此时x是一个promise 并且最终状态时成功，那么就会执行成功的回调，如果失败就会执行失败的回调如果失败了，就把失败的原因reject出去，作为promise2的失败原因，直到成功了就取成功的value
                // 以x，也就是Promise作为上下文，value为成功的值，开始执行then方法，这个value有可能仍然是promise，所以需要递归调用resolvePromise这个方法 直达返回值不是一个promise
                // 至于为什么用call，因为then.xxx时，this是window而不是Promise本身了
                then.call(x, value => {
                    if (called) return;
                    called = true;
                    resolvePromise(promise2, value, resolve, reject)
                }, error => {
                    if (called) return
                    called = true;
                    reject(error)
                })
            } else {
                resolve(x)
            }
        } catch (error) {
            if (called) return
            called = true;
            reject(error)
        }
    } else {
        // 如果是一个普通值 那么就直接把x作为promise2的成功value resolve掉
        resolve(x)
    }
}
/**
 * [注册fulfilled状态/rejected状态对应的回调函数]
 * @param  {function} onFulfilled fulfilled状态时 执行的函数
 * @param  {function} onRejected  rejected状态时 执行的函数
 * @return {function} newPromsie  返回一个新的promise对象
 */
Promise.prototype.then = function (onFulfilled, onRejected) {
    const that = this;
    let newPromise;
    // 处理参数默认值 保证参数后续能够继续执行（处理值穿透）
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value;
    onRejected = typeof onRejected === "function" ? onRejected : reason => { throw reason; };

    // then里面的FULFILLED/REJECTED状态时 为什么要加setTimeout ?
    // 原因:
    // 其一 2.2.4规范 要确保 onFulfilled 和 onRejected 方法异步执行(且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行) 所以要在resolve里加上setTimeout
    // 其二 2.2.6规范 对于一个promise，它的then方法可以调用多次.（当在其他程序中多次调用同一个promise的then时 由于之前状态已经为FULFILLED/REJECTED状态，则会走的下面逻辑),所以要确保为FULFILLED/REJECTED状态后 也要异步执行onFulfilled/onRejected

    // 其二 2.2.6规范 也是resolve函数里加setTimeout的原因
    // 总之都是 让then方法异步执行 也就是确保onFulfilled/onRejected异步执行

    // 如下面这种情景 多次调用p1.then
    // p1.then((value) => { // 此时p1.status 由pending状态 => fulfilled状态
    //     console.log(value); // resolve
    //     // console.log(p1.status); // fulfilled
    //     p1.then(value => { // 再次p1.then 这时已经为fulfilled状态 走的是fulfilled状态判断里的逻辑 所以我们也要确保判断里面onFuilled异步执行
    //         console.log(value); // 'resolve'
    //     });
    //     console.log('当前执行栈中同步代码');
    // })
    // console.log('全局执行栈中同步代码');
    //

    if (that.status === FULFILLED) { // 成功态
        return newPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                try {
                    let x = onFulfilled(that.value);
                    resolvePromise(newPromise, x, resolve, reject); // 新的promise resolve 上一个onFulfilled的返回值
                } catch (e) {
                    reject(e);
                }
            });
        })
    }

    if (that.status === REJECTED) { // 失败态
        return newPromise = new Promise((resolve, reject) => {
            setTimeout(() => {
                try {
                    let x = onRejected(that.reason);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            });
        });
    }

    if (that.status === PENDING) { // 等待态
        // 当异步调用resolve/rejected时 将onFulfilled/onRejected收集暂存到集合中
        return newPromise = new Promise((resolve, reject) => {
            that.onFulfilledCallbacks.push((value) => {
                try {
                    let x = onFulfilled(value);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            });
            that.onRejectedCallbacks.push((reason) => {
                try {
                    let x = onRejected(reason);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            });
        });
    }
};

/**
 * Promise.all Promise进行并行处理
 * 参数: promise对象组成的数组作为参数
 * 返回值: 返回一个Promise实例
 * 当这个数组里的所有promise对象全部变为resolve状态的时候，才会resolve。
 */
Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let done = gen(promises.length, resolve);
        promises.forEach((promise, index) => {
            promise.then((value) => {
                done(index, value)
            }, reject)
        })
    })
}

function gen(length, resolve) {
    let count = 0;
    let values = [];
    return function (i, value) {
        values[i] = value;
        if (++count === length) {
            console.log(values);
            resolve(values);
        }
    }
}

/**
 * Promise.race
 * 参数: 接收 promise对象组成的数组作为参数
 * 返回值: 返回一个Promise实例
 * 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理(取决于哪一个更快)
 */
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        promises.forEach((promise, index) => {
            promise.then(resolve, reject);
        });
    });
}

// 用于promise方法链时 捕获前面onFulfilled/onRejected抛出的异常
Promise.prototype.catch = function (onRejected) {
    return this.then(null, onRejected);
}

Promise.resolve = function (value) {
    return new Promise(resolve => {
        resolve(value);
    });
}

Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    });
}

/**
 * 基于Promise实现Deferred的
 * Deferred和Promise的关系
 * - Deferred 拥有 Promise
 * - Deferred 具备对 Promise的状态进行操作的特权方法（resolve reject）
 *
 *参考jQuery.Deferred
 *url: http://api.jquery.com/category/deferred-object/
 */
Promise.deferred = function () { // 延迟对象
    let defer = {};
    defer.promise = new Promise((resolve, reject) => {
        defer.resolve = resolve;
        defer.reject = reject;
    });
    return defer;
}

/**
 * Promise/A+规范测试
 * npm i -g promises-aplus-tests
 * promises-aplus-tests Promise.js
 */

try {
    module.exports = Promise
} catch (e) {
}

npm i -g promises-aplus-tests
promises-aplus-tests index.js

// 定义三种状态、resolve和reject方法、then方法（onFulfilled、onRejected）
function myPromise(constructor) {
    this.status = "pending" //定义初始状态
    this.value = undefined;//存储成功后的值
    this.reason = undefined;//存储失败的原因
    let resolve = value => {
        if (this.status === "pending") {
            this.status = "resolved";
            this.value = value;
        }
    }
    let reject = reason => {
        if (this.status === "pending") {
            this.status = "rejected";
            this.reason = reason;
        }
    }
    //捕获构造异常
    try {
        constructor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

myPromise.prototype.then = function (onFulfilled, onRejected) {
    // 状态为fulfilled，执行onFulfilled，传入成功的值
    if (this.status === 'resolved') {
        onFulfilled(this.value);
    };
    // 状态为rejected，执行onRejected，传入失败的原因
    if (this.status === 'rejected') {
        onRejected(this.reason);
    };
}

var p = new myPromise(function (resolve, reject) { resolve(1) });
console.log(p)  //结果是返回一个构造函数，myPromise {status: "resolved", value: 1, reason: undefined}reason: undefinedstatus: "resolved"value: 1__proto__: Object
p.then(function (x) { console.log(x) })

// 定义三种状态、resolve和reject方法、then方法（onFulfilled、onRejected）
// 支持异步resolve.

function myPromise(constructor) {
    this.status = "pending" //定义初始状态
    this.value = undefined;//存储成功后的值
    this.reason = undefined;//存储失败的原因

    // 成功存放的数组
    this.onResolvedCallbacks = [];
    // 失败存放法数组
    this.onRejectedCallbacks = [];

    let resolve = value => {
        if (this.status === "pending") {
            console.log(1)
            this.status = "resolved";
            this.value = value;
            // 一旦resolve执行，调用成功数组的函数
            this.onResolvedCallbacks.forEach(fn => fn());
            console.log(2)
        }
    }
    let reject = reason => {
        if (this.status === "pending") {
            this.status = "rejected";
            this.reason = reason;
            // 一旦reject执行，调用失败数组的函数
            this.onRejectedCallbacks.forEach(fn => fn());
        }
    }
    //捕获构造异常
    try {
        constructor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

myPromise.prototype.then = function (onFulfilled, onRejected) {
    // 状态为fulfilled，执行onFulfilled，传入成功的值
    if (this.status === 'resolved') {
        onFulfilled(this.value);
    };
    // 状态为rejected，执行onRejected，传入失败的原因
    if (this.status === 'rejected') {
        onRejected(this.reason);
    };
    // 当状态status为pending时
    if (this.status === 'pending') {
        // onFulfilled传入到成功数组
        this.onResolvedCallbacks.push(() => {
            onFulfilled(this.value);
        })
        // onRejected传入到失败数组
        this.onRejectedCallbacks.push(() => {
            onRejected(this.reason);
        })
    }
}

// ------------------------------------------
// 如果按版本1，那么主线程上的同步任务也就是3和4是已经执行完了，最后只是执行了resolve方法，then方法未执行
// 所以用两个数组来临时存储下异步的方法，刚开始也是直接执行then,但是这次全给添加到数组里去了，当定时器时间到了执行resolve方法时，直接执行数组里的方法即可
var p2 = new myPromise(function (resolve, reject) { setTimeout(function () { resolve(22) }, 2000) });
p2.then(function (x) { console.log("x",x) })  //22
console.log("p2", p2)

let myCanvas = document.getElementById("myCanvas");
myCanvas.width = "500";
myCanvas.height = "300";

var ctx = myCanvas.getContext("2d");
//画三角形
ctx.moveTo(50, 50);
ctx.lineTo(250, 100);
ctx.lineTo(50, 200);
ctx.lineTo(50, 50);

//画直线
ctx.moveTo(350, 50);
ctx.lineTo(350, 200);

//定义画线样式
ctx.strokeStyle = "red";
ctx.lineWidth = "5";

ctx.lineCap = "round"; // 线条两端的形状
ctx.lineJoin = "miter" // 线条交界处形状

ctx.stroke();

ctx.beginPath();  // 第一个状态的beginPath可省略
ctx.moveTo(50, 50); // 有beginPath可改成lineTo()
ctx.lineTo(250, 100);
ctx.lineTo(50, 200);
ctx.lineTo(50, 50); // 用了closePath可省此句 
ctx.closePath() // 绘制封闭图形时closePath可避免粗线条时显示问题
// ctx.fillStyle = "blue";
// ctx.fill();  // 填充
ctx.strokeStyle = "red";
ctx.stroke();

ctx.beginPath();
ctx.moveTo(350, 50);
ctx.lineTo(350, 200);
ctx.strokeStyle = "yellow";
ctx.stroke();

let image = new Image();    
image.src = "img/img.png";
image.onload = function() {
  context.drawImage(image, 0, 0);
}

function drawImageByScale(scale) {
    let imageWidth = 1152 * scale
    let imageHeight = 768 * scale
    // 计算缩放后图片的起始点，如果是放大的，那么<0，如果小到溢出画布的部分不会被显示
    x = canvas.width / 2 - imageWidth / 2
    y = canvas.height / 2 - imageHeight / 2
    // 先清除画布，然后进行绘制缩放后的图片
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.drawImage(image, x, y, imageWidth, imageHeight)
}

function drawImage(image, scale) {
    imageWidth = 1152 * scale
    imageHeight = 768 * scale
    x = canvas.width / 2 - imageWidth / 2
    y = canvas.height / 2 - imageHeight / 2
    context.clearRect(0, 0, canvas.width, canvas.height)
    // 绘制原图
    context.drawImage(image, x, y, imageWidth, imageHeight)
    // 绘制水印
    context.drawImage(watermarkCanvas, canvas.width - watermarkCanvas.width,
        canvas.height - watermarkCanvas.height)
}

<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
    您的浏览器尚不支持canvas
</canvas>
<canvas id="offCanvas" style="display: none"></canvas>
    
// 主canvas
let canvas = document.getElementById("canvas")
let context = canvas.getContext("2d")
// 离屏canvas
let offCanvas = document.getElementById("offCanvas")
let offContext = offCanvas.getContext("2d")

let image = new Image()
let isMouseDown = false
let scale

window.onload = function () {
    canvas.width = 1152
    canvas.height = 768

    image.src = "img-lg.jpg"
    image.onload = function () {
        offCanvas.width = image.width
        offCanvas.height = image.height
        scale = offCanvas.width / canvas.width
        context.drawImage(image, 0, 0, canvas.width, canvas.height)
        offContext.drawImage(image, 0, 0)
    }
}

// 返回鼠标相对于canvas左上角的坐标
function windowToCanvas(x, y) {
    let bbox = canvas.getBoundingClientRect()
    return { x: x - bbox.left, y: y - bbox.top }
}

// 鼠标按下
canvas.onmousedown = function (e) {
    e.preventDefault()
    isMouseDown = true
    point = windowToCanvas(e.clientX, e.clientY)
    drawCanvasWithMagnifier(true, point)
}

// 鼠标松开
canvas.onmouseup = function (e) {
    e.preventDefault()
    isMouseDown = false
    drawCanvasWithMagnifier(false)
}

// 鼠标移出canvas区域
canvas.onmouseout = function (e) {
    e.preventDefault()
    isMouseDown = false
    drawCanvasWithMagnifier(false)
}

// 鼠标在canvas区域内移动
canvas.onmousemove = function (e) {
    e.preventDefault()
    if (isMouseDown == true) { // 即为按下同时滑动
        point = windowToCanvas(e.clientX, e.clientY)
        drawCanvasWithMagnifier(true, point)
    }
}

// 在离屏canvas上绘制放大镜
function drawCanvasWithMagnifier(isShowMagnifier, point) {
    // 先在主canvas上清除一下，然后绘制原图
    context.clearRect(0, 0, canvas.width, canvas.height)
    context.drawImage(image, 0, 0, canvas.width, canvas.height)
    if (isShowMagnifier === true) {
        drawMagnifier(point)
    }
}

function drawMagnifier(point) {
    let mr = 200  // 放大镜半径
    let imageLG_cx = point.x * scale
    let imageLG_cy = point.y * scale
    // 缩放后的x、y值减去半径，得到离屏canvas的开始坐标
    let sx = imageLG_cx - mr 
    let sy = imageLG_cy - mr
    // canvas的开始坐标
    let dx = point.x - mr
    let dy = point.y - mr

    context.save() // 保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作

    context.lineWidth = 10.0
    context.strokeStyle = "#069"

    context.beginPath()
    // 点击的当前坐标为圆心绘制圆形放大镜
    context.arc(point.x, point.y, mr, 0, Math.PI * 2, false)
    context.stroke()
    context.clip()// 裁剪区域，设定裁剪区域后，只有在区域内的图像才能显示，其余部分会被屏蔽掉
    // 将offCanvas上起点为(sx,sy)的区域----渲染到---->canvas上起点为(dx,dy)的区域  
   // 至于*2，是因为mr只是半径
   context.drawImage(offCanvas, sx, sy, 2 * mr, 2 * mr, dx, dy, 2 * mr, 2 * mr)

    context.restore()  // 用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响
}

function greyEffect() {
    var imageData = contexta.getImageData(0, 0, canvasa.width, canvasa.height)
    var pixelData = imageData.data
    for (var i = 0; i < canvasb.width * canvasb.height; i++) {
        var r = pixelData[i * 4 + 0]
        var g = pixelData[i * 4 + 1]
        var b = pixelData[i * 4 + 2]
        var grey = r * 0.3 + g * 0.59 + b * 0.11
        pixelData[i * 4 + 0] = grey
        pixelData[i * 4 + 1] = grey
        pixelData[i * 4 + 2] = grey
    }
    contextb.putImageData(imageData, 0, 0, 0, 0, canvasb.width, canvasb.height)
    context.putImageData()
}

console.log(1)
setTimeout(function() {
  //settimeout1
  console.log(2)
}, 0);
const intervalId = setInterval(function() {
  //setinterval1
  console.log(3)
}, 0)
setTimeout(function() {
  //settimeout2
  console.log(10)
  new Promise(function(resolve) {
    //promise1
    console.log(11)
    resolve()
  })
  .then(function() {
    console.log(12)
  })
  .then(function() {
    console.log(13)
    clearInterval(intervalId)
  })
}, 0);

//promise2
Promise.resolve()
  .then(function() {
    console.log(7)
  })
  .then(function() {
    console.log(8)
  })
console.log(9)

1 - 9 - 7 - 8 - 2 - 3 - 10 - 11 - 12 -13

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

async function async1() {
    console.log('async1 start');
    Promise.resolve(async2()).then(()=>console.log('async1 end'))
}
async function async2() {
    console.log('async2');
}
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

componentDidMount() {
    axios.get('/list.json').then((res)=>{
        const data = res.data; 
        const action = initListAction(data);   // initListAction来自actionCreators
        store.dispatch(action)
   })
}

componentDidMount(e) {
    const action = getTodoList();  // 返回的是函数
    store.dispatch(action);    // 由于有redux-thunk，会执行这个函数
}

//actionCreater.js
export const getTodoList = () => {
    return (dispatch) => {
       axios.get('/list.json').then((res) => {
          const data = res.data;
          const action = initListAction(data);
          dispatch(action);   // 也就是前面说的发出action后，到现在才执行Reducer,因为现在Action是对象了
      })
   }
}

import * as babylon from "babylon"; // js的词法解析器
import traverse from "babel-traverse"; // 遍历ast
import generate from "babel-generator"; // 根据ast生成代码

const code = `const a = 5;`

// 解析生成ast
const ast = babylon.parse(code);

// 遍历ast做修改
traverse(ast,{
    enter(path){
        if(path.node.type === 'VariableDeclaration' ){
            path.node.kind = 'var'
        }
    }
})

// 生成代码
let res = generate(ast,{},code).code

console.log(res)

<body>
    <div class='wrapper'>
        <button class='like-btn'>
            <span class='like-text'>点赞</span>
            <span>👍</span>
        </button>
    </div>
</body>
// --------------------------------------------------
const button = document.querySelector('.like-btn')
const buttonText = button.querySelector('.like-text')
let isLiked = false
button.addEventListener('click', () => {
    isLiked = !isLiked
    if (isLiked) {
        buttonText.innerHTML = '取消'
    } else {
        buttonText.innerHTML = '点赞'
    }
}, false)

class LikeButton {
    render() {
        return `
        <button id='like-btn'>
          <span class='like-text'>赞</span>
          <span>👍</span>
        </button>
      `
    }
}
// ----------------------------------------
const wrapper = document.querySelector('.wrapper')
const likeButton1 = new LikeButton()
wrapper.innerHTML = likeButton1.render()

const likeButton2 = new LikeButton()
wrapper.innerHTML += likeButton2.render()

const createDOMFromString = (domString) => {
    const div = document.createElement('div')
    div.innerHTML = domString
    return div
}
class LikeButton {
    constructor() {
        this.state = { isLiked: false }
    }
    setState(state) {
        const oldEl = this.el
        this.state = state
        this.el = this.render()
        this.onStateChange && this.onStateChange(oldEl, this.el) // 实例化后被创建
    }
    changeLikeText() {
        this.setState({
            isLiked: !this.state.isLiked
        })
    }

    render() {
        this.el = createDOMFromString(`
        <button class='like-btn'>
          <span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span>
          <span>👍</span>
        </button>
      `)
        // 如果不通过bind，那么真正执行的时候changeLikeText里面的this是window
        // 因为new的时候是直接执行changeLikeText
        this.el.addEventListener('click', this.changeLikeText.bind(this), false)
        return this.el
    }
}
// ------------------------------------------------------------------------------------
const likeButton = new LikeButton()
wrapper.appendChild(likeButton.render()) // 第一次插入 DOM 元素
likeButton.onStateChange = (oldEl, newEl) => {
    wrapper.insertBefore(newEl, oldEl) // 插入新的元素
    wrapper.removeChild(oldEl) // 删除旧的元素
}

const createDOMFromString = (domString) => {
    const div = document.createElement('div')
    div.innerHTML = domString
    return div
}
class LikeButton {
    constructor() {
        this.state = { isLiked: false }
    }
    setState(state) {
        const oldEl = this.el   // 旧dom
        this.state = state
        this.el = this.render()  // 最新的dom
        this.onStateChange && this.onStateChange(oldEl, this.el) // 实例化后被创建
    }
    changeLikeText() {
        this.setState({
            isLiked: !this.state.isLiked
        })
    }
    render() {
        this.el = createDOMFromString(`
        <button class='like-btn'>
          <span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span>
          <span>👍</span>
        </button>
      `)
        this.el.addEventListener('click', this.changeLikeText.bind(this), false)
        return this.el
    }
}
// ------------------------------------------------------------------------------------
const likeButton = new LikeButton()
wrapper.appendChild(likeButton.render()) // 第一次插入 DOM 元素
likeButton.onStateChange = (oldEl, newEl) => { 
    wrapper.insertBefore(newEl, oldEl) // 插入新的元素
    wrapper.removeChild(oldEl) // 删除旧的元素
}

class Component {
    constructor(props = {}) {
        this.props = props
    }
    setState(state) {
        const oldEl = this.el
        this.state = state
        this.el = this.renderDOM()
        if (this.onStateChange) this.onStateChange(oldEl, this.el)
    }
    renderDOM() {
        this.el = createDOMFromString(this.render())
        if (this.onClick) {
            this.el.addEventListener('click', this.onClick.bind(this), false)
        }
        return this.el
    }
}
const createDOMFromString = (domString) => {
    const div = document.createElement('div')
    div.innerHTML = domString
    return div
}
const mount = (component, wrapper) => {
    wrapper.appendChild(component.renderDOM())
    component.onStateChange = (oldEl, newEl) => {
        wrapper.insertBefore(newEl, oldEl)
        wrapper.removeChild(oldEl)
    }
}

 class LikeButton extends Component {
     // 把 props 传给父类，相当于父类执行一遍构造函数，这样就可以通过 this.props获取到配置参数：
    constructor (props) { 
      super(props)
      this.state = { isLiked: false }
    }
    onClick () {
      this.setState({
        isLiked: !this.state.isLiked
      })
    }
    render () {
      return `
        <button class='like-btn' style=`background-color: ${this.props.bgColor}`>
          <span class='like-text'>
            ${this.state.isLiked ? '取消' : '点赞'}
          </span>
          <span>👍</span>
        </button>
      `
    }
  }
  mount(new LikeButton({ bgColor: 'red' }), wrapper)

 function throttle(func, delay) {
            var prev = Date.now();
            return function () {
                var context = this;
                var args = arguments;
                var now = Date.now();
                if (now - prev >= delay) {
                    func.apply(context, args);
                    prev = Date.now();
                }
            }
        }

   function debounce(func, delay, immediate) {
            var timer = null;
            return function () {
                var context = this;
                var args = arguments;
                if (timer) clearTimeout(timer);
                // 立即执行
                if (immediate) {
                    var doNow = !timer;
                    //一开始的时候还没设置定时器，timer还是null，之后就是等于调用次数了
                    //  所有第一次doNow是true，之后设置一个定时器，delay之后重置为null，
                    // 在此之前，都不为null，因为已经设置了
                    if (doNow) {
                        func.apply(context, args);
                    }
                    timer = setTimeout(function () {
                        console.log("timergg", timer)
                        timer = null;
                    }, delay);
                    // 不立即执行
                } else {
                    timer = setTimeout(function () {
                        func.apply(context, args);
                    }, delay);
                }
            }
        }