网站首页 > 基础教程 正文
在面试过程中我们经常会被问到JavaScript中关于call、apply和bind的相关问题,比如
- call、apply和bind的区别和应用场景
- 如何利用call、apply来做继承
- call、apply和bind的源码实现原理
- 怎么利用call、apply来求一个数组中最大或者最小值
我们知道在JavaScript中call和apply以及bind都可以改变this指向,那么它们是怎么实现的呢?彼此之间有什么区别呢?今天我们就来总结一下这些内容。
一、call方法
首先,介绍一下call方法的使用:call(thisObj, arg1, arg2, arg3, arg4)
var value = 'window';
var obj = {
value: 'obj'
}
function showNum(numA, numB) {
console.log(this.value);
console.log(numA + numB);
}
showNum(10,100); //window 110
showNum.call(obj,10,100); //obj 110
showNum.call(null,10,100); //window 110
根据输出结果可以看出:
1.call方法是函数调用的
2.call方法的第一个参数thisObj用于改变this指向,但是如果传入null/undefined值,this会指向window
3.call方法需要把实参按照形参的个数传进去
根据上面call的使用方法和它的规则,我们可以自己封装一个call方法
Function.prototype.myCall = function () {
var ctx = arguments[0] || window;
ctx.fn = this;//谁调用myCall方法,this就指向谁
//由于使用call方法的时候,参数的个数是不确定的,但是我们现在又想执行fn方法,可以使用eval来实现
//也就是eval('ctx.fn(arguments[1],arguments[2]....'),这里使用一个args数组来拼接arguments[1],arguments[2].....字符串
var args = [];
for (var i = 1; i < arguments.length; i++) {
args.push('arguments[' + i + ']');
}
var result = eval('ctx.fn(' + args.join(',') + ')');
delete ctx.fn;
return result;
}
showNum.myCall(obj, 10, 100);
二、apply方法
apply方法:apply(thisObj, [args]),同样通过一段代码介绍下如何使用
var value = 'window';
var obj = {
value: 'obj'
}
function showNum(numA, numB) {
console.log(this.value);
console.log(numA + numB);
}
showNum(10,100); //window 110
showNum.apply(obj,[10,100]); //obj 110
showNum.apply(null,[10,100]); //window 110
showNum.apply(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方法
Function.prototype.myApply = function (ctx, arr) {
ctx = ctx || window;
ctx.fn = this;
var result;
if (arr) {
var args = [];
for (var i = 0; i < arr.length; i++) {
args.push('arr[' + i + ']');
}
result = eval('ctx.fn(' + args.join(',') + ')');
} else {
result = ctx.fn();
}
delete ctx.fn;
return result;
}
showNum.myApply(null,[10,100]);
三、bind方法
bind方法是事先把函数的this改变为我们要想要的结果,并且把对应的参数值准备好,以后要用到了,直接的执行即可,也就是说bind同样可以改变this的指向,但和apply、call不同就是不会马上的执行。
通过一段代码来介绍如何使用:
var value = 'window';
var obj = {
value: 'obj'
};
Parent.prototype.value = 'parent';
function Parent() {
}
Child.prototype = new Parent();
function Child() {
}
function show(name, age) {
console.log(this.value, name, age);
}
show();//window undefined undefined
var newShow1 = show.bind(obj);
newShow1();//obj undefined undefined
var newShow2 = show.bind(null);
newShow2();//window undefined undefined
var newShow3 = show.bind(obj, 'test');//函数拥有预设的初始参数
newShow3();//obj test undefined
new newShow3();//undefined test undefined
var oS = Child.bind(obj);
var fn = new oS();
console.log(fn, fn.value);//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方法吧
Function.prototype.myBind = function (target) {
target = target || window;//如果没有传入,就为window
var self = this;//谁调用myBind,this就指向谁
var args = [].slice.call(arguments, 1);//args:[arguments[1],arguments[2]....]
var temp = function () { };
var fn = function () {
var fnArgs = [].slice.call(arguments, 0);
//this 如果new fn() this 指向构造出来的对象,否则为window ;
//this instanceof fn看this的原型链上有没有fn的原形
return self.apply(this instanceof fn ? this : target, args.concat(fnArgs));
}
temp.prototype = this.prototype;
fn.prototype = new temp();
//形成继续关系 fn.prototype.__proto__ == this.prototype true
return fn;
}
var newShow5 = show.myBind(obj, 'test1');
newShow5(1);//obj test1 1
var test = Child.bind(obj);
var fn = new test();
console.log(fn, fn.value);//Child {} "parent"
四、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()则是立即调用
猜你喜欢
- 2024-12-22 一大波开源小抄来袭 开源小说软件下载
- 2024-12-22 「Electron跨平台桌面应用开发 4」系统托盘功能
- 2024-12-22 超级简单 Bing美图每天自动收 收藏美图
- 2024-12-22 使用Python进行并发编程 python 并发编程
- 2024-12-22 我的世界计分板命令创建队伍教程详解
- 2024-12-22 Webpack5 配置手册(从0开始) webpack简单配置
- 2024-12-22 electron开发桌面应用实现串口通信,看完你就学会了
- 2024-12-22 JavaScript中原生的原型 Prototype
- 2024-12-22 webpack系列学习-基本用法 webpack基本使用
- 2024-12-22 前端技术探秘-Nodejs的CommonJS规范实现原理
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)