详解js中call与apply关键字的作用

javascript call与apply关键字的作用

apply接受两个参数。第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合。

call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参数。

rush:js;"> var func = function(a,b,c) { alert(a + b + c); } func.apply(null,[1,2,3]);//弹出6 func.call(null,1,3);//弹出6

当apply与call传入的第一个参数为null时,函数体内的this会指向window。

当apply与call传入的第一个参数为null时,函数体内的this会指向window。

call与apply的用途

1、改变this的指向

rush:js;"> var obj1 = { name = '刘备' }

var obj2 = {
name = '曹操'
}
var getName = function(){
alert(this.name);
}

window.name = '三国';
getName();//弹出"三国"
getName.call(obj1);//弹出"刘备"
getName.call(obj2);//弹出"曹操"

所以,当在一些情况下this被莫名改变指向之后,可以使用call或apply来进行修正this的指向。

rush:js;"> document.getElementById('div1').onclick = function(){ alert(this.id);//div1 var fun1 = function(){ alert(this.id);//window.id 即undefined } fun1();//普通函数的方式调用,this指代window,相当于window.id 即 undefined }

由于是普通函数的方式调用,所以上面的例子中,this已经变成了window。下面看看如何使用call进行修正。

rush:js;"> document.getElementById('div1').onclick = function(){ alert(this.id); var fun1 = function(){ alert(this.id); } fun1.call(this);//强制函数内的this为外层的this, }

2、调用其他对象的函数

示例1:

rush:js;"> var obj1 = { a:1,b:2,add:function() { return this.a + this.b; } } var obj2 = { a:1,} var result = obj1.add.call(obj2);//用obj1的函数来计算obj2的两个属性的和 alert(result);//输出3

示例2:借用构造函数实现类似继承的效果

rush:js;"> var A = function(name) { this.name = name; }; var B = function(){ A.apply(this,arguments) } B.prototype.getName = function(){ return this.name; } var b = new B('刘备'); alert(b.getName());

以上就是本文的内容,有问题可以和小编联系,谢谢对编程之家的支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...