var name = "The Window";
    var object = {
        name : "My Object",
        getNameFunc : function(){
            return function(){
                return this.name;
            };
        }
    };
console.log(object.getNameFunc()());//result:The Window

var name = "The Window";
 var object = {
  name : "My Object",
  getNameFunc : function(){
   return this.funAA;
  },
  funAA:function(){
   return this.name
  }
 };
 console.log(object.getNameFunc()(),object.funAA())

var name = "The Window";
 var object = {
  name : "My Object",
  getNameFunc : function(){
   return this.funAA();
  },
  funAA:function(){
   return this.name
  }
 };
console.log(object.getNameFunc(),object.funAA())

this.x = 9;   
var module = {
  x: 81,
  getX: function() { console.log(this.x) }
};

module.getX(); // 81

var retrieveX = module.getX;
function A(){
  this.x = 22;
  retrieveX() //22
}
A()

var a = 2
function test(){
    this.a = 1
    console.log(window.a)
}
new test()
test()

Function.prototype.call1 = function(obj,...args){
	obj.fn = this
	obj.fn(...args)
	delete obj.fn
}

function subNew(){
    var obj = {}
    var res = test.call(obj,...arguments)
}
subNew()   // 作用等于new test()

var a = 1 // 全局作用域
let b = 1   // 块级作用域
const c = 1   // 块级作用域
function foo(){
  var d = 1  // 函数作用域
  this.a = 2
  this.b = 2
  this.c = 2
  this.d = 2
  console.log(a,b,c,d) // 2,1,1,1
}
foo()

var num = 1
const object = {
  num:2,
  foo: function(){
    return ()=>{
      console.log(this.num)
    }
  }
}
object.foo()()  // 2

const { state, setState } = useState(initialState)

useEffect(didUpdate,[])   //didUpdate为要做的更新,[]为要监听的变量

const  store = useContext(Context)

const [state,dispatch] = useReducer(reducers,initialState)

function Com(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
Com = forwardRef(Com);

export default  {
  username:''
}

export  default {
  setUserName:function(payload){
    return {
      type:'setUserName',
      payload
    }
  }
}

export default function reducer(state,action){
  const { payload } = action
  switch(action.type)
  {
    case 'setUserName':     // 匹配action中的type,return新的state
      return {
        ...state, 
        username: payload
      }
    default:
      return state
  }
}

const [state,dispatch] = useReducer(reducers,initialState)

import React,{createContext, useReducer} from 'react'
import reducers from './reducers'
import initialState from './state'

export const Context = createContext({})
export const Consumer =  Context.Consumer
export function Provider(props){
  const [state,dispatch] = useReducer(reducers,initialState)
  const store = { state, dispatch } 
  return (
  <Context.Provider value={ store }>
    {props.children}
  </Context.Provider>
  )
}

import React, { useContext } from 'react';
import { AppContext } from './redux'

export default function Children(){
  const { state } = useContext(AppContext)
  return (
    <div>Name：{state.username}</div>
  )
}

setTimeout(()=>{
    console.log('timer')
})
setImmediate(()=>{
    console.log('immediate')
})

fs.readFile('./main.js',()=>{
    setTimeout(()=>{
        console.log('timer')
    })
    setImmediate(()=>{
        console.log('immediate')
    })
})

setTimeout(() => {
  console.log('timeout1')
  Promise.resolve().then(()=>{
        console.log('reslove1')
    })
})

setTimeout(() => {
  console.log('timeout2')
  Promise.resolve().then(()=>{
        console.log('reslove2')
    })
})

setImmediate(()=>{
    console.log('setImmediate1')
})

setImmediate(()=>{
    console.log('setImmediate2')
})

setTimeout(() => {
  console.log('timeout1')
  Promise.resolve().then(()=>{
        console.log('reslove1')
    })
})

setTimeout(() => {
  console.log('timeout2')
  Promise.resolve().then(()=>{
        console.log('reslove2')
    })
})

setImmediate(()=>{
    console.log('setImmediate1')
})

setImmediate(()=>{
    console.log('setImmediate2')
})

Promise.resolve('resolve3').then((data)=>{
    console.log(data)
})

/**
 * Definition for singly-linked list.
 * function ListNode(val, next) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.next = (next===undefined ? null : next)
 * }
 */
/**
 * @param {ListNode} list1
 * @param {ListNode} list2
 * @return {ListNode}
 */
var mergeTwoLists = function(list1, list2) {
    if(!list1) return list2
    if(!list2) return list1

    if(list1.val < list2.val){
        list1.next = mergeTwoLists(list1.next, list2)
        return list1
    }else{
        list2.next = mergeTwoLists(list1, list2.next)
        return list2
    }
}

function reConstructBinaryTree(pre, vin)
{
    var result = null
    if(pre.length>1)
    {
        result = {
            val:pre[0]
        }
        const index = vin.indexOf(pre[0])
        var vinLeft = vin.slice(0,index)
        var vinRight = vin.slice(index+1)
        pre.shift()
        var preLeft = pre.slice(0,vinLeft.length)
        var preRight = pre.slice(vinLeft.length)
        result = {
            left: reConstructBinaryTree(preLeft,vinLeft),
            right:reConstructBinaryTree(preRight,vinRight),
            val:result.val
        }
    }
    else if(pre.length === 1)
    {
        result = {
            left:null,
            right:null,
            val:pre[0]
        }
    }
    return result
}

function Inject(target: any, key: string){
    target[key] = new (Reflect.getMetadata('design:type',target,key))()
}

class A {
    sayHello(){
        console.log('hello')
    }
}

class B {
    @Inject   // 编译后等同于执行了 @Reflect.metadata("design:type", A)
    a: A

    say(){
       this.a.sayHello()  // 不需要再对class A进行实例化
    }
}

new B().say() // hello

var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};

// 由于__decorate是从右到左执行，因此, defineMetaData 会优先执行。
__decorate([
    Inject,
    __metadata("design:type", A)  //  作用等同于 Reflect.metadata("design:type", A)
], B.prototype, "a", void 0);

Reflect.defineMetadata("design:type", A, B.prototype, 'a');

function Inject(target: any, key: string){
    target[key] = new (Reflect.getMetadata('design:type',target,key))()
}

const newMetadata: ServiceMetadata<T> = {
      id: ((serviceOptions as any).id || (serviceOptions as any).type) as ServiceIdentifier,    // service的唯一标识
      type: (serviceOptions as ServiceMetadata<T>).type || null,  // service 构造函数
      value: (serviceOptions as ServiceMetadata<T>).value || EMPTY_VALUE,  // 缓存service对应的实例化对象
};

function ContainerInstance() {
        this.metadataMap = new Map();  //保存metadata映射关系，作用类似于Refect.metadata
        this.handlers = []; // 事件待处理队列
        get(){};  // 获取依赖注入后的实例化对象
         ...
}

{
        object: target,  // 当前等待挂载的类的原型对象
        propertyName: propertyName,  // 目标属性值
        index: index, 
        value: function (containerInstance) {   // 行为
            var identifier = Reflect.getMetadata('design:type', target, propertyName)
            return containerInstance.get(identifier);
        }
}

if (handler.propertyName) {
     instance[handler.propertyName] = handler.value(this);
}

new B().say()  // 将会输出sayHello is undefined

Container.get(B).say()  // hello word

interface Handles {
    target: any
    key: string,
    value: any
}

interface Con {
    handles: Handles []   // handlers待处理数组
    services: any[]  // service数组，保存已实例化的对象
    get<T>(service: new () => T) : T   // 依赖注入并返回实例化对象
    findService<T>(service: new () => T) : T  // 检查缓存
    has<T>(service: new () => T) : boolean  // 判断服务是否已经注册
}

var container: Con = {
    handles: [],  // handlers待处理数组
    services: [], // service数组，保存已实例化的对象
    get(service){
        let res: any = this.findService(service)
        if(res){
            return  res
        }

        res = new service()
        this.services.push(res)
        this.handles.forEach(handle=>{
            if(handle.target !== service.prototype){
                return
            }
            res[handle.key] = handle.value
        })
        return res
    },

    findService(service){
        return this.services.find(instance => instance instanceof service)
    },

   // service是否已被注册
    has(service){
        return !!this.findService(service)
    }
}

function Inject(target: any, key: string){
    const service = Reflect.getMetadata('design:type',target,key)
    
    // 将实例化赋值操作缓存到handles数组
    container.handles.push({
        target,
        key,
        value: new service()
    })

    // target[key] = new (Reflect.getMetadata('design:type',target,key))()
}

class A {
    sayA(name: string){
        console.log('i am '+ name)
    }
}

class B {
    @Inject
    a: A

    sayB(name: string){
       this.a.sayA(name)
    }
}

class C{
    @Inject
    c: A

    sayC(name: string){
       this.c.sayA(name)
    }
}

// new B().sayB(). // Cannot read property 'sayA' of undefined
container.get(B).sayB('B')
container.get(C).sayC('C')

// 方法装饰器 - 如果方法装饰器返回一个值，它会被用作方法的属性描述符。
function decorateMethod(target: any,key: string,value: any){
    return{
        value: function(...args: any[]){
            console.log('target',target) // 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
            console.log('target === C.prototype',target === C.prototype) // true
            console.log('key',key) // 方法名
            console.log('value',value)  // 成员的属性描述符 Object.getOwnPropertyDescriptor
            console.log('args',args)
            var a = args.map(a => JSON.stringify(a)).join();
            var result = value.value.apply(this, args);
            var r = JSON.stringify(result);
            console.log(`Call: ${key}(${a}) => ${r}`);
            return result;
        }
    }
}

// 类装饰器  - 如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。
function decorateClass(str: string){
    return function(constructor: Function){ 
        console.log(constructor) // 参数为类的构造函数
    }
}

// 访问器装饰器 - 如果访问器装饰器返回一个值，它会被用作方法的属性描述符。
function configurable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.configurable = value;
    };
}

// 装饰器工厂 - 闭包
function format(formatString: string) {
    return Reflect.metadata(formatMetadataKey, formatString);
}

// 属性装饰器 - 返回值也会被忽略。因此，属性描述符只能用来监视类中是否声明了某个名字的属性
function getFormat(target: any, propertyKey: string) {
     console.log('target') //对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
     console.log('propertyKey') // 属性名
    return Reflect.getMetadata(formatMetadataKey, target, propertyKey);
}

// 参数装饰器 - 参数装饰器的返回值会被忽略。
function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
     console.log('target') // //对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
     console.log('propertyKey') // 参数名
     console.log('parameterIndex')  // 参数在函数参数列表中的索引。
    let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
    existingRequiredParameters.push(parameterIndex);
    Reflect.defineMetadata(requiredMetadataKey, existingRequiredParameters, target, propertyKey);
}


@decorateClass('decorateClass')
class C{

		@format("Hello, %s")
    great: string
    
    @decorateMethod('decorateMethod')
    sum(@required x: number,y: number){
        return x + y
    }

    @configurable(false)
    get x() { return this._x; }
}

var __decorate =
  (this && this.__decorate) ||
  function (decorators, target, key, desc) {
    var c = arguments.length,
      r =
        c < 3
          ? target
          : desc === null
          ? (desc = Object.getOwnPropertyDescriptor(target, key))
          : desc,
      d;
    console.log('r',r)
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
      r = Reflect.decorate(decorators, target, key, desc);
    else
      for (var i = decorators.length - 1; i >= 0; i--)
        if ((d = decorators[i]))
          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    console.log(c)
    return c > 3 && r && Object.defineProperty(target, key, r), r;
  };

var __metadata =
  (this && this.__metadata) ||
  function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
      return Reflect.metadata(k, v);
  };

var __param = (this && this.__param) || function (paramIndex, decorator) {
    return function (target, key) { decorator(target, key, paramIndex); }
};
// You could think of it in three ways:
//
//  - A place to learn TypeScript in a place where nothing can break
//  - A place to experiment with TypeScript syntax, and share the URLs with others
//  - A sandbox to experiment with different compiler features of TypeScript
// To learn more about the language, click above in "Examples" or "What's New".
// Otherwise, get started by removing these comments and the world is your playground.
// 方法装饰器 - 如果方法装饰器返回一个值，它会被用作方法的属性描述符。
function decorateMethod(str) {
    return function (target, key, value) {
        return {
            value: function (...args) {
                console.log('decorateMethod', str); // decorateMethod
                console.log('target', target); // 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
                console.log('target === C.prototype', target === C.prototype); // true
                console.log('key', key); // 方法名
                console.log('value', value); // 成员的属性描述符 Object.getOwnPropertyDescriptor
                console.log('args', args);
                var a = args.map(a => JSON.stringify(a)).join();
                var result = value.value.apply(this, args);
                var r = JSON.stringify(result);
                console.log(`Call: ${key}(${a}) => ${r}`);
                return result;
            }
        };
    };
}
// 类装饰器  - 如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。
function decorateClass(str) {
    return function (constructor) {
        console.log(constructor); // 参数为类的构造函数
    };
}
// 访问器装饰器 - 如果访问器装饰器返回一个值，它会被用作方法的属性描述符。
function configurable(value) {
    return function (target, propertyKey, descriptor) {
        descriptor.configurable = value;
    };
}
// 装饰器工厂 - 闭包
function format(formatString) {
    return Reflect.metadata('formatMetadataKey', formatString);
}
// 属性装饰器 - 返回值也会被忽略。因此，属性描述符只能用来监视类中是否声明了某个名字的属性
function getFormat(target, propertyKey) {
    console.log('target'); //对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
    console.log('propertyKey'); // 属性名
    return Reflect.getMetadata('formatMetadataKey', target, propertyKey);
}
// 参数装饰器 - 参数装饰器的返回值会被忽略。
function required(target, propertyKey, parameterIndex) {
    console.log('target'); // //对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
    console.log('propertyKey'); // 参数名
    console.log('parameterIndex'); // 参数在函数参数列表中的索引。
}
let C = class C {
    constructor() {
        this.str = 'string';
    }
    sum(x, y) {
        return x + y;
    }
    get x() { return this.str; }
};
__decorate([
    format("Hello, %s"),
    __metadata("design:type", String)
], C.prototype, "str", void 0);
__decorate([
    decorateMethod('decorateMethod'),
    __param(0, required),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Number, Number]),
    __metadata("design:returntype", void 0)
], C.prototype, "sum", null);
__decorate([
    configurable(false),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], C.prototype, "x", null);
C = __decorate([
    decorateClass('decorateClass'),
    __metadata("design:paramtypes", [])
], C);
console.log(new C().sum(1, 2)); // 3

function main(arr){
	var result = []
	get(arr,[],result)
	return result
}

function get(arr,tmp,result){
	if(tmp.length === arr.length)     //tmp与参数的数组长度相同时，push到result中
	{
		result.push(tmp)
		return
	}
	for(var index in arr)
	{
		if(!tmp.includes(arr[index]))
		{
			tmp.push(arr[index])
			get(arr,JSON.parse(JSON.stringify(tmp)),result)    //tmp需要进行深deepclone,否则会出现子数组长度为0
			tmp.pop()
		}
	}
}

function replaceSpace(str)
{
    // write code here
    return str.replace(/ /g,'%20')
}

const Modal = useMemo(()=> dynamic({
    visible, // false 时，技术组件渲染在视图内，但不自动进行资源预加载，减少首屏非必要的 http 请求
    loader: () => import('antd/es/modal'),
    loading: () => <>loading...</>,
}),[visible])

<>
    <Modal visible={visible} />
    <PreloadLink flag="/A" onClick={()=>{setVisible(true)}}>       
        PreLoad Modal
    </PreloadLink>
</>

new RouteResourcePreloadPlugin({
    modulePreloadMap: {
      "/A": ["../components/A",'antd/es/modal']
    }
})

	var list = [[1,3],[2,5],[4,8],[6,9],[10,10]]

	function main(list,val){
		for(var sublist of list)
		{
			for(var index in sublist )
			{
				if(sublist[index] === val)
				{
					return true
				}
				else if(sublist[index]>val)
				{
					continue
				}
			}
		}
		return false
	}

	console.log(main(list,10))

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"

// Build status and related events
class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

// Build a observable component
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

ReactDOM.render(<TimerView timer={myTimer} />, document.body)

// Trigger update event
setInterval(() => {
    myTimer.increase()
}, 1000)

import { create } from 'zustand'

// Build status and related events
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

// Render component
function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

// Trigger update event
function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

import { atom } from 'jotai'

const countAtom = atom(0)

function Counter() {
  // Build status and related events
  const [count, setCount] = useAtom(countAtom)
  return (
    <h1>
      {count}
      <button onClick={() => setCount(c => c + 1)}>one up</button>
    </h1>
  )
}

import { proxy, useSnapshot } from 'valtio'

const state = proxy({ count: 0, text: 'hello' })

function Counter() {
  const snap = useSnapshot(state)
  return (
    <div>
      {snap.count}
      <button onClick={() => ++state.count}>+1</button>
    </div>
  )

function add(num1,num2) {
    var sum = num1 + num2;
    return sum;
}

function changeColor(){
    document.getElementById("btnChange").onclick=function(){
        document.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

function changeColor(){
    var doc=document;
    doc.getElementById("btnChange").onclick=function(){
        doc.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

<script>
  function outer(){
     var scope = "outer";
     function inner(){
        return scope;
     }
     return inner;
  }
  var fn = outer();
  fn();
</script>

function initUI(){
    with(document){
        var bd=body,
            links=getElementsByTagName("a"),
            i=0,
            len=links.length;
        while(i < len){
            update(links[i++]);
        }
        getElementById("btnInit").onclick=function(){
            doSomething();
        };
    }
}

try{
    doSomething();
}catch(ex){
    alert(ex.message); //作用域链在此处改变
}

try{
    doSomething();
}catch(ex){
    handleError(ex); //委托给处理器方法
}

text.replace(/↵/g,'\n')

import showdown from 'showdown'
const converter = new showdown.Converter()
converter.setFlavor('github')
converter.makeHtml('# 这是标题↵> 这是内容↵#### 这是表格↵表头1 | 表头2 | 表头3↵------|-------|-------↵内容1 | 内容2 | 内容3'.replace(/↵/g,'\n'))

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

function sayhello() {
    setTimeout(()=>{
        console.log(123)
    },3000)
}

function helloworld() {
    const data =  sayhello();
    console.log(data);
    console.log(456)
}
helloworld()

function sayhello(){
	return new Promise((resolve)=>{
		setTimeout(()=>{
			resolve(123)
	        console.log(123)
	    },3000)
	})
}

async helloworld(){
    const data = await sayhello()
    console.log(data)
    console.log(456)
}

function co(gen) {
    if(!gen) return
	return new Promise((resolve,reject)=>{
		var it = gen();
		try{
			function step(next){
				if(next.done)
				{
					return resolve(next.value)
				}
				else{
					Promise.resolve(next.value).then((res)=>{
						return step(it.next(res))
					},(e)=>{
						return step(it.throw(e))
					})
				}
			}
			step(it.next())
		}
		catch(e){
			return reject(e)
		}
	})
}

function sayhello(){
       // 之所以需要返回一个 promise ,是因为 co 函数会在底层使用 promise 同步执行 sayhello ，为了保证 sayhello 同步执行完该异步函数后获取到正确的返回值，需要使用promise包裹返回值。
	return new Promise((resolve)=>{
		setTimeout(()=>{
			resolve(123)
	        console.log(123)
	    },3000)
	})
}

co(
	function* helloworld(){
		const data = yield sayhello()
		console.log(data)
		console.log(456)
	}
)

function rectCover(number)
{
    // write code here
    if(number<=2){
        return number
    }else{
        var arr = []
        arr[1] = 1
        arr[2] = 2
        for(var i = 3;i<=number;i++)
        {
            arr[i] = arr[i-1] + arr[i-2]
        }
    }
    return arr[number]
}

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react"

// 状态及相关事件
class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

// 构建可观擦组件
const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

ReactDOM.render(<TimerView timer={myTimer} />, document.body)

// 触发更新事件
setInterval(() => {
    myTimer.increase()
}, 1000)

import { create } from 'zustand'

// 状态及相关事件
const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

// 渲染视图
function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

// 触发更新事件
function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

import { atom } from 'jotai'

const countAtom = atom(0)

function Counter() {
  // 状态及相关事件
  const [count, setCount] = useAtom(countAtom)
  return (
    <h1>
      {count}
      <button onClick={() => setCount(c => c + 1)}>one up</button>
    </h1>
  )
}

const fontSizeState = atom({  
  key: 'fontSizeState',  
  default: 14,  
});
function FontButton() {  
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);  
  return (  
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>  
      Click to Enlarge  
    </button>  
  );  
}