JavaScript面试题自学总结

目录

一.变量提升与函数提升

1.变量提升

  函数提升

2.常见题型：

例.1：

如何使用es6的知识交换这两个变量的值：

例.2：如何使用es6的知识完成数组去重的的操作

3.promise

例1.下列输出是什么

二、原型与原型链

1.原型：prototype

2.原型链：__proto___ => [[prototype]]

三.防抖与节流

1.防抖 => 将多次操作变为一次

2.节流 => 保证一定时间内只调用一次函数 

经过各站视频学习总结出的常见面试题，每日更新

---

一.变量提升与函数提升

1.变量提升

  先上车后买票。

console.log(num)
var num = 123

//等同于
var num 
console.log(num)  ==> undefined
num=123

  函数提升

fun();
function fun(){
    console.log(1)
}

//等同于
function fun(){
    console.log(1)
}
fun();
//所以输出为1

函数分为函数声明式和函数表达式，以上的情况为函数声明式，函数表达式则不会被函数提升，而执行的是变量提升：

fun();
var fun = function(){
    console.log(1)
}

//执行的是变量提升
var fun;
fun();
fun = function(){
    console.log(1)
}

2.常见题型：

1.

foo(); 
var foo;
function foo () {
    console.log(1);
}
foo = function () {
    console.log(2);
}

//输出结果为1

该题目考查的是函数提升的优先级要高于变量提升，其中第三行的函数被提升置顶，

function foo(){
    console.log(1)
}
var foo;
var foo;
foo();

而函数提升不会被同名变量提升所覆盖，只有该变量重新赋值才会改变。

2.

console.log(a);
console.log(a());
var a = 1;
function a() {
  console.log(2);
}
a = 3;
console.log(a);
console.log(a());

该题目同样考查到了函数提升与变量提升的优先级

3.最后再来看一道比较经典的面试题

console.log(v1);
var v1 = 100;
function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
foo();
console.log(v1);

js的实际执行顺序为

function foo(){
    var v1;
    console.log(v1); //根据作用域链就近原则 找到v1=undefined
    v1=200;
    console.log(v1);
}
var v1;
console.log(v1);
v1=100;
foo();
console.log(v1);

//输出为
//undefined
//undefined
//200
//100

二.执行上下文

执行上下文分为全局上下文，函数上下文，eval，每次开始执行时首先进入全局上下文，也就是windows对象。代码执行期间，每当遇到函数调用的时候就会创建一个该函数的执行上下文。因为js是单线程的，所以任务执行时首先会被压入执行栈中，若在此时遇到新的函数就会创建一个新的执行上下文(EC)并压入执行栈（ECS）顶，当这个新的函数执行完毕后，该EC会从ECS中弹出，继续执行上一个EC，在整个过程中，全局上下文永远在栈底部，只有当浏览浏览器关闭过后才会弹出。整个过程遵循先入后出的原则。

   以下是我做的动态图总结  

 

例.1：

如何使用es6的知识交换这两个变量的值：

let a = 1;
let b = 2;

（ 运用解构赋值 ）

[a,b] = [b,a]
console.log(a,b)

---

例.2：如何使用es6的知识完成数组去重的的操作

let arr = [12,43,23,12,43,55]

let item = [...new Set(arr)]
console.log(item)

3.promise

例1.下列输出是什么

//构造函数同步执行
const promise = new Promise((resolve,reject) =>{
    console.log(1)
    resolve();
    console.log(2)
})

//.then()函数异步执行
promise.then(() =>{
    console.log(3)    
})
console.log(4)

1,2,4,3

二、原型与原型链

1.原型：prototype

let obj = {}
let arr = []
obj.prototype.a = 666

常规的对象和数组没有原型,而是 函数特有

fn.prototype.name = '小明'
fn.prototype.fn2() = function(){
    console.log("111")
}

为什么要把函数挂载在原型上面：为了继承 

2.原型链：__proto___ => [[prototype]]

任何数据都有原型链

function Person(){
    
}
Person.prototype.name = '小明'
Person.prototype.age = 18
Perrson.prototype.getAge = function(){
    console.log(this.age)
}

let person1 = new Person()
console.log(person1.name)
person1.getAge()

原型链查找规则：从当前属性实例去查找，如果找到了就返回，否则顺着原型链一层一层往上面找

直到找到null为止，如果连null都没有找到则会报错

三.防抖与节流

1.防抖 => 将多次操作变为一次

经典的应用场景

<input placeholder="请输入电话">
<script>
    let telInput = document.querySelector('input')
    telInput.addEventListener('input',(e)=>{
    console.log('发起请求')
})
<script>

封装一个防抖方法

function antiShake(fn,wait){
    let timeOut = null;
    return args => {
        if(timeOut) clearTimeout(timeOut)
        timeOut = settTimeout(fn,wait);
    }
}
function demo(){
    console.log('发起请求')
}

2.节流 => 保证一定时间内只调用一次函数

let box = document.querySelector(".box")
box.addEventListener("touuchmove", throttle(demo,2000))

function throttle(event, time){
    let timer = null
    return function(){
        if(!timer){
            timer = setTimeout(()=>{
                event();
                timer = null;
            },time);        
        }
    }
}