源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

详解js中的apply与call的用法

  • 时间:2020-11-27 22:23 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:详解js中的apply与call的用法
[b]前言[/b] [b]call 和 apply [/b]都是为了改变某个函数运行时的[b]context [/b]即上下文而存在的,换句话说,就是为了[b]改变函数体内部 this 的指向[/b]。 [b]call 和 apply[/b]二者的作用完全一样,只是接受参数的方式不太一样。 [b]方法定义[/b] [b]apply[/b] [code]Function.apply(obj,args)[/code]方法能接收两个参数: [b]obj:[/b]这个对象将代替Function类里this对象 [b]args:[/b]这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数。 [b]call[/b] [b]call方法[/b]与[b]apply方法[/b]的第一个参数是一样的,只不过第二个参数是一个参数列表 在非严格模式下当我们第一个参数传递为null或undefined时,函数体内的this会指向默认的宿主对象,在浏览器中则是window
var test = function(){
  console.log(this===window);
}
test.apply(null);//true
test.call(undefined);//true
[b]用法[/b] [b]"劫持"别人的方法[/b] 此时[b]foo[/b]中的[b]logName[/b]方法将被bar引用 ,[b]this[/b]指向了[b]bar[/b]
var foo = {
  name:"mingming",
  logName:function(){
    console.log(this.name);
  }
}
var bar={
  name:"xiaowang"
};
foo.logName.call(bar);//xiaowang
[b]实现继承[/b]
function Animal(name){   
  this.name = name;   
  this.showName = function(){   
    console.log(this.name);   
  }   
}   

function Cat(name){  
  Animal.call(this, name);  
}   

var cat = new Cat("Black Cat");   
cat.showName(); //Black Cat
在实际开发中,经常会遇到this指向被不经意改变的场景。 有一个局部的[b]fun[/b]方法,[b]fun[/b]被作为普通函数调用时,[b]fun[/b]内部的[b]this[/b]指向了[b]window[/b],但我们往往是想让它指向该[b]#test[/b]节点,见如下代码:
window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun();//window
}
使用[b]call,apply[/b]我们就可以轻松的解决这种问题了
window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun.call(this);//test
}
当然你也可以这样做,不过在[b]ECMAScript 5[/b]的[b]strict[/b]模式下,这种情况下的this已经被规定为不会指向全局对象,而是[b]undefined:[/b]
window.id="window";
document.querySelector('#test').onclick = function(){
  var that = this;
  console.log(this.id);//test
  var fun = function(){
    console.log(that.id);
  }
  fun();//test
}
function func(){
  "use strict"
  alert ( this );  // 输出:undefined
}
func();
[b]其他用法[/b] [b]类数组[/b] 这里把符合以下条件的对象称为类数组 1.具有length属性 2.按索引方式存储数据 3.不具有数组的push,pop等方法 常见类数组有[b]arguments,NodeList![/b]
(function(){
  Array.prototype.push.call(arguments,4);
  console.log(arguments);//[1, 2, 3, 4]
})(1,2,3)
这样就往[b]arguments[/b]中push一个4进去了 [code]Array.prototype.push [/code]页可以实现两个数组合并 同样push方法没有提供push一个数组,但是它提供了[b]push(param1,param,…paramN)[/b] 所以同样也可以通过apply来装换一下这个数组,即:
var arr1=new Array("1","2","3"); 
var arr2=new Array("4","5","6"); 
Array.prototype.push.apply(arr1,arr2); 
console.log(arr1);//["1", "2", "3", "4", "5", "6"]
也可以这样理解,[b]arr1[/b]调用了[b]push[/b]方法,参数是通过[b]apply[/b]将数组装换为参数列表的集合. [b]再比如我想求类数组中的最大值[/b]
(function(){
  var maxNum = Math.max.apply(null,arguments);
  console.log(maxNum);//56
})(34,2,56);
[b]判断类型[/b]
console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]
以上就是apply与call的用法总结的全部内容,欢迎大家积极留言参加讨论,也希望本文对大家学习javascript有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部