前端面试：js基础-1

1.说说typeof 运算符？

识别所有值类型
识别函数
判断是否是引用类型（不可再细分

值类型有哪些？

String Number Boolean Underfine Symbol

引用类型有哪些？

Object Array Function Null		//这些typeof返回的都是object

2.说说instanceof运算符？

判断引用型类型：Object Array Function Null

原理：

比如：arr instanceof Array 其实是从arr隐式原型__proto__开始，竖着原型链查找，看看能不能找到
Array.prototype这个原型，如果命中返回true  否则返回false

3.手写深拷贝？

function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ，或者不是对象和数组，直接返回
        return obj
    }
    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用！！！
            result[key] = deepClone(obj[key])
        }
    }
    // 返回结果
    return result
}

4. 何时用 == 运算符？ 何时用===运算符？

//除了 == null 之外，其它都一律用 ===
列如：
const obj = { x: 100 }
if ( obj.a == null ) { }
// 相当于：
// if (obj.a === null || obj.a === undefined) { }

5.truly变量 和 falsely变量？

两次取反 如果是false就是falsely变量，否则就是truly变量

//以下是falsely变量。除此之外都是truly变量
!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false

6.逻辑判断

console.log(10 && 0 ) //0   &&遇到falsely就为falsely值
console.log('' || 'abc')    // 'abc'  ||遇到truly就为truly值

7.手写一个简易的jQuery，考虑插件和扩展性。

class jQuery {
    constructor(selector) {
        const result = document.querySelectorAll(selector)
        const length = result.length
        for (let i = 0; i < length; i++) {
            this[i] = result[i]
        }
        this.length = length
        this.selector = selector
    }
    get(index) {
        return this[index]
    }
    each(fn) {
        for (let i = 0; i < this.length; i++) {
            const elem = this[i]
            fn(elem)
        }
    }
    on(type, fn) {
        return this.each(elem => {
            elem.addEventListener(type, fn, false)
        })
    }
    // 扩展很多 DOM API
}

// 插件
jQuery.prototype.dialog = function (info) {
    alert(info)
}

// “造轮子”
class myJQuery extends jQuery {
    constructor(selector) {
        super(selector)
    }
    // 扩展自己的方法
    addClass(className) {

    }
    style(data) {

    }
}
// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked'))

8.自由变量的值怎么确定？

自由变量：没有定义 就直接引用的变量
所有的自由变量的查找，是在函数定义的地方开始，向上级作用域查找
不是在执行的地方

9.关于this

this取什么值是在函数执行的时候确定的，不是在定义的时候确定的
箭头函数的this取值是取它上级作用域的值

10.实际开发中闭包的应用：

隐藏数据，只提供 API
比如：

function createCache() {
    const data = {} // 闭包中的数据，被隐藏，不被外界访问
    return {
        set: function (key, val) {
            data[key] = val
        },
        get: function (key) {
            return data[key]
        }
    }
}

const c = createCache()
c.set('a', 100)
console.log( c.get('a') )