前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js call 和 apply

js call 和 apply

作者头像
小蔚
发布2019-09-11 14:35:39
1.3K0
发布2019-09-11 14:35:39
举报
文章被收录于专栏:小蔚记录小蔚记录

前言

  call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向  call 和 apply二者的作用完全一样,只是接受参数的方式不太一样。

方法定义   apply   Function.apply(obj,args)方法能接收两个参数:  

  obj:这个对象将代替Function类里this对象

  args:这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数。

call

  call方法apply方法的第一个参数是一样的,只不过第二个参数是一个参数列表

  在非严格模式下当我们第一个参数传递为null或undefined时,函数体内的this会指向默认的宿主对象,在浏览器中则是window

代码语言:javascript
复制
var test = function(){
  console.log(this===window);
}
test.apply(null);//true
test.call(undefined);//true

用法

  "劫持"别人的方法

  此时foo中的logName方法将被bar引用 ,this指向了bar

代码语言:javascript
复制
var foo = {
  name:"mingming",
  logName:function(){
    console.log(this.name);
  }
}
var bar={
  name:"xiaowang"
};
foo.logName.call(bar);//xiaowang

实现继承

代码语言:javascript
复制
unction 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指向被不经意改变的场景。 有一个局部的fun方法,fun被作为普通函数调用时,fun内部的this指向了window,但我们往往是想让它指向该#test节点,见如下代码:

代码语言:javascript
复制
window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun();//window
}

使用call,apply我们就可以轻松的解决这种问题了

代码语言:javascript
复制
window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun.call(this);//test
}

当然你也可以这样做,不过在ECMAScript 5strict模式下,这种情况下的this已经被规定为不会指向全局对象,而是undefined:

代码语言:javascript
复制
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();

其他用法

类数组

  这里把符合以下条件的对象称为类数组

  1.具有length属性

  2.按索引方式存储数据

  3.不具有数组的push,pop等方法

  常见类数组有 arguments,NodeList!

代码语言:javascript
复制
  (function(){
    Array.prototype.push.call(arguments,4);
    console.log(arguments);//[1, 2, 3, 4]
  })(1,2,3)

这样就往arguments中push一个4进去了

Array.prototype.push 页可以实现两个数组合并

同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,即:

代码语言:javascript
复制
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"]

也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合.

再比如我想求类数组中的最大值

代码语言:javascript
复制
(function(){
  var maxNum = Math.max.apply(null,arguments);
  console.log(maxNum);//56
})(34,2,56);

判断类型

代码语言:javascript
复制
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]

  如果有错误,请大家指出。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-09-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档