《你不知道的javascript(中)》this和对象模型(一)

在翻阅《你不知道的javascript》这一套书的中上卷目录之后,发现书中针对闭包、对象、原型、语法、异步、回调等等既基础又重要的
javascript知识有着针对性的阐述,于是决定对这套书的中上卷进行学习。上卷和中卷各讲述了两大部分知识,分别是:作用域与闭包、
this和对象原型、类型和语法、异步和性能。本文是对this和对象原型的学习总结。

this,同样是js语法中一个超级bug的词汇,我表示每次看代码的时候,一看到this就头大,因为老是搞不准它绑定的对象会是谁。在《你不知道的javascript(上)》一书中,对this的绑定分了四种情况,并且进行了优先级划分,同样是对每种情形使用案例来讲解,如果只是知道this绑定的规则,还是挺容易的,困难的是能够实际应用到代码中。

对于this的绑定机制,关键点是找到调用包含this语法函数的调用位置,然后根据调用位置来确定this绑定的对象。先上结论:

  • this一共有4中绑定方式:默认绑定,隐式绑定,显式绑定,new绑定。其中绑定优先级是:new绑定>显式绑定>隐式绑定>默认绑定。也就是说上面情况存在并列或以上时,按照优先级来确定this绑定的规则;
  • 默认绑定:在独立函数调用的情况下(也就是调用语句没有上下文对象),使用默认绑定规则,及this绑定全局作用域。需要注意的是,严格模式下并不存在默认绑定(this会绑定到undefind),“严格模式下”指的是包含this语句的函数体使用严格模式,如果是调用位置的作用域使用的严格模式,则不影响默认绑定。
  • 隐式绑定:当包含this的函数倍调用的语句中存在上下文对象时,this绑定其上下文对象,注意只绑定上一层,例如obj1.obj2.foo(),假设foo()中含有this语句,this绑定的是obj2,而不是obj1。
  • 显示绑定:使用call()以及apply()两个语句来调用包含this的函数时,this被绑定到两个语句中指定的对象之上。(此处需要知道两个语句的用法
  • new绑定:使用new来调用包含this的函数作为对象,来初始化另一个对象时,this被绑定到这个初始化的对象上面。

以上,其实仔细研究确实很容易明白的,但是具体起来,就会衍生出很多例外和实际应用了,例如显式绑定中的硬绑定。

1.默认绑定

  最简单的一种情况,时刻注意函数体中是否使用了严格模式。此外,请看以下代码:

function foo(){
  console.log(this.a);
}
var a = 2;
(function(){
foo();//2
})(); 

尽管调用位置在另一个函数体内,但是没有上下文对象,this绑定的还是全局对象。

2.隐式绑定

  也是一种很简单的情形,不过,会存在一种this丢失的情况。究其原因,主要是因为对函数的赋值,传递的实际是其引用位置,最终参数的指向都是堆中的同一个位置(js中对内存划分两个区域,堆和栈。堆用于存放引用类型的值,既对象等;栈用于存放基本类型的值,以及对引用类型值的引用指针

  如下代码:

function foo(){
  console.log(this.a);
}
var obj = {
  a:2;
  foo:foo
}
var bar = obj.foo;//此处的传参是将foo的引用位置直接传给了bar;
var a = "oops,global";
bar();//"oops,global"

因为直接传递了引用位置,所以bar()调用foo()就和obj不存在关系了,则此时直接判断bar(),属于默认绑定。

3.显式绑定

  显式绑定的规则已在上面叙述,注意显式绑定中存在的一种硬绑定情况(一般的显示绑定1依旧会出现this丢失,所以出现硬绑定概念,既不会出现this丢失),如下代码:

function foo(){
  console.log(this.a);
}
var obj = {
  a:2
};
var bar = function(){
  foo.call(obj);
}
bar();//2
setTimeout(bar,100);//2
bar.call(window);//2

无论如何调用bar,this绑定的都是obj。硬绑定的引用就是可以创建一个重复利用的辅助函数,ES5中内置的方法bind()原理就是如此。在一些笔试题中会出现使用原生js模拟bind()的题,建议可以记一下如下代码:

  
function foo(something){
console.log(this.a,something);
return this.a + something;
}
function bind(fn,obj){
return function(){
return fn.apply(obj,arguments);
}
}
var obj = {
a:2
}
var bar = bind(foo,obj);
var b = bar(3);//2 3
console.log(b);//5

注意这段代码和上段代码的区别,区别正是使用bind()的意义。其区别是将foo和obj作为参数传给bind(),那么任何一个包含有this的函数作为参数传递给bind(),其this都会绑定到另一个参数obj来执行(在这种情况下,绑定对象和包含this函数两者就都可以变化了)。这就是bind()的意义。这段代码和ES5内置的bind()还存在差别,内置bind()的实际写法是foo.bind(obj)。

4.new绑定

  首先需要清楚new的使用意义,使用new来调用函数,会自动执行下面操作:

  • 创建(或者构造)一个全新对象;
  • 这个新对象会被执行[[Prototype]]连接;
  • 新对象会绑定到函数调用的this;
  • 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。

如上,已经清楚解释了this会绑定到谁。

搞清楚this绑定的四种规则,以及优先级,应该说对一般的函数使用及判定已经够用了,此外还需要注意ES6中的箭头函数,不适用于以上四种规则,
其绑定是根据外层作用域来决定this,且绑定无法被修改。在书中还提到了柯里化、软绑定等一些概念,如有兴趣,可以自行查书进行学习。

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

推荐阅读更多精彩内容