js基础

学习js ----面试题整理

一、变量类型和计算

1、typeof 能判断那些类型

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

2、何时使用 === 何时使用 ==

1.

3、值类型和引用类型的区别

堆栈，变量存储位置不同

值类型：

引用类型：

4、手写深拷贝

/**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 */
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
}

知识点：

变量计算——类型转换

1. 字符串拼接

2. ==

3. if语句和逻辑运算

   truly和falsely变量：

   逻辑判断

二、原型和原型链

1、如何准确判断一个变量是不是数组

 a instanceof Array

2、手写一个简易的 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'))

3、class的原型本质，怎么理解

• 原型和原型链的图示
• 属性和方法的执行规则
  

知识点：

class和继承

// 类
	// contructor
	// 属性
	// 方法
class Student {
    constructor(name, number) {
        this.name = name
        this.number = number
        // this.gender = 'male'
    }
    sayHi() {
        console.log(
            `姓名 ${this.name} ，学号 ${this.number}`
        )
        // console.log(
        //     '姓名 ' + this.name + ' ，学号 ' + this.number
        // )
    }
    // study() {

    // }
}

// 通过类 new 对象/实例
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()

const madongmei = new Student('马冬梅', 101)
console.log(madongmei.name)
console.log(madongmei.number)
madongmei.sayHi()

// 继承 
	// extends
	// super
	// 扩展或重写方法

// 父类
class People {
    constructor(name) {
        this.name = name
    }
    eat() {
        console.log(`${this.name} eat something`)
    }
}

// 子类
class Student extends People {
    constructor(name, number) {
        super(name)
        this.number = number
    }
    sayHi() {
        console.log(`姓名 ${this.name} 学号 ${this.number}`)
    }
}

// 子类
class Teacher extends People {
    constructor(name, major) {
        super(name)
        this.major = major
    }
    teach() {
        console.log(`${this.name} 教授 ${this.major}`)
    }
}

// 实例
const xialuo = new Student('夏洛', 100)
console.log(xialuo.name)
console.log(xialuo.number)
xialuo.sayHi()
xialuo.eat()

// 实例
const wanglaoshi = new Teacher('王老师', '语文')
console.log(wanglaoshi.name)
console.log(wanglaoshi.major)
wanglaoshi.teach()
wanglaoshi.eat()

类型判断 instanceof

原型和原型链

原型关系：

- 每个 class 都有显示原型 prototype
- 每个实例都有隐式原型 __proto__
- 实例的__proto__指向对应 class 的 prototype

基于原型的执行规则：

- 获取属性 xiaoluo.name或执行方法 xialuo.sayHo()时
- 先在自身属性和方法寻找
- 如果找不到则自动去__proto__ 中查找

重要提示

1. class 是 ES6 语法规范，由 ECMA 委员会发布
2. ECMA 只规范语法规则，即我们代码的书写规范，不规则如何实现
3. 以上实现方式都是 V8 引擎的实现方式，也是主流的

三、作用域和闭包

1、this 的不同应用场景，如何取值？

• 当作普通函数被调用（返回Window）
• 使用 call apply bind (传入什么绑定什么)
• 作为对象方法调用 (返回对象本身)
• 在class 的方法中调用 (当前实例本身)
• 箭头函数 (找上级作用域中this的值)

2、手写 bind 函数

3、实际开发中闭包的应用场景，举例说明

• 隐藏数据
• 如做一个简单的 cache工具
  

4、题目

原因：i 为全局变量，click 点击时间只有点击才触发函数，此时for循环早已结束，i = 10， 所以点击任何一个都弹出 10.

此时 i 定义为for中块级作用域，每次for 循环都会形成一个块级作用域，每次点击在相应的块级作用域中找值。

知识点：

作用域和自由变量

作用域： 一个变量的合法适用范围

• 全局作用域
• 函数作用域
• 块级作用域( ES6 新增)

自由变量：当前作用域没有定义的变量

• 一个变量在当前作用域没有定义，但被使用了
• 向上级作用域，一层一层依次寻找，直至找到为止
• 如果到全局作用域都没有找到，则报错 xx is not defined
  

闭包

作用域应用的特殊情况，有两种表现：

• 函数作为返回值被传递
  

• 函数作为参数被传递
  

所有的自由变量的查找，是在函数定义的地方，向上级作用域查找不是在执行的地方！！！*

this

• 当作普通函数被调用（返回window）
• 使用 call apply bind (传入什么绑定什么)
• 作为对象方法调用 (返回对象本身)
• 在class 的方法中调用 (当前实例本身)
• 箭头函数 (找上级作用域中this的值)
• 在定时器中 (指向window)

四、异步和单线程

1、同步和异步的区别是什么？

• 异步是基于JS是单线程语言
• 异步不会阻塞代码执行
• 同步会阻塞代码执行

2、手写用Promise 加载一张图片

function loadImg(src) {
    const p = new Promise(
        (resolve, reject) => {
            const img = document.createElement('img')
            img.onload = () => {
                resolve(img)
            }
            img.onerror = () => {
                const err = new Error(`图片加载失败 ${src}`)
                reject(err)
            }
            img.src = src
        }
    )
    return p
}

// const url = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
// loadImg(url).then(img => {
//     console.log(img.width)
//     return img
// }).then(img => {
//     console.log(img.height)
// }).catch(ex => console.error(ex))

// 2张图片
const url1 = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
const url2 = 'https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg'

loadImg(url1).then(img1 => {
    console.log(img1.width)
    return img1 // 普通对象
}).then(img1 => {
    console.log(img1.height)
    return loadImg(url2) // promise 实例
}).then(img2 => {
    console.log(img2.width)
    return img2
}).then(img2 => {
    console.log(img2.height)
}).catch(ex => console.error(ex))

3、前端使用异步的场景有哪些？

• 网络请求，如 ajax 图片加载
• 定时任务，如 setTimeout

4.场景题

知识点：

• JS 是单线程语言，只能同时做一件事儿
• 浏览器和 nodejs 已支持JS启动进程，如 Web Worker
• JS 和 DOM渲染共用同一个线程，因为JS课可修改DOM结构
• 遇到等待(网络请求，定时任务)不能卡住
• 需要异步
• 回调 callback 函数形式

单线程和异步，异步和同步区别

前端异步的应用场景： 网络请求&定时任务

• 网络请求，如 ajax 图片加载
  

• 定时任务，如 setTimeout
  

callback hell 和 Promise (Promise 解决 callback hell)

• 回调地狱
  

• Promise