前端面经题

1.bind、call、apply异同点：
答：相同点：三者都是js里的关键字，用来改变函数内部this的执行，第一个参数都是this指向的对象。不同点：call和apply在改变this指向时候会主动调用函数，而bind不会，他会得到一个新的函数，需要再执行。call和bind的传参方式相同，都是逗号隔开，而apply则不同，它的多个参数以数组形式传入。

2.文本超出隐藏：
答：css中使用{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

3.浅谈路由原理：
答：本质就是监听URL的变化，而后匹配路由规则，显示相应页面，而且无需刷新。两种方法：a.hash模式、b.history模式

4.闭包的优缺点：
答：优点：可以访问到函数内部的局部变量、可以避免全局变量的污染、变量不会被清除。缺点：增大内存的使用、滥用闭包影响性能，导致内存泄漏

5.如何判断对象的类型：
答：typeof判断基本类型，如果是数组和对象使用instanceof

6.generator的作用和原理：
答：作用：给普通对象添加遍历器、将ajax请求转成类似的let a = ajax()的同步赋值形式、实现状态机、实现轮询、异步操作的同步化表达(处理异步操作，改写回调函数)、通过generator的函数部署Ajax操作、通过generator函数逐行读取文本文件。实现原理：生成器如下：

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
var hw = helloWorldGenerator();

hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }

7.flex弹性布局：
答：它是一种浏览器提倡的布局模型、布局网页更简单灵活、避免浮动脱标问题、设置方法为：父元素添加display:flex，子元素可以自动的挤压或拉伸、组成部分:弹性容器，弹性盒子，主轴 侧轴/交叉轴、主轴对齐方式:justify-content、侧轴对齐方式:align-items调节元素在侧轴的对齐方式，align-self可以控制子集在侧轴的对其方式

8.并发请求：
答：使用promise.all()来实现

9.vue常用修饰符：
答：

a.lazy：改变输入框的值时绑定的value不会改变，当光标离开输入框时候，v-model绑定的值才会改变；

b.trim：把v-model绑定的值的收尾空格去掉；

c.number：将值转成数字；

d.stop：阻止事件冒泡；

e.capture：反向冒泡；

f.self：只有点击自身才能触发；

g.once：事件只能执行一次；

h.prevent：阻止默认事件(行为)；

10.浅拷贝和深拷贝：
答：浅拷贝：只是复制对象的引用，不是复制对象本身，新旧对象共享一个内存块；如直接赋值，Oject.assign()多层，…解构赋值多层。 深拷贝：创建一个一模一样的新对象，不共享内存块；将对象转换成字符串，然后再转换成对象，Objec.assign()一层，…解构赋值第一层：

// 浅拷贝
let obj1 = { name: "小明" }
let obj2 = obj1
obj2.name = "小红"

// 深拷贝
let obj3 = { name: "小明" }
let obj4 = JSON.parse(JSON.stringify(obj3))
obj4.name = "小红"

// 一维 深拷贝
let obj5 = { name: "小明" }
let obj6 = { ...obj5 }
obj6.name = "小红"

// 一维 深拷贝
let obj7 = { name: "小明" }
let obj8 = Object.assign({}, obj7)
obj8.name = "小红"

// 多维 浅拷贝
let obj9 = { name: { name: "小明" } }
let obj10 = Object.assign({}, obj9)
obj10.name.name = "小红"

// 多维 浅拷贝
let obj11 = { name: { name: "小明" } }
let obj12 = { ...obj11 }
obj12.name.name = "小红"

// 深拷贝函数 递归
interface myType {
    name?: string
    age?: number
    children?: myType[]
}

const family:myType = {
    name: "雷丘",
    age: 59,
    children: [
        {
            name: "皮卡丘",
            age: 26,
            children: [
                {
                    name: "皮丘",
                    age: 6,
                    children: []
                }
            ]
        },
        {
            name: "皮卡皮卡",
            age: 24,
            children: []
        }
    ]
}

function kaobei(obj: myType) {
    let ret:myType = {}
    for (let key in obj) {
        type keyType = keyof typeof obj;
        let value = obj[key as keyType]
        ret[key] = typeof value === "object" ? kaobei(value) : value
    }
    return ret
}

const myFamily = kaobei(family)