【面试题一】

简介: 【面试题一】

1.bind、call、apply区别?如何实现一个bind?

作用:call apply bind就是用来改变this指向

var name="clover"
var obj={
    name:"zlx",
    say:function(){
        console.log(this.name)
    }
}
obj.say()//输出的是zlx   this指向obj对象
setTimeout(obj.say,0)//输出clover   this指向window对象

从以上代码可以很清楚的看出say()方法输出zlx

但是当我们把say放在setTimeout方法中,在定时器中是作为回调函数来执行,

所以回到主栈执行时是在全局执行上下文的环境中执行的,这时候this指向window,因此输出clover

其实,我们实际上需求是this指向obj对象,这时候需要改变this指向,那么我们可以使用

setTimeout(obj.say.bind(obj),0)//zlx   this指向obj对象

具体使用:

apply接收的是两个参数,第一个参数是this的指向,第二个参数是函数接受的参数,以数组的形式传入

改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次

function fn(...arg){
    console.log(this.args)
}
let obj={
    myname:"zlx"
}
fn.apply(obj,[1,2])//this会变成传入的obj,传入的参数必须是一个数组
fn(1,2)//this指向window

但是当第一个参数是null或者undefined的时候,在浏览器中默认指向window

fn.apply(null,[1,2])//this指向window
fn.apply(undefined,[1,2])//this指向window

call

call方法的第一个参数也是this指向,后面传入的是一个参数列表

跟apply一样,改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次

function fn(...args){
    console.log(this.args)
}
let obj={
    myname:"zlx"
}
fn.call(obj,1,2)//this会变成传入的obj,传入参数必须是一个数组
fn(1,2)//this指向window

相同的,当他的第一个参数是null或者undefined的时候,浏览器默认指向window

fn.call(null,[1,2])//this指向window
fn.call(undefined,[1,2])//this指向window

bind

bind和call很相似,第一个参数也是this指向,后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)

改变this指向后不会立即执行,而是返回一个永久改变this指向的函数

function fn(...args){
    console.log(this.args)
}
let obj={
    myname:'zlx'
}
fn.bind(obj)//this也会变成传入的obj,bind不是立即执行需要执行一次
fn(1,2)//this指向window

小结【区别】:

三者都可以改变函数的this对象指向

三者的第一个参数都是this将要指向的对象,如果参数是undefined/null或者·没有这个参数,则默认指向是全局window

三者都可以传参,但是apply是数组,而call是参数列表,且apply和call是一次性传入参数,而bind可以分为多次传入

bind是返回绑定this之后的函数,apply和call是立即执行

bind的实现

步骤:

       修改this指向

       动态传递参数

       兼容new关键字

//方式一:只在bind中传递函数参数
fn.bind(obj,1,2)()
//方式二:在bind中传递函数参数,也在返回函数中传递参数
fn.bind(obj,1)(2)

具体代码如下

Function.prototype.myBind = function (context) {
    // 判断调用对象是否为函数
    if (typeof this !== "function") {
        throw new TypeError("Error");
    }
    // 获取参数
    const args = [...arguments].slice(1),
          fn = this;
    return function Fn() {
        // 根据调用方式,传入不同绑定值
        return fn.apply(this instanceof Fn ? new fn(...arguments) : context, args.concat(...arguments)); 
    }
}

2.什么是防抖和节流?有什么区别?如何实现?

3.VUE路由的原理?

4.说说你对keep-alive的理解?

5.什么是响应式设计?响应式设计的基本原理是什么?如何做?

6.说说 React 生命周期有哪些不同阶段?每个阶段对应的方法是?

7.如何解决跨域问题?

8.说说react router有几种模式?实现原理?

9.说说对React Hooks的理解?解决了什么问题?

10.说说你对promise的了解?

11.说说webpack中常见的Loader?解决了什么问题?

12.说说 React中的setState执行机制?

13.Vue组件之间的通信方式都有哪些?


相关文章
|
消息中间件 设计模式 关系型数据库
面试题30天打卡-day08
面试题30天打卡-day08
27 0
|
3月前
|
JavaScript 前端开发 API
面试题总结
面试题总结
104 58
|
前端开发 JavaScript 开发工具
【面试题2】2
【面试题2】
|
6月前
面试题 08.04:幂集
面试题 08.04:幂集
26 0
|
6月前
|
网络协议 NoSQL 数据库
C++面试题
C++面试题
|
存储 NoSQL 关系型数据库
面试题30天打卡-day20
面试题30天打卡-day20
61 0
|
存储 缓存 NoSQL
面试题30天打卡-day19
面试题30天打卡-day19
36 0
|
NoSQL 前端开发 Java
面试题30天打卡-day12
面试题30天打卡-day12
37 0
|
缓存 移动开发 NoSQL
面试题30天打卡-day21
面试题30天打卡-day21
31 0
|
存储 Java 大数据
面试题30天打卡-day07
面试题30天打卡-day07
29 0