简单快速理解js中的this、call和apply

注:本文案例环境为非严格模式,严格模式下禁止关键字this指向全局对象

一、方法是怎么执行的?

首先说一下js中方法的执行,在window全局下声明一个方法a:

function a () {
  console.log(this);
}
a();//window

全局中执行这个方法普遍的方法是直接a(),这个方法的执行环境是window,控制台会打印出window对象。

那么为什么会打印出window对象呢?我们可以这样理解,方法的执行必须要有个直接调用者,刚才那个方法a是定义在window全局下的,window下的变量和方法有个特点就是访问和调用的时候可以省略window!所以刚才执行a() === window.a(),也就是说,执行a方法时的直接调用者是window。!

上面有提到直接调用者,怎么看待这个直接调用者呢?举个例子,声明一个全局对象obj:

var name = "window-name";
var obj = {
    name:"obj-name",
    a:function(){
        console.log(this.name);
    },
    b:{
        name:"b-name",
        a:function(){
            console.log(this.name);
        }
    }
}
obj.a();//obj-name
obj.b.a();//b-name

分别执行obj.a();和obj.b.a();控制台会分别打印出obj-name和b-name(这里obj.a() === window.obj.a(),obj.b.a() === window.obj.b.a()),方法执行时的直接调用者就是离这个被调用方法最近的那个对象,两个分别是obj和obj.b,打印出的name分别是obj的name和obj.b的name。

二、this指向了谁?

那么函数里面的this到底是谁呢?this就是这个方法被调用时的直接调用者。可以再来个特殊的例子,理解这个例子了就能很好理解this指向了谁。在刚才的基础上定义一个全局变量:

var ax = obj.b.a;
ax();//window-name

此时执行ax();控制台则会打印出window-name;为什么会打印出window-name?这是因为 ax 是定义在window全局下的变量,执行ax()时的直接调用者是window(ax() === window.ax()),所以执行ax()时内部的this就是它的直接调用者window,因此打印出的值就是定义在window下的name的值,所以本文最开始时的a(),执行后会打印window,因为内部的this指向的是a的调用者window。

实际上在非严格模式下,如果方法有直接调用者,那么this指向的是这个直接调用者,在没有直接调用者(比如回调函数)的情况下this指向的是全局对象(浏览器中是window,node中是global)。

三、call和apply改变了什么?

理解了函数的直接调用者this,再说call和apply就比较容易理解了。
在此对call和apply不做过多的定义性解释,先来看下调用了call后谁是那个被执行的方法,直接代码示例:

function fn1 () {
    console.log(1);
};
function fn2 () {
    console.log(2);
};
fn1.call(fn2);//1

执行fn1.call(fn2);控制台会打印1,这里可以说明fn1调用call后被执行的方法还是fn1。一定要弄清楚谁是这个被执行的方法,就是调用call的函数,而fn2现在的身份是替代window作为fn1的直接调用者,这是理解call和apply的关键,也可以运行下fn2.call(fn1);//2来验证被执行的方法是谁。那么call的作用是什么呢?
再来个代码示例:

var obj1 = {
    num : 20,
    fn : function(n){
        console.log(this.num+n);
    }
};
var obj2 = {
    num : 15,
    fn : function(n){
        console.log(this.num-n);
    }
};
obj1.fn.call(obj2,10);//25

执行obj1.fn.call(obj2,10);控制台会打印25,call在此的作用其实很简单,就是在执行obj1.fn的时候把这个fn的直接调用者由obj1变为obj2,obj1.fn(n)内部的this经过call的作用指向了obj2,所以this.num就是obj2.num,10作为执行obj1.fn时传入的参数,obj2.num是15,因此打印出的值是15+10=25。

所以我们可以这样理解:call的作用是改变了那个被执行的方法(也就是调用call的那个方法)的直接调用者!而这个被执行的方法内部的this也会重新指向那个新的调用者,就是call方法所接收的第一个obj参数。还有两个特殊情况就是当这个obj参数为null或者undefined的时候,this会指向window。

四、call和apply的区别

call方法除了第一个obj参数外,还接受一串参数作为被执行的方法的参数,apply用法和call类似,只不过除第一个obj参数外,接收的第二个参数是一个数组来作为被执行的方法的参数。

五、延伸拓展

我们来执行下面的代码:

fn1.call.call(fn2);//2

执行fn1.call.call(fn2);控制台会打印出2,先不说为什么会打印出2,先来理解下fn1.call.call是什么,call()方法是Function对象原型链上的方法,所以fn1这个函数可以通过原型链继承使用这个方法,也就是说fn1.call === Function.prototype.call === Function.call。所以fn1.call.call(fn2) === Function.call.call(fn2),可以把Function.call先看做一个整体,用FunCall来表示如下:

FunCall.call(fn2);

这样就比较好理解,就是fn2作为FunCall的直接调用者来执行FunCall,相当于fn2作为直接调用者执行了FunCall(),而FunCall === Function.call,所以就相当于是fn2.call()。

此时call没有传入对象,那么全局对象window就会作为默认对象,也就是相当于fn2.call(window),再继续解释就是window.fn2.call(window),把fn2的直接调用对象由window改变成window,相当于没有改变fn2的直接调用对象,所以就相当于直接执行了fn2();控制台会打印出2。

此外还有Function.call.apply和Function.apply.call等多种组合,原理都类似,只不过接收的参数类型不太一样,可以尝试一下。加深对call和apply的理解。

六、补充bind

bind用法和call类似,只不过调用bind后方法不能立即执行需要再次调用,其实就是柯里化的一个语法糖。我们来实现一个简易版的bind方法,命名为bindFn,大致就能了解bind了:

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

推荐阅读更多精彩内容