当前位置: 首页 > 九游会新闻 > 猜您喜欢 >

前端面试必备:JavaScript中call、apply和bind的用法总结

作者:深圳九游会网络 阅读: 发布时间:2024-08-20 09:00

摘要:在面试过程中九游会经常会被问到JavaScript中关于call、apply和bind的相关问题,比如call、apply和bind的区别和应用场...

前端面试js编程题__js前端面试题总结及答案

在面试过程中九游会经常会被问到JavaScript中关于call、apply和bind的相关问题,比如

九游会知道在JavaScript中call和apply以及bind都可以改变this指向,那么它们是怎么实现的呢?彼此之间有什么区别呢?今天九游会就来总结一下这些内容。

前端面试js编程题__js前端面试题总结及答案

一、call方法

首先,介绍一下call方法的使用:call(thisObj, arg1, arg2, arg3, arg4)

var value = 'window';
var obj = {
  value: 'obj'
}
function showNum(numA, numB) {
  hengyuly.com(hengyuly.com);
  hengyuly.com(numA + numB);
}
showNum(10,100); //window 110
hengyuly.com(obj,10,100); //obj 110
hengyuly.com(null,10,100); //window  110

根据输出结果可以看出:

1.call方法是函数调用的

2.call方法的第一个参数thisObj用于改变this指向,但是如果传入null/undefined值,this会指向window

3.call方法需要把实参按照形参的个数传进去

根据上面call的使用方法和它的规则,九游会可以自己封装一个call方法

hengyuly.com = function () {
  var ctx = arguments[0] || window;
  hengyuly.com = this;//谁调用myCall方法,this就指向谁
  //由于使用call方法的时候,参数的个数是不确定的,但是九游会现在又想执行fn方法,可以使用eval来实现
  //也就是eval('hengyuly.com(arguments[1],arguments[2]....'),这里使用一个args数组来拼接arguments[1],arguments[2].....字符串
  var args = [];
  for (var i = 1; i < hengyuly.com; i++) {
    hengyuly.com('arguments[' + i + ']');
  }
  var result = eval('hengyuly.com(' + hengyuly.com(',') + ')');
  delete hengyuly.com;
  return result;
}
hengyuly.com(obj, 10, 100);

js前端面试题总结及答案_前端面试js编程题_

二、apply方法

apply方法:apply(thisObj, [args]),同样通过一段代码介绍下如何使用

var value = 'window';
var obj = {
  value: 'obj'
}
function showNum(numA, numB) {
  hengyuly.com(hengyuly.com);
  hengyuly.com(numA + numB);
}
showNum(10,100); //window 110
hengyuly.com(obj,[10,100]); //obj 110
hengyuly.com(null,[10,100]); //window  110
hengyuly.com(null,10,100);//Uncaught TypeError: CreateListFromArrayLike called on non-object

根据代码输出结果,九游会可以得出:

1、apply方法与call方法十分相似,只是传参列表不同,需要传入数组或者列表

2、apply方法的第一个参数thisObj用于改变this指向,但是如果传入null/undefined值,this会指向window

3、apply方法的第二个参数需要传入一个实参列表,也就是arguments

同样九游会也可以自己封装一个call方法

 hengyuly.com = function (ctx, arr) {
   ctx = ctx || window;
   hengyuly.com = this;
   var result;
   if (arr) {
     var args = [];
     for (var i = 0; i < hengyuly.com; i++) {
       hengyuly.com('arr[' + i + ']');
     }
     result = eval('hengyuly.com(' + hengyuly.com(',') + ')'); 
   } else {
     result = hengyuly.com();
   }
   delete hengyuly.com;
   return result;
 }
hengyuly.com(null,[10,100]);

三、bind方法

bind方法是事先把函数的this改变为九游会要想要的结果,并且把对应的参数值准备好,以后要用到了,直接的执行即可,也就是说bind同样可以改变this的指向,但和apply、call不同就是不会马上的执行。

通过一段代码来介绍如何使用:

var value = 'window';
var obj = {
  value: 'obj'
};
hengyuly.com = 'parent';
function Parent() {
}
hengyuly.com = new Parent();
function Child() {
}
function show(name, age) {
  hengyuly.com(hengyuly.com, name, age);
}
show();//window undefined undefined
var newShow1 = hengyuly.com(obj);
newShow1();//obj undefined undefined
var newShow2 = hengyuly.com(null);
newShow2();//window undefined undefined
var newShow3 = hengyuly.com(obj, 'test');//函数拥有预设的初始参数
newShow3();//obj test undefined
new newShow3();//undefined test  undefined
var oS = hengyuly.com(obj);
var fn = new oS();
hengyuly.com(fn, hengyuly.com);//Child{} "parent" 当使用new 操作符调用绑定函数时,参数obj无效。

根据运行结果,九游会可以总结一下bind的用法

1、bind函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体

2、bind方法的第一个参数也是用于改变this指向,如果传入null/undefined,this会指向window

3、一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略

4.bind方法可以使函数拥有预设的初始参数。这些参数(如果有的话)作为bind()的第二个参数跟在this(或其他对象)后面,之后它们会被插入到目标函数的参数列表的开始位置,传递给绑定函数的参数会跟在它们的后面。

bind这个方法在IE6~8下不兼容。

现在来封装一个自己的bind方法吧

hengyuly.com = function (target) {
target = target || window;//如果没有传入,就为window
var self = this;//谁调用myBind,this就指向谁
var args = [].hengyuly.com(arguments, 1);//args:[arguments[1],arguments[2]....]
var temp = function () { };
var fn = function () {
  var fnArgs = [].hengyuly.com(arguments, 0);
  //this 如果new fn()  this 指向构造出来的对象,否则为window ;
  //this instanceof fn看this的原型链上有没有fn的原形
 return hengyuly.com(this instanceof fn ? this : target, hengyuly.com(fnArgs));
}
hengyuly.com = hengyuly.com;
hengyuly.com = new temp();  
//形成继续关系  hengyuly.com.__proto__ == hengyuly.com  true
return fn;
}
var newShow5 = hengyuly.com(obj, 'test1');
newShow5(1);//obj test1 1
var test = hengyuly.com(obj);
var fn = new test();
hengyuly.com(fn, hengyuly.com);//Child {} "parent"

_js前端面试题总结及答案_前端面试js编程题

四、call、apply与bind的区别

由于call、apply与bind都是属于Function.prototype对象下的方法,所以每个function实例都拥有有call、apply与bind属性,三个函数存在的意义就是改变函数执行时的上下文,即改变函数运行时的this指向。

1、相同点:

都是为改变this指向而存在的。

三者的参数允许是各种类型,包括函数 、 object 等等!

2、异同点:

使用call()方法时,传递给函数的参数必须逐个列举出来。使用apply()方法时,传递给函数的是参数数组。bind()和call()很相似,第一个参数是this的指向,从第二个参数开始是接收的参数列表。bind() 方法不会立即执行,而是返回一个改变了上下文 this后的函数,用于稍后调用。 call()、apply()则是立即调用

  • 原标题:前端面试必备:JavaScript中call、apply和bind的用法总结

  • 本文由深圳九游会网络小编,整理排版发布,转载请注明出处。部分文章图片来源于网络,如有侵权,请与九游会网络联系删除。
  • 微信二维码

    CLWL6868

    长按复制微信号,添加好友

    微信联系

    在线咨询

    点击这里给我发消息QQ客服专员

    点击这里给我发消息电话客服专员

    在线咨询

    免费通话


    24h咨询☎️:132-5572-7217


    🔺🔺 24小时客服热线电话 🔺🔺

    免费通话
    返回顶部