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组件之间的通信方式都有哪些?