美文网首页JavaScript学习笔记,学习指南
JS中call与apply的应用与区别

JS中call与apply的应用与区别

作者: 光小月 | 来源:发表于2016-10-25 12:34 被阅读19次

发现http://uule.iteye.com/blog/1158829博客上讲的不对,在此修改一下。

call

语法: call([thisObj [, arg1[, arg2]]])
语义:如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
例子:add.call(sub , 3 , 1);
调用一个对象的一个方法,以另一个对象替换当前对象.
调用add对象的add方法,用sub对象替换 add 对象,就成了调用add();

apply

语法:apply(thisObj [, argArray | arguments ]);
语义:应用某一对象的一个方法,用另一个对象替换当前对象。
tips:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

区别

call 与apply,这两个方法基本上是一个意思,第一个参数一样。
区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,
也可以是arguments。

例子:
1.执行add方法,add方法中的this说指向的是sub

function add(a, b){
  console.log(a+b);
}
function sub(a, b){
  console.log(a-b);
}
add.call(sub, 3 ,1);  //4

2.执行animal.showName方法,其中的this.name说指向的是cat对象,值为cat。

function Animal(){
  this.name = "Animal";
  this.showName = function(){
    console.log(this.name);
  }
}
function Cat(){
  this.name= 'cat';
}

var animal = new Animal();
var cat = new Cat();

animal.showName.call(cat, ',');//cat
//animal.showName.apply(cat, []); //cat

3.继承,开始cat1对象中没有showName方法,Animal.call(this, name)语句执行后,Cat1函数就可以继承Animal中的属性和方法。

继承
function Cat1 (name){
  Animal.call(this, name); 
}

var cat1 = new Cat1('Black Cat1!');
cat1.showName();//  Animal

4.多重继承

多重继承
function class1(){
  this.showSub = function(a, b){
    alert(a-b);
  }
}
function class2(){
  this.showAdd = function(a, b){
    alert(a +b);
  }
}
function class3(){
  class1.call(this);
  class2.call(this);
}
new class3().showSub(10 , 1);//9
new class3().showAdd(9 , 8); //17

5.call与apply只是改变this的指向.

function Obj (){
  this.value = 'vars';
}
var value = 'args';
function Fun1(){ 
  alert(this.value);
} 
window.Fun1();//args
Fun1.call(window);//args
Fun1.apply(window);//args
Fun1.call(document.getElementById('my'));//args
Fun1.call(new Obj());//vars
//--------------------
var func = new function(){
  this.a = 'func';
}
var myFunc = function(x){
  var a= 'myFunc';
  //this.a = 'myFunc';
  alert(this.a);
  alert(x);
}
myFunc.call(func, 'var'); // func   ----   var
//tips: 调用func的new function()方法,其中的this.a已经替换成myFunc的对象了。


相关文章

  • 【JS】array、object、function

    call(), apply(), bind() 应用与区别 把数组中指定的元素(Apple)移动到首位 js的ev...

  • JS中call与apply的应用与区别

    发现http://uule.iteye.com/blog/1158829博客上讲的不对,在此修改一下。 call ...

  • js中方法继承

    call 和 apply JS中的call()和apply()方法

  • 手写call和apply

    1. 什么是call和apply 传送门:理解与使用js中的apply()和call()至于为什么要手写代码,不仅...

  • call与apply

    首先明确一点,call与apply的作用是一样的,只是传参的形式有区别而已。 1、call与apply的区别 ap...

  • JavaScript 中 apply 、call 的详解

    apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法...

  • 17_call和apply的区别是什么?caller和calle

    一、call和apply的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,...

  • call apply

    js基础知识---call,apply,bind的用法 call,apply详解 javascript中,call...

  • JS中apply与call

    js中apply和call算是一个比较绕的方法,今天我就谈谈我对它们的理解,错误之处欢迎指正。 1,语法 call...

  • this

    this 的值到底是什么?一次说清楚 1、apply、call 、bind的作用与区别? call、apply 调...

网友评论

    本文标题:JS中call与apply的应用与区别

    本文链接:https://www.haomeiwen.com/subject/axsruttx.html