讲解call() apply() bind()方法

在javaScript中,每个函数实际上都是一个Function对象。call、apply和bind就是Function自带的方法。下面对这三个方法进行讲解。

1. fun.call(thisArg, arg1, arg2, ...)

    参数:

        thisArg: 在fun函数运行时指定的this值。但是this值不一定是该函数执行时真正的this值,如果处于非严格模式(non-strict mode), 则指定null和undefined的this值会自动指向全局对象(浏览器中是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。

        arg1, arg2, .... :  指定的参数列表。

说明:call()允许为不同的对象分配和调用属于一个对象的函数/方法。提供新的this值给当前调用的函数/方法。可以使用call来实现继承。

示例:

使用call方法调用父构造函数:

    在子构造函数中,通过调用父构造函数的call方法来实现继承,下例中,Food和Toy构造函数创建的对象都会拥     有在Product构造函数中添加的name属性和price属性,而category属性是在各自的构造函数中定义的。

function Product(name, price){

    this.name = name;

    this.price = price;

}

function Food(name, price){

    Product.call(this, name, price);

    this.category = 'food';

}

function Toy(name, price){

    Product.call(this, name, price);

    this.category = 'toy';

}

var cheese = new Food('feta', 5);

console.log(cheese.name); // 输出:feta

var fun = new Toy('robot', 40);

console.log(fun.name); // 输出:robot

使用call方法调用匿名函数:

    在下例的for循环中构造一个匿名函数,通过调用匿名函数的call方法,将每个数字元素作为指定的this值执行了     匿名函数

const animals = [

    { species: 'Lion', name: 'King' },

    { species: 'Whale', name: 'Fail' }

];

for(let i = 0; i < animals.length; i++){

    (function(){

        this.print = function() {

            console.log('#' + i + ' ' + this.species + ': ' + this.name);

         }

    }).call(animals[i], i);

}

执行上述代码将输出:

#0 Lion: King

#1 Whale: Fail

使用call方法调用函数并确定上下文的this:

    下例中调用greet方法时,改方法的this值会绑定到obj对象。

function greet(){

    const reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');

    console.log(reply);

}

const obj = {

    animal: 'cats', sleepDuration: '12 and 16 hours'

}

greet.call(obj);

输出结果为:cats typically sleep between 12 and 16 hours

call方法调用函数并且没有确定第一个参数:

下例中调用display方法,但是没有传递它的第一个参数。如果没有传递第一个参数,this的值将会被绑定为全局对象

const sData = 'Wisen';

function display(){

    console.log('sData value is %s ', this.sData);

}

display.call();

将输出:sData value is Wisen

注意:在严格模式下this的值会是undefined.

2. func.apply(thisArg, [argsArray])

参数:

    thisArg: func函数运行时使用的this值,this可能不是改方法看到的实际值,如何处于非严格模式下,则指定为null或undefined时会自动替换为指向全局对象,原始值会被包装。

    argsArray: 一个数组或类数组对象,数组元素将作为单独的参数传给func函数。如果该参数值为null或undefined,则表示不需要传入任何参数

说明:

    调用一个存在的函数时,为其指定一个this对象。this指向当前对象,也就是正在调用这个函数的对象。使用apply可以只写一次这个方法然后在另一个对象中继承它,而不用在新对象中重复写改方法。

示例:

    用apply将数组添加到另一个数组中:

    const array = ['a', 'b'];

    const elements = [0, 1, 2];

    array.push.apply(array, elements);

    console.log(array);    // ["a", "b", 0, 1, 2]

    使用apply和内置函数

    const numbers = [5, 6, 2, 3, 7];

    // 应用(apply) Math.min/Math.max 内置函数完成

    const max = Math.max.apply(null, numbers);    // 基本等同于Math.max(numbers[0], ...)或Math.max(5,6...)

    const min = Math.min.apply(null, numbers);

    注意:如果用上面的方式调用apply,会有超出JS引擎的参数长度限制的风险。如果参数数组可能非常大,推荐使用下面这种策略来处理:将参数数组切块后循环传入目标方法:

    function minOfArray(arr){

        const min = Infinity;

        const QUANTUM = 32768;

        for(let i = 0, len = arr.length; i < len; i += QUANTUM){

            const submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));

            min = Math.min(submin, min);

        }

        return min;

    }

    const min = minOfArray([5,6,2,3,7]);

3. function.bind(thisArg[, arg1[, arg2[,...]]])

    参数:

    thisArg: 调用绑定函数时作为this参数传递给目标函数的值。如果使用new运算符构造绑定函数,则忽略该值。

    arg1,arg2,...: 当目标函数被调用时,预先添加到绑定函数的参数列表中的参数。

    说明:

    bind()函数会创建一个新的绑定函数,调用绑定函数通常会导致执行包装函数。

    示例:

    创建绑定函数:

    bind()最简单的用法是创建一个函数,不论怎么调用,这个函数都有同样的this值。常见一个错误是将一个方法从对象中拿出来,然后调用,期望方法中的this是原来的对象。如果不做特殊处理,一般会丢失原来的对象。

this.x = 9;    // 在浏览器中,this指向全局的"window"对象

const module = {

    x: 81,

    getX: function(){ return this.x; }

};

module.getX();    // 81

const retrieveX = module.getX;

retrieveX();    // 返回9 因为函数是在全局作用域中调用的

const boundGetX = retrieveX.bind(module);    // 创建一个新函数,吧this绑定到module对象

boundGetX();    // 81

偏函数:

    bind()的另一个最简单的用法是使用一个函数拥有预设的初始化参数。将这些参数作为bind()的参数写在this后面。当绑定函数被调用时,这些参数会被插入到目标函数的参数列表的开始位置,传递给绑定函数的参数会跟在它们后面。

function list(){

    return Array.prototype.slice.call(arguments);

}

function addArguments(arg1, arg2){

    return arg1 + arg2;

}

const list1 = list(1,2,3);    // [1, 2, 3]

const result1 = addArguments(1,2);    // 3

const leadingThirtysevenList = list.bind(null, 37);    // 创建一个函数,它拥有预设参数列表

const addThirtySeven = addArguments.bind(null, 37);    // 创建一个函数,他拥有预设的第一个参数

const list2 = leadingThirtysevenList();    // [37]

const list3 = leadingThirtysevenList();    // [37, 1, 2, 3]

const result2 = addThirtySeven(5);    // 37 + 5 = 42

const result3 = addThirtySeven(5, 10);    // 37 + 5 = 42,第二个参数被忽略


以上就是这三个方法的讲解,注意的是:call()方法的作用和apply()方法类似,只有一个区别就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,123评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,031评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,723评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,357评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,412评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,760评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,904评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,672评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,118评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,456评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,599评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,264评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,857评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,731评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,956评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,286评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,465评论 2 348

推荐阅读更多精彩内容

  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 13,763评论 0 38
  • 本文主要参考各个资料总结而来: 方法介绍 回顾一下 “this” 我们了解到,在面向对象的 JS 中,一切都是对象...
    茕茕微凉阅读 475评论 0 0
  • 参考《JavaScript设计模式与开发实践》 this 跟别的语言大相径庭的是,JavaScript的this总...
    16manman阅读 572评论 0 0
  • 感觉到自己突破武修三重,而达到武修四重天,洛寒不由得脸上一喜,自己终于突破四重了。 洛寒缓缓的舒了舒身子,顿时一阵...
    时於归阅读 450评论 0 2
  • 模块化开发时ARouter的配置GitHub:https://github.com/alibaba/ARouter...
    jxtx阅读 536评论 0 0