我就搞不明白为什么你们总是不能理解this?

好了,这篇文不告诉你怎么来算this到底指向谁,也不给你公式。

其实我想过,也写过如何理解this,以及如何确定this的指向,到头来发现,其实没那么多可说的,你说的越多,不懂得人越晕,因为解释的过程中肯定会有更多的知识点,但是人家之所以不理解,就是因为没有学到那么多东西。所以我的结论是,知道this指向谁,你就用,不知道this指向谁,就不要用。自己需要使用this的时候,搞清什么是apply,call,bind就可以了(其他类库提供的类似功能不提)……【1】

先说几个点,为什么要this这种东西?

记住了,this是用来访问数据的,不是用来访问方法的!

嗯,然后你说我扯淡,明明就可以用来访问方法,而且非静态方法还必须用this来访问(js里头没有这个概念,这里套了一下Java的概念,Java里头有静态方法,也可以用this来引用,不会报错,但是有些插件会提示你这个最好直接用类名进行访问,C#里头会直接在编译的时候给出警告,这个需要用类名来访问,不要用this。与之对应的,js中直接挂载在构造函数身上的方法,就相当于静态方法,构造函数也是一个对象,所以可以随意的挂载方法,这个还不懂得,请回炉重造,谢谢配合【2】)。

好了,我来稍稍解释一下为什么说this是用来访问数据而不是方法的。

在JavaScript中,我们一般在构造函数里头写属性的初始化,在原型上写方法,为什么?

因为这样所有的实例都可以共享同一个方法,而不是每个对象独享自己那一份方法。

为什么要这么做?

因为数据是会变的,方法是不会变的。

看过函数式编程的人都明白(没看过也没关系,我要说的跟函数式编程也没啥关系),函数式编程的时候会要求你写的每个方法都是【纯】的。什么意思?就是说在相同输入的情况下,输出绝对是不会发生变化的。这种叫这个函数是【纯】的。

好了,你看,我们的对象上的方法,其实应该也是纯的,只要将其中对this的引用改成传入参数(比如引用了this.a,改成在参数上传入一个a,其他的都不用变化)

所以呢,方法其实是可以共用同一份的,不需要每个对象独享一份,这是为什么不建议在构造函数里面写方法的原因

这也就是为什么我说this是用来访问数据的,因为只要this指向不一样就可以了,同一个类的不同实例,是可以引用同一份方法的

好了,以上就是我说this是怎么回事,但是对于理解代码似乎没什么帮助,真正要说的话,我也知道不少,浏览器的,服务器的,严格模式的,非严格模式的,函数当做普通函数来用的,函数当做构造函数来用的,动态指定的,所以我说你们不用纠结这个。

只要懂用 new 的方式来调用的时候,this指向新建的对象即可。

然后注意这个:我可以在调用的时候判断到是否是 new 的方式调用,如果不是,我自行以 new 的方式来调

function Apple(){

if(this === window || this === undefined){//兼容严格模式

return new Apple();

}

/*

-----其他代码

*/

}

var apple = Apple();//原来需要new,现在不需要了,这样用也没问题,当然不建议这么用

//还有一种是类似jQuery的用法,这个就不用纠结了,以后懂得多了,可以看看jQuery的源码,看看人家是怎么做的

然后关于【1】:

Function.prototype.call(thisObj[,arg1,arg2...])

Function.prototype.apply(thisObj[,argArr])

Function.prototype.bind(thisObj[,arg1,arg2,arg3...])

第一个和第二个 都是立即调用,区别在于参数,第一个thisObj后面跟的是参数列表,挨个排下去就好了,第二个给的是数组,当你不知道这个有多少个参数的时候用

第三个的参数跟第一个是一样的,区别在于bind并不会直接执行,而是返回一个函数,这个函数的this被绑定了指定的值

看个小栗子:

function demo (){

console.log(arguments,this);

}

demo.call({aa:'aa'},1,2,3);

demo.apply({aa:'aa'},[1,2,3]);

demo.bind({aa:'aa'},1,2,3)();

请自行执行,观察结果,并仔细体会其中区别。

//这个大概是我原来写的一个小shim片段,使IE低版本浏览器兼容bind,可能不是很全面,但是一般的应用也够了,写这个出来的主要目的是为了方便理解

Function.prototype.bind = function (){

var args = Array.prototype.slice.call(argumnets,1);

var thisObj = arguments[0];

return function (){

this.apply(thisObj,args.concat(Array.prototype.slice.call(arguments)));//这里有一个合并数组,作为新的arguments

}

}

关于【2】:

这里的意思是这样的:

function Demo (p1,p2){

this.prop1 = p1;

this.prop2 = p2;

}

Demo.f1 = function (a1){

console.log(a1);

}

var demo = new Demo(1,2);

demo.f1()//这句会报错

以上代码可以直接copy到chrome控制台执行

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

推荐阅读更多精彩内容