Web知识点整理（二）

let data = {
    price: 10,
    count: 5
}
let target = null
class Dep {
    constructor() {
        this.subscribers = []
    }
    depend() {
        if (target && !this.subscribers.includes(target)) {
            this.subscribers.push(target)
        }
    }
    notify() {
        this.subscribers.forEach(sub => sub())
    }
}
Object.keys(data).forEach(key => {
    let internalValue = data[key]
    const dep = new Dep()
    Object.defineProperty(data, key, {
        get() {
            dep.depend()
            return internalValue
        },
        set(newValue) {
            internalValue = newValue
            dep.notify()
        }
    })
})
target = () => {
    data.total = data.price * data.count
}
target()
console.log('data.total', data.total);
data.count = 10
console.log('data.total', data.total);

基于Proxy实现的数据响应式

let onWatch = (obj,setBind,getLogger)=>{
    let handler = {
		set(target,property,value,receiver){
            setBind(value,property)
            return Reflect.set(target,property,value)
           //如果property部署了set函数，则set函数的this绑定receiver
        }，
        get(target,property,receiver){
            getLogger(target,property)
            return Reflect.get(target,property,receiver)
            //如果property部署了get函数，则set函数的this绑定receiver
        }
    }
    return new Proxy(obj,handler)
}
let obj = {a:1}
let watchObj = onWatch(
    obj,
    (value,property)=>{
        console.log(`监听到属性${property}改变为${value}`);
    },
    (target,property)=>{
        console.log(`'${property}' = ${target[property]}`);
    }
)

function MyPromise(executor) {
    let self = this
    self.status = 'pending'
    self.onResolvedCallback = [] //Promise resolve时的回调函数集
    self.onRejectedCallback = [] //Promise reject时的回调函数集
    function resolve(value) {
        if (value instanceof MyPromise) {
            return value.then(resolve, reject)
        }
        setTimeout(function() {
            if (self.status === 'pending') {
                self.status = 'resolved'
                self.data = value
                self.onResolvedCallback.forEach(cb => cb(self.data))
            }
        })
    }

    function reject(reason) {
        setTimeout(function() {
            if (self.status === 'pending') {
                self.status = 'rejected'
                self.data = reason
                self.onRejectedCallback.forEach(cb => cb(self.data))
            }
        })
    }
    try {
        executor(resolve, reject)
    } catch (reason) {
        reject(reason)
    }
}
MyPromise.prototype.then = function(onResolved, onRejected) {
    let self = this
    let promise2 //then必须返回一个新的promise
        //如果参数不是函数，那么则将其忽略。同时这里实现了值穿
    onResolved = typeof onResolved === 'function' ? onResolved : (v) => v
    onRejected = typeof onRejected === 'function' ? onRejected : (r) => { throw r }
    if (self.status === 'resolved') {
        //如果promise1(此处即为this)的状态已经确定并且是resolved，调用onResolved
        //考虑到可能会抛出错误，所以将其包在try/catch块中
        return promise2 = new MyPromise((resolve, reject) => {
            try {
                let x = onResolved(self.data)
                    // 如果onResolved的返回值是一个Promise对象，直接取它的结果做为promise2的结果
                if (x instanceof MyPromise) {
                    x.then(resolve, reject)
                }
                resolve(x)
            } catch (e) {
                reject(e)
            }
        })
    }
    if (self.status === 'rejected') {
        return promise2 = new MyPromise((resolve, reject) => {
            try {
                let x = onRejected(self.data)
                if (x instanceof MyPromise) {
                    x.then(resolve, reject)
                }
            } catch (e) {
                reject(e)
            }
        })
    }
    // 如果当前的Promise还处于pending状态，我们并不能确定调用onResolved还是onRejected，
    // 只能等到Promise的状态确定后，才能确实如何处理。
    // 所以我们需要把我们的**两种情况**的处理逻辑做为callback放入promise1(此处即this/self)的回调数组里
    if (self.status === 'pending') {
        return promise2 = new MyPromise((resolve, reject) => {
            self.onResolvedCallback.push((value) => {
                try {
                    let x = onResolved(self.data)
                    if (x instanceof MyPromise) {
                        x.then(resolve, reject)
                    }
                } catch (e) {
                    reject(e)
                }
            })
            self.onRejectedCallback.push((reason) => {
                try {
                    let x = onRejected(self.data)
                    if (x instanceof MyPromise) {
                        x.then(resolve, reject)
                    }
                } catch (e) {
                    reject(e)
                }
            })
        })
    }
}
MyPromise.prototype.catch = function(onRejected) { this.then(null, onRejected) }
//promise.then(onResolved, onRejected)里的这两相函数需要异步调用，关于这一点，标准里也有说明：
//In practice, this requirement ensures that onFulfilled and onRejected execute asynchronously, after the event loop turn in which then is called, and with a fresh stack.

Function.prototype.call = function(context,...arg){
    context = context || window //不传入参数，默认this指向window
    const symbol = Symbol() //避免覆盖context的原始属性
    context[symbol] = this	//把要调用此方法的那个函数对象绑定在context上
    const val = context[symbol](...arg)	//在context上调用函数，那函数的this值就是context
    delete context[symbol] //删除context的fn属性，去除影响
    return val
}

Function.prototype.myapply = function(context, arr) {
    context = context || window
    const symbol = Symbol()
    context[symbol] = this
    const result = context[symbol](...arr)
    delete context[symbol]
    return result
}
Function.prototype.myapply = function(context, arr) {
    return this.mycall(context, ...arr)
}

Function.prototype.mybind = function(obj, ...arg) { //收集剩余参数
    return (...arg2) => this.myapply(obj, arg1.concat(arg2))
}
Function.prototype.mybind = function(obj, ...arg) {
    return (...arg2) => { //使用箭头函数绑定this在当前环境，否则this指向window
        let args = arg.concat(arg2)
        const symbol = Symbol()
        obj[symbol] = this;
        const val = obj[symbol](...args)
        delete obj[symbol]
        return val
    }
}
不使用箭头函数的话，只需要在return函数之前将this对象保存即可
let self = this

用于实现柯里化
function a(a,b,c){
    console.log(a+b+c)
}
let default = a.bind(undefined,1)
default(2,3) //6

function New(func, ...arg) {
    let MiddleObj = {}
    if (func.prototype !== null) {
        MiddleObj.__proto__ = func.prototype
    } 
    const value = func.call(MiddleObj, ...arg)  // this 绑定
    if ((typeof value === 'object' || typeof value === 'function') && value !== null) {
        return value
    }
    return MiddleObj
}

Object.prototype.create = function(obj){
    if(Object.prototype.create){
        return Object.prototype.create
    }else{
        function F(){}
        F.prototype = obj
        return new F()
    }
}

function myInstanceof(left, right) {
    let prototype = right.prototype
    left = left.__proto__
    while (true) { //循环查询原型链  myInstanceof(实例, Object)
        if (left === null || left === undefined) { //原型链的终点是null
            return false
        }
        if (prototype === left) {
            return true
        }
        left = left.__proto__ 
    }
}

class PlusIns{
    static [Symbol.hasInstance](x){
        return typeof x === 'string'
    }
}
console.log('hey' instanceof PlusIns) //true

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window是全局对象global的引用

'a'++'b' //aNaN

[] == [] //false 因为是引用类型，两者的堆内存地址不同
[] == ![] //true 因为！运算符优先级较高，右边会变为false 其中一个为Boolean所以将两边转为数字，都为0，所以结果返回true

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

let a = {
  age: 1,
  jobs: {
    first: 'FE'
  }
}
let b = { ...a }
a.jobs.first = 'native'
console.log(b.jobs.first) // native

function Parent(value) {
  this.val = value
}
Parent.prototype.getValue = function() {
  console.log(this.val)
}

function Child(value) {
  Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
  constructor: {
    value: Child,
    enumerable: false,
    writable: true,
    configurable: true
  }
})

const child = new Child(1)

child.getValue() // 1
child instanceof Parent // true



function create(proto,options){
    vat tmp = {};
    tmp.__proto__ = proto
    Object.defineProperties(tmp,options)
    return tmp
}

class Parent {
  constructor(value) {
    this.val = value
  }
  getValue() {
    console.log(this.val)
  }
}
class Child extends Parent {
  constructor(value) {
    super(value)
    this.val = value
  }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

// 引入模块 API
import XXX from './a.js'
import { XXX } from './a.js'
// 导出模块 API
export function a() {}
export default function() {}

["1", "2", "3"].map(parseInt)  // [1,NaN,NaN]

parseInt('1',0) = 1,
parseInt('2',1) = NaN,
parseInt('3',2) = NaN,

[1, 2, 3].map(v => v + 1) // -> [2, 3, 4]

let array = [1, 2, 4, 6]
let newArray = array.filter(item => item !== 6)
console.log(newArray) // [1, 2, 4]

const arr = [1, 2, 3]
const sum = arr.reduce((acc, current) => acc + current, 0)
console.log(sum)

ajax(url, () => {
    // 处理逻辑
})

ajax(url, () => {
    // 处理逻辑
    ajax(url1, () => {
        // 处理逻辑
        ajax(url2, () => {
            // 处理逻辑
        })
    })
})

Promise.resolve(1)
  .then(res => {
    console.log(res) // => 1
    return 2 // 包装成 Promise.resolve(2)
  })
  .then(res => {
    console.log(res) // => 2
  })

async function test() {
  // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
  // 如果有依赖性的话，其实就是解决回调地狱的例子了
  await fetch(url)
  await fetch(url1)
  await fetch(url2)
}

let a = 0
let b = async () => {
  a = a + await 10
  console.log('2', a) // -> '2' 10
}
b()
a++
console.log('1', a) // -> '1' 1

console.log('script start')

async function async1() {
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2 end')
}
async1()

setTimeout(function() {
  console.log('setTimeout')
}, 0)

new Promise(resolve => {
  console.log('Promise')
  resolve()
})
  .then(function() {
    console.log('promise1')
  })
  .then(function() {
    console.log('promise2')
  })

console.log('script end')
// script start => async2 end => Promise => script end => promise1 => promise2 => async1 end => setTimeout

enum AllocationSpace {
  // TODO(v8:7464): Actually map this space's memory as read-only.
  RO_SPACE,    // 不变的对象空间
  NEW_SPACE,   // 新生代用于 GC 复制算法的空间
  OLD_SPACE,   // 老生代常驻对象空间
  CODE_SPACE,  // 老生代代码对象空间
  MAP_SPACE,   // 老生代 map 对象
  LO_SPACE,    // 老生代大空间对象
  NEW_LO_SPACE,  // 新生代大空间对象

  FIRST_SPACE = RO_SPACE,
  LAST_SPACE = NEW_LO_SPACE,
  FIRST_GROWABLE_PAGED_SPACE = OLD_SPACE,
  LAST_GROWABLE_PAGED_SPACE = MAP_SPACE
};

// 以下会先打印冒泡然后是捕获
node.addEventListener(
  'click',
  event => {
    console.log('冒泡')
  },
  false
)
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

function jsonp(url, jsonpCallback, success) {
  let script = document.createElement('script')
  script.src = url
  script.async = true
  script.type = 'text/javascript'
  window[jsonpCallback] = function(data) {
    success && success(data)
  }
  document.body.appendChild(script)
}
jsonp('http://xxx', 'callback', function(value) {
  console.log(value)
})

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization, Access-Control-Allow-Credentials'
  )
  next()
})

res.statusCode = 204
res.setHeader('Content-Length', '0')
res.end()

function escape(str) {
  str = str.replace(/&/g, '&')
  str = str.replace(/</g, '&lt;')
  str = str.replace(/>/g, '&gt;')
  str = str.replace(/"/g, '&quto;')
  str = str.replace(/'/g, '&#39;')
  str = str.replace(/`/g, '&#96;')
  str = str.replace(/\//g, '&#x2F;')
  return str
}

class Singleton {
    constructor() {}
}
Singleton.getInstance = (function() {
    let instance
    return function() {
        if (!instance) {
            instance = new Singleton()
        }
        return instance
    }
})()
let s1 = Singleton.getInstance()
let s2 = Singleton.getInstance()
console.log('s1===s2', s1 === s2);

class Plug {
  getName() {
    return '港版插头'
  }
}

class Target {
  constructor() {
    this.plug = new Plug()
  }
  getName() {
    return this.plug.getName() + ' 适配器转二脚插头'
  }
}

let target = new Target()
target.getName() // 港版插头 适配器转二脚插头

function readonly(target, key, descriptor) {
  descriptor.writable = false
  return descriptor
}

class Test {
  @readonly
  name = 'yck'
}

let t = new Test()

t.yck = '111' // 不可修改

function bubble(array) {
  checkArray(array);
  for (let i = array.length - 1; i > 0; i--) {
    // 从 0 到 `length - 1` 遍历
    for (let j = 0; j < i; j++) {
      if (array[j] > array[j + 1]) swap(array, j, j + 1)
    }
  }
  return array;
}

function selection(array) {
  checkArray(array);
  for (let i = 0; i < array.length - 1; i++) {
    let minIndex = i;
    for (let j = i + 1; j < array.length; j++) {
      minIndex = array[j] < array[minIndex] ? j : minIndex;
    }
    swap(array, i, minIndex);
  }
  return array;
}

       　function quickSort(arr){
            //如果数组<=1,则直接返回
            if(arr.length<=1){return arr;}
            var pivotIndex=Math.floor(arr.length/2);
            //找基准，并把基准从原数组删除
            var pivot=arr.splice(pivotIndex,1)[0];
            //定义左右数组
            var left=[];
            var right=[];

            //比基准小的放在left，比基准大的放在right
            for(var i=0;i<arr.length;i++){
                if(arr[i]<=pivot){
                    left.push(arr[i]);
                }
                else{
                    right.push(arr[i]);
                }
            }
            //递归
            return quickSort(left).concat([pivot],quickSort(right));
        }   

function Insertion(arr){
    for(let i = 1;i<arr.length;i++){
        for(let j = i-1;j>=0&&arr[j]>arr[j+1];j--){
            [arr[j],arr[j+1]] = [arr[j+1],arr[j]]
        }
    }
}