手写new

wangjieCode · wangjieCode · commit b10e0b82b5f6 · 2021-06-12T16:39:25.000+08:00
diff --git a/笔试题/html+css/两栏布局.html b/笔试题/html+css/两栏布局.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <section>
+        <style>
+            .wrapper {
+                height: 500px;
+                background-color: red;
+            }
+            .left{
+                height: 100%;
+                width: 200px;
+                background-color: blue;
+            }
+        </style>
+        <div  class="wrapper">
+            <div class="left"></div>
+            <div class="right"></div>
+        </div>
+    </section>
+</body>
+</html>
diff --git a/笔试题/js基础/test.js b/笔试题/js基础/test.js
@@ -0,0 +1,20 @@
+
+var a = 2;
+a = 5;
+window.a = 3;
+
+function test() {
+    let a = 2;
+    this.a = 10
+    setTimeout(function name(params) {
+        console.log(a)
+    },20)
+    setTimeout(function name(params) {
+        console.log(this.a)
+    },10)
+    setTimeout((params) => {
+        console.log(this.a)
+    },10)
+}
+
+test()
diff --git a/笔试题/js基础/基础.md b/笔试题/js基础/基础.md
@@ -0,0 +1,33 @@
+## 变量
+js的数据类型 对应typeof的返回值
+值类型： Boolean Number String bigint Syboml undefined
+引用类型： object null
+
+网络
+url到页面呈现
+https原理
+    ca证书，私钥在服务端，公钥+证书传输到客户端，
+    客户端验证证书信息，证书信息不符弹出警告
+    客户端拿到公钥加密随机key发送到服务端
+    服务端拿到解密的key，对称加密传输的数据
+http缓存
+    cache-contro
+
+
+html
+垂直居中定位
+    position
+    flex
+盒模型
+    border-box
+    conent-box
+BFC
+    用来清楚浮动，。。。
+重排，重绘
+
+es6
+ set map ...
+ promise 3个状态，padding resolve reject 
+ 红任务微任务
+ 事件队列
+ 继承 call 共享原型，圣杯
diff --git a/笔试题/vue/refact.js b/笔试题/vue/refact.js
@@ -0,0 +1,85 @@
+// Dep module
+class Dep {
+    static stack = []
+    static target = null
+    deps = null
+
+    constructor() {
+        this.deps = new Set()
+    }
+
+    depend() {
+        if (Dep.target) {
+            this.deps.add(Dep.target)
+        }
+    }
+
+    notify() {
+        this.deps.forEach(w => w.update())
+    }
+
+    static pushTarget(t) {
+        if (this.target) {
+            this.stack.push(this.target)
+        }
+        this.target = t
+    }
+
+    static popTarget() {
+        this.target = this.stack.pop()
+    }
+}
+
+// reactive
+function reactive(o) {
+    if (o && typeof o === 'object') {
+        Object.keys(o).forEach(k => {
+            defineReactive(o, k, o[k])
+        })
+    }
+    return o
+}
+
+function defineReactive(obj, k, val) {
+    let dep = new Dep()
+    Object.defineProperty(obj, k, {
+        get() {
+            dep.depend()
+            return val
+        },
+        set(newVal) {
+            val = newVal
+            dep.notify()
+        }
+    })
+    if (val && typeof val === 'object') {
+        reactive(val)
+    }
+}
+
+// watcher
+class Watcher {
+    constructor(effect) {
+        this.effect = effect
+        this.update()
+    }
+    update() {
+        Dep.pushTarget(this)
+        this.value = this.effect()
+        Dep.popTarget()
+        return this.value
+    }
+}
+
+// 测试代码
+const data = reactive({
+    msg: 'aaa'
+})
+
+new Watcher(() => {
+    console.log('===> effect', data.msg);
+})
+
+setTimeout(() => {
+    data.msg = 'hello'
+}, 1000)
diff --git a/笔试题/手写api/flat.js b/笔试题/手写api/flat.js
@@ -0,0 +1,20 @@
+function recursionFlat(ary = []) {
+    const res = []
+    ary.forEach(item => {
+        if (Array.isArray(item)) {
+            res.push(...recursionFlat(item))
+        } else {
+            res.push(item)
+        }
+    })
+    return res
+}
+// 方案 2
+function reduceFlat(ary = []) {
+    return ary.reduce((res, item) => res.concat(Array.isArray(item) ? reduceFlat(item) : item), [])
+}
+
+// 测试
+const source = [1, 2, [3, 4, [5, 6]], '7']
+console.log(recursionFlat(source))
+console.log(reduceFlat(source))
diff --git a/笔试题/手写api/instensof.js b/笔试题/手写api/instensof.js
@@ -0,0 +1,9 @@
+function instanceOf(left,right) {
+    let proto = left.__proto__;
+    let prototype = right.prototype
+    while(true) {
+        if(proto === null) return false
+        if(proto === prototype) return true
+        proto = proto.__proto__;
+    }
+}
diff --git a/笔试题/手写api/new.js b/笔试题/手写api/new.js
@@ -0,0 +1,22 @@
+function myNew(Func, ...args) {
+    const instance = {};
+    if (Func.prototype) {
+        // instance.__proto__ = Func.prototype // 不推荐直接操作隐式原型
+        Object.setPrototypeOf(instance, Func.prototype)
+    }
+    const res = Func.call(instance, ...args)
+    if (typeof res === "function" || (typeof res === "object" && res !== null)) {
+        return res
+    }
+    return instance
+}
+// 测试
+function Person(name) {
+    this.name = name
+}
+Person.prototype.sayName = function () {
+    console.log(`My name is ${this.name}`)
+}
+const me = myNew(Person, 'WangJie')
+me.sayName()
+console.log(me)
