浅谈this,new,call,apply

0.关于this是指什么

  • 其实可以这么概括,this属于调用被调用的方法的主体,也就是,谁调用,谁就是this。
  • 虽然说起来这么简单,但是上面的话里面的概念其实涉及到:作为方法的调用(function)的this;作为构造函数里的this;作为call或者apply的this。
  • 以上三个概念,又涉及到js里的对象创建,和方法的继承,所以,要弄清楚this,就要弄清楚js里的对象创建和继承机制。

1.作为方法调用(function)的this

这个是最为简单的,但也可以分为几种情况,我们写一个文件,叫functionThis.js
1.1 有如下代码:

function fnThis(){
    console.log(this);
}
fnThis();

打印结果如下:

1-1

可以看到this当前是指向window,这个很好理解,因为this是指向调用者,而fnThis没有调用者,没有调用者就默认为window。

1.2 我们在文件继续添加代码,如下

var obj = {
    fnThis: function(){
        console.log(this);
    }
}
obj.fnThis();
var objIns = obj.fnThis;
objIns();

打印结果如下:

1-2

可以看到,第1行的打印this是obj,第2行是window,会这样的差异是因为:obj.fnThis()的调用者是obj,所以this指向obj;而objIns()没有调用者,默认为window。

2.作为构造函数里的this

这里我们的demo文件为constructorThis.js

2.1 说到这里又要提一下构造函数,构造函数,就是可以构造一个对象的函数类,js里面最简单的莫过于直接定义一个对象,这个对象有一些属性的方法,然后用的时候直接拿来用,像我们functionThis.js这个文件里的就是这种情况,这是直接定义,另外还有一些其他的方式就先不展开讲了,下面的例子以比较常见的构造函数的形式为例,至于为什么要用构造函数,简单地讲就是可以用面向对象的形式去编程,可继承,等。

2.2 测试代码如下:

var thisObj;
var ConstructorThis = function(params){
    this.myParams = params;
    console.log(this);
    thisObj = this;
}
ConstructorThis.prototype.sayParams = function(){
    console.log(this.myParams);
}
var obj = new ConstructorThis('hi');
console.log(obj);
console.log(obj === thisObj)
obj.sayParams();

打印结果如下:

2-2

我们可以看到第1行和第2行打印的对象从字面上看是一样的(字面一样不等于两个对象是同一个东西,后续可以自行初始化几个对象进行类似的对比验证),我们为了验证这个this是否就是obj,把this赋值给外部的thisObj并进行比较,结果是true,说明构造函数内的this确实就是new 构造函数() 后的对象。

2.3 如此一来,因为构造函数需要用new关键字实例化一个对象,那么和1-2作为方法的调用的情况相比,this似乎就不是指向被调用者了?

实际上:

var obj = new ConstructorThis('hi');

等价于:

var obj = {};
obj.__proto__ = ConstructorThis.prototype;
ConstructorThis.call(obj, 'hi');

将第一个代码块改为下面三行的代码块,我们再看一下打印结果:

2-3

与2-2的情况是一致的。

也就是说,new 构造函数() 干了这么一件事情,第一步,创建一个空的对象;第二步,把空对象的原型指向构造函数的原型;第三步,再根据call传入参数('hi'),同时把构造函数内部的this指向这个空对象,这样一来就完成了构造函数原型链的继承(第二步)和自身属性的赋值(第三步);最后返回新创建的对象。

构造函数内部this等于新创建的对象,关键就在第三步,用了call方法把创建的对象指向了内部的this,call和apply方法会在接下来讲。总之,构造函数内部的this指向用new创建的新对象。

3.作为call或者apply的this

这里我们仍然创建一个demo文件callThis.js

3.1 call或者apply的作用就是改变某个方法的运行环境,也就是改变内部this关键字的指向,正因为有这样的作用,也在js的继承机制中其中有着显著的作用。正如2-3我们讲到的一样,构造函数用call把创建的一个类指向了内部的this关键字,因此构造函数类可以作为一个类被继承,每个不同的实例通过内部的this被赋予了不同的属性。

3.2 call和apply的用法其实很简单,我们看如下代码:

var CallThis = function(params){
    console.log(this)
    this.myParams = params;
}
CallThis.call();
var obj = {otherParams: 'ok'};
CallThis.call(obj, 'hi');
console.log(obj);

打印结果如下:

3-2

第一次call没传任何参数,内部的this打印出来是window,这在第一部分的时候已经说明了;第二次call的时候第一个参数是一个对象,第二个参数对应构造函数的一个参数,可以看到this指向了obj,然后obj被添加了myParams属性,因此 构造函数.call(obj, args)这种形式就是通过call方法把this指向obj,args是传入构造函数内部的参数,需要传多个参数是这样子的 构造函数.call(obj, args, args1, ..., argsN),第一个参数就是把this指向的对象,这和我们在2-3说到的,new的步骤分解,第三步是一致的。

apply和call的用法类似,构造函数.call(obj, args, args1, ..., argsN) 等同于 构造函数.call(obj, [args, args1, ..., argsN]),我们修改一下代码,将

CallThis.call(obj, 'hi');

替换为

CallThis.apply(obj, ['hi']);

可见,打印结果一致:

3-2-1

即,call和apply都能把上下文运行到具体的this环境里,不同的只是传参的形式,call参数的传递是分开传递,而apply是作为数组传递。

4.总结

到这里就基本把this涉及到的情况说完了,包括作为方法的调用(function)的this;作为构造函数里的this;作为call或者apply的this;第二和第三种情况本质上是统一的。

这算是第一次写比较完整的文章,大部分是自己的理解,当然前期学习阶段也参考了一些资料,若有不当之处,还请指正,若有宝贵意见,也可以多多交流。

具体的实例代码和demo地址:

https://github.com/CHristopherkeith/front-end-summary-this-new

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

推荐阅读更多精彩内容