【Javascript 拾遗之一】apply 和 call 函数

  说到Web前端开发,很多工程师都觉得没什么可以深究,无非Html/Css/Javascript,然而在Javascript语言里,我们还有很多不了解和不熟悉的问题,三年前端开发的我在最近的面试中就遇到了很多薄弱点。因此,下定决心要深究前端核心知识,达到神一般的境界。我们先从Javascript说起,HTML和Css算是标记语言,但也不乏很多特色,以后会慢慢讨论。

apply 和 call 函数

1、定义

我们先看一下这两个函数在Javascript中的API,

void apply([thisObj[,argArray]])

调用一个对象的方法,把当前对象的所有方法属性赋予参数1所指向的对象(如有重名属性或方法直接覆盖。),并且以参数2作为多个参数输入。

thisObj的缺省值是全局对象window

void call([thisObj[,arg1[, arg2[,[,argN]]]]])

call与apply区别在于apply的参数2的数组分为多个输入参数了。

试着理解以下代码的执行结果,深入理解定义。

var person_no1 = {
        name : ‘Jiminy‘,
        age : 30,
        phone : 123,
        fun : function(){
            alert(this.name);
        }
}

var person_no2 = {
        name : ‘John‘,
        age : 25,
        phone : 123
}
person_no1.fun.call(this);//undefined
person_no1.fun.call(person_no1);//Jiminy
person_no1.fun.call(person_no2);//John

2、应用

-回调函数

我们在封装一些控件的时候,通常需要一些方法在某些操作之后执行,可以用call或者apply来回调另一个方法。

 1 function A(name){
 2     this.name = name;
 3     this.showName = function(a){
 4         alert(this.name);
 5         alert(a);
 6     }
 7 }
 8
 9 function B(name){
10     console.warn(this);
11     this.name = ‘CCCCC‘;
12     this.alertName = function(){
13         alert(this.name);
14     }
15     this.showName = function(){
16         alert(‘TTTTT‘);
17     }
18     var a = new A(‘QQQ‘);
19     //call back
20     a.showName.call(this, ‘x‘);
21     // equal => a.showName.apply(this, [‘x‘]);
22 }
23 B("I‘m B");
24 //CCCCC
25 //x

代码示例中:

把a.showName这个对象替换给当前对象window,并直接调用匿名函数,alert(window.name) //CCCCC

function A, B 都是 window 对象的函数。

-继承

 1 function A(name){
 2     this.name = name;
 3     this.showName = function(){
 4         alert(this.name);
 5     }
 6 }
 7
 8 function B(name){
 9     this.name = ‘CCCCC‘;
10     this.alertName = function(){
11         alert(this.name);
12     }
13     this.showName = function(){
14         alert(‘TTTTT‘);
15     }
16     //执行这条语句之后
17     //函数B就变成了function B(){
18     //    this.name = name;
19     //  this.showName = function(){
20     //      alert(this.name);
21     //  }
22     //    this.alertName = function(){
23     //        alert(this.name);
24     //  }
25     //}
26     A.call(this, name);
27     // equal => A.apply(this, [name]);
28 }
29
30 var a = new A("I‘m A");
31 a.showName();    //I‘m A
32 var b = new B("I‘m B");
33 b.showName();    //I‘m B
34 b.alertName();    //I‘m B

代码示例中:

B通过A.call(this, name)继承了A的所有属性和方法,并且覆盖了相同的属性和方法!

-多继承

和单继承类似,大家可以尝试着写一下。

-方法参数转数组

我们经常在一些开源的框架里看到Array.prototype.slice.call(arguments)这样的代码,arguments就是方法内部的一个默认属性,是对象类型,包含参数列表

如{

  0 : param1,

  1 : param2,

  ....

  length : N

}

这样通过调用Array.prototype.slice.call()方法可以把这个对象赋予array.slice方法,由于js调用数组和对象时候array[index]和object[index]结果是一样的,所以输入包含length属性的对象也可以使用这个方法。

function test(a, b, c){
    alert(Array.prototype.slice.call(arguments));
}
Array.prototype.slice = function(start,end){
    var result = new Array();
    start = start || 0;
    end = end || this.length;
    for(var i = start; i < end; i++){
         result.push(this[i]);
    }
    return result;
}
test(‘x‘, ‘y‘, ‘z‘);//对象数组 arguments 用法
alert(Array.prototype.slice.call([‘x‘, ‘y‘, ‘z‘]));//源生数组
alert(Array.prototype.slice.call(‘xyz‘));//字符串数组
alert(Array.prototype.slice.call({0:‘x‘,1:‘y‘,2:‘z‘,length:3}));//对象数组
//x,y,z
//x,y,z
//x,y,z
//x,y,z

3、总结

本文简单介绍了几种apply和call的应用,是本人的经验和参考其他资料所得,在实际开发中,还有很多技巧,需要灵活应用,希望大家能通过本文彻底理解函数的定义,融汇贯通,在结构化代码的同时巧妙地

使用这些方法使得代码优美简洁。

4、参考资料

http://uule.iteye.com/blog/1158829

时间: 2024-11-08 09:53:00

【Javascript 拾遗之一】apply 和 call 函数的相关文章

JavaScript中的apply和call函数详解

第一次翻译技术文章,见笑了! 翻译原文:Function.apply and Function.call in JavaScript 第一段略. 每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象.看一下这篇文章,复习一下(refresher)JavaScript特性.你可能还想知道JavaScript中函

javascript 的bind/apply/call函数

javascript有三个使用频率非常高的内建函数:bind/apply/call.许多高级点的技巧都是基于这几个函数来实现的.这三个函数都用于改变函数的执行环境.从而达到代码复用的目的. 先来所说bind函数, bind,函数通常有两个用途: 1. 创建新函数,指定函数的this指针. name = 'global'; var obj1 = {name: 'foo'}; var showName = function() { console.log(this.name); } showName

JavaScript基础插曲---apply,call和URL编码等方法

Js基础学习 Js的压缩: 就是利用js的语法格式通过缩短变量名,去掉空格等来进行压缩. Apply和call的使用 1:apply方法:应用某一对象的方法,用于一个对象替换当前对象.主要是改变this的值. <script type="text/javascript"> ????var user_name = "阿辉"; ????//一个函数,这里主要注意里面的this的含义. ????function showName() { ????????ale

javascript call()和apply()

ECMAScript给Function原型定义了两个方法,一个是call()和apply().使用这两个方法可以想其他对象方法一样调用函数.把对象当成数据一样的参数传递给函数,参数去调用函数. 他两的区别是:call的第一个参数必须是对象(或者函数),其余的参数可以任意.而apply的一般只有两个参数,第一个必须是对象或者函数,第二个是一个带下标的集合. 例如: function dow(s){ document.write("<h1>"+s+"</h1&g

JavaScript中的apply()方法和call()方法使用介绍

javascript中apply和call方法的作用及区别说明 call和apply的说明 call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同. 语法:foo.call(this, arg1,arg

javascript中call,apply,bind的用法对比分析

这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用“,"请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用

JavaScript权威指南第08章 函数

函数 在javascript中,函数是对象,所以可以给函数设置属性,可以调用他们的方法. 8.1函数定义 function 函数名(参数列表){ 语句内容 } 函数命名规则 1.字母之间用下划线 like_this() 2.非首字母的单词首字母大写 likeThis() 嵌套函数 在函数里面定义函数 8.2函数调用 函数调用的4种方法 1.函数 2.方法 3.构造方法 4.apply call 简介调用 8.3函数的实参和形参 8.4作为值的函数 8.5作为命名空间的函数 8.6闭包 8.7函数

【Javascript 拾遗之六】深入Javascript数据类型和对象类型

通过前几章的讲解,我们已经摸清楚Javascript的几个重要特征,具有类概念的函数,“函数”实例化的后得到对象, 原型链, 函数的定义等等.作为高级脚本语言的Javascript同样是面向对象的语言,但是Javascript中的数据类型不像JAVA中的“万物皆对象”,本文我们就来深入学习一下Javascript中的几种数据类型及其判断.Let's start learning, move it! 深入Javascript数据类型 1.5种基本数据类型和1种复杂数据类型 5种基本数据类型包括 :

一篇文章把你带入到JavaScript中的闭包与高级函数

在JavaScript中,函数是一等公民.JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等,函数式编程时一种编程范式. function dada() { var a = 1; var b = function() { console.log(a); } return b // b 就是一个闭包函数,因为它能访问dada函数的作用域 } JavaScript的函数也是对象,可以有属性,可以赋值给一个变量,可以放在数组里作为元素