-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
1281 lines (879 loc) · 97.9 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[所以。]]></title>
<link href="http://CoffeeXu.github.io/atom.xml" rel="self"/>
<link href="http://CoffeeXu.github.io/"/>
<updated>2014-08-14T17:59:20+08:00</updated>
<id>http://CoffeeXu.github.io/</id>
<author>
<name><![CDATA[许嘘嘘]]></name>
</author>
<entry>
<title type="html"><![CDATA[不是每一个三分钟都会变成永远]]></title>
<link href="http://CoffeeXu.github.io/blog/2014/06/03/new-interest-take-photos"/>
<updated>2014-06-03T20:31:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2014/06/03/new-interest-take-photos</id>
<content type="html"><![CDATA[<p>这几个月过得很难，现在也是。只是我找到了新的兴趣，虽然它并不能无时不刻地提醒着我这个世界依旧是美好的，我把它po出来希望看到的人可以感受到世界的善意。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140603_1.JPG"></p>
<p>我现在听的歌单<a href="http://music.163.com/#/my/m/music/playlist?id=10513445">《言语从来没能将我的情意表达千万分之一》</a>。因为很久不曾再找到喜欢的歌单，将过去的喜欢反反覆覆不厌其烦。其实也想要听到好听的新歌，嘴上说着包容的心态去接纳新的事物，心里头还是觉得老歌有味道，然后越翻越老，以前不曾听懂的，现在觉得难过。比如《后来》比如李宗盛。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140603_2.JPG"></p>
<blockquote><p>我从未爱过这世界，它对我也一样。我只喜欢你，这是唯一让我觉得这个世界不那么糟糕的地方。——摘自<a href="http://book.douban.com/subject/25735731/">《我从未爱过这世界，我只喜欢你》</a></p></blockquote>
<p>我只喜欢你，这才是我觉得这个世界那么糟糕的地方。不知道真相的时候，我真的愿意祝福你们。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140603_3.JPG"></p>
<p>我享受和朋友一起欢度的时光，不同的朋友不同的聚会方式，每一种我都觉得比一个人要好太多了。但是散场了之后发现还是只有自己而已，像十五六岁那年半夜跑出家门，只有我一个人站在马路中间，我站立着幻想出我周遭的世界，代表月亮消灭我自己。有时候觉得自己不属于任何一个朋友圈，还好我还懂珍惜你们。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140603_4.JPG"></p>
<p>那年我说叫时间去筛选，过滤掉那些不好的；留下来的我好好珍惜。嘀嗒嘀嗒，原来这世界都是人渣。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140603_6.JPG"></p>
<p>想要成为一个厉害的人，这种念想有时候甚至超越了孤独感，有时候不会。<br>
若是后者，我睡得香甜，若是前者，无法入眠。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140603_5.JPG"></p>
<p>这么久了还是这样。临近毕业那会儿，我觉得自己未来的路好像一眼就可以看到头了；而今，经历过的坏的事情和经历着的坏的事情，让我也还是一眼看到了未来的路，白茫茫的什么都看不透。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140603_9.jpg"></p>
<p>上帝说，要有光。<br>
这张出自摄影师<a href="http://weibo.com/ycye">胖胖</a>，从这张开始，我学着去记录美。最主要的是我买了土豪金，渣像素拍啥都没有美感。别跟我提单反，穷人不能摄影了是吧。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140603_8.JPG"></p>
<p>我称之为云淡风轻。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140603_7.JPG"></p>
<p>忽略那些文字，风景还是很美吧<br>
以此结尾。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[等啊等等过了夏天]]></title>
<link href="http://CoffeeXu.github.io/blog/2014/03/01/bangkok-and-pattaya"/>
<updated>2014-03-01T12:13:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2014/03/01/bangkok-and-pattaya</id>
<content type="html"><![CDATA[<p>tags: <code>梦想清单</code> <code>旅行</code></p>
<br>
<p>本来不想写，文章底部都厚颜无耻地贴出了支付宝赞助，再不更新好像对不起自己。</p>
<p>杭州飘着大雪的时候，我去泰国过完了夏天。<br>
我从来没想过自己会去泰国，这样的念头是临近毕业的时候小能说毕业旅行去趟泰国。最后他没去，我一个人去了。一直也没有请过长假出去旅行，去了北京，去了泰国，3天5天，这些都不是真正的毕业旅行。拖欠的东西，过了那个时间，还了都是枉然。<br>
去之前泰国是人妖城，是芒果糯米饭，是芒果菠萝是海；回来之后，泰国是农村到城市打工的青年，没有城里人的精明，不油头滑脑不愚昧，有梦想但可能永远都无法实现，你会为他朴质的品德所吸引，你欣赏他的美，可他终究不是城里人。</p>
<p>飞机落在曼谷xx机场，一下飞机就扑来一阵热风，风里参杂着热带水果和香料的味道，但是亲爱的，不是那种清甜的芬芳，是浓郁的混杂的不亲和的味道，这股味道在接下来的几天的曼谷芭提雅之旅一直缠绕着我。<br>
曼谷看庙，逛周末夜市，湄公河。<br>
芭提雅的步行街，大海，飞翔。骑马骑大象看人妖，能忍？水上市场是哪天已经不记得了。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140301_1.jpg"><br>
第一家旅馆窗外拍到的风景，第一天的天气落落雨，放放晴。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140301_2.jpg"><br>
第二家旅馆楼下的游泳池。不会游泳好讨厌</p>
<p>第三家旅馆的特色是99%都是中国人。</p>
<p>整个旅途4个晚上，住过3家旅馆，一个人一个房间，房间很大床很大，有时候是两张床，睡一张滚一张；带了两套夏装，洗一套换一套；给小费一个人付两个人的份；吃东西，每样都想尝尝，一个人也吃了两个人的份；去夜市看别人带礼物给朋友，我竟然一下没想起来应该送给谁；走在热闹的步行街，咔嚓了一张外国的月亮，我问自己一个人旅行有什么意义呢？走得再远，去的地方再多，累的时候只能靠在被无数人靠过的背椅上。5天，没有网络和手机服务，唯一在乎的是钱包里的护照。</p>
<p>第一天在周末夜市，<strong>错过</strong>了手工手链，后来就没再看到过类似的，即使有可能也是made in china。<br>
第一天在周末夜市，看到一个街头行为艺术表演，听人家讨论说是“robot”，我还好奇得凑近去看。后来又路过一个黄种人往“robot”面前的帽子丢了XX铢铢的小费，“robot”动了起来，行了个致谢礼，我吓了一跳被同行嬉笑着拉走了，我才<strong>后悔</strong>没有丢小费很不礼貌。如果再给我一点时间，我想折回去给他小费。但是后来在红灯区步行街也看到过很多行为艺术的人，我都没有给，因为知道不是同一个。错过的大概弥补不来。</p>
<p>泰国<strong>吃</strong>到很多新鲜的以前没有尝试过的东西。水果泡在辣椒水里，或者蘸椒盐，味道还真是奇妙；有一种肠，肥墩墩的，口味居然是酸酸辣辣的，包着包心菜和生姜片吃味道很好，但是第一口真的觉得这肠子不会坏了吧；满大街的寿司和海鲜丸子；吃了鳄鱼肉喝了鳄鱼汤，跟鸡肉差不多；东阴功汤和绿咖喱都吃不惯；很多菜都放稀奇古怪的香料，不能忍；泰式奶茶，就是奶茶而已；芒果糯米饭就呵呵了，还是芒果好吃，太甜腻不喜欢；最后吃到的蛋包饭加一碗辣辣酸酸的虾仁汤，到现在我都很怀念，想吃的时候就去台海岸点酸辣虾；椰子我倒是没喝，因为我觉得椰树牌椰子汁是最好喝的椰子汁，别的都不能比。</p>
<p>泰国有很多<strong>寺庙</strong>，想看庙的清迈比较合适，很多庙；比较起来曼谷不算多，但是大皇宫和四面佛很有名。四面佛据说很灵验，谢霆锋妈咪结婚多年没怀上孩子来四面佛请愿，回去之后就有了谢霆锋。四面佛坐落在曼谷闹区的一个十字路口的转角，不起眼，以为是哪个酒店门口摆的塑像。</p>
<p>说起来泰国家庭一般有三四个女儿，最后才有一个儿子。男人少女人多的泰国，男人有些当和尚，有些做专业的人妖，有些做不专业的人妖，剩下娶妻生子的可以有好几个老婆；女人，大概就是被外国的男人骗，和跟人妖抢男人。</p>
<p>芭提雅的海很美，在海上飞的时候觉得自己超脱了。
<img src="http://CoffeeXu.github.io/images/blog/20140301_3.jpg"></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[JavaScript 的核心，闭包和作用域]]></title>
<link href="http://CoffeeXu.github.io/blog/2014/02/01/soyouthinkyouknowjavascrip"/>
<updated>2014-02-01T14:22:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2014/02/01/soyouthinkyouknowjavascrip</id>
<content type="html"><![CDATA[<p>tags: <code>闭包</code> <code>作用域</code></p>
<br>
<p>这篇文章源于<a href="http://e.weibo.com/jobbole?ref=http%3A%2F%2Fweibo.com%2F1581992285%2Fprofile%3Ftopnav%3D1%26wvr%3D5%231354965989570">@伯乐在线官方微博</a>一篇文章,<a href="http://blog.jobbole.com/30468/">测试：你自认为理解了JavaScript？</a>,原文链接这篇文章有给出.主要下面五段小代码.</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s2">"a"</span> <span class="k">in</span> <span class="nb">window</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nx">alert</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
</span><span class='line'> <span class="nx">b</span> <span class="o">=</span> <span class="kd">function</span> <span class="nx">a</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">x</span> <span class="o">&&</span> <span class="nx">a</span><span class="p">(</span><span class="o">--</span><span class="nx">x</span><span class="p">);</span>
</span><span class='line'> <span class="p">};</span>
</span><span class='line'><span class="nx">alert</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">a</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">a</span><span class="p">;</span>
</span><span class='line'><span class="nx">alert</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">b</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">,</span> <span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">arguments</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
</span><span class='line'> <span class="nx">alert</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nx">b</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">a</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nx">a</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<p>参考答案(在chrome下弹出的结果,别的木有测试过):</p>
<blockquote><p>undefined,</p>
<p>1,</p>
<p>function a(x) { return x * 2; },</p>
<p>10,</p>
<p>window</p></blockquote>
<h3>下面是我的理解,以及用于理解而参考的一些资料:</h3>
<h4>题目1</h4>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="p">(</span><span class="s2">"a"</span> <span class="k">in</span> <span class="nb">window</span><span class="p">))</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nx">alert</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<ol>
<li>变量申明先压入栈,即顶置变量申明.var a = 1;分为变量申明和变量赋值—var a; a = 1;执行的时候才进行赋值,所以”a” in window为true,没有对a赋值,所以弹出undefined,而非报错.</li>
<li>我多嘴说一句,if是不区分作用域的.JS中并不是{}区分变量作用范围,而是函数.</li>
</ol>
<h4>题目2</h4>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
</span><span class='line'> <span class="nx">b</span> <span class="o">=</span> <span class="kd">function</span> <span class="nx">a</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">x</span> <span class="o">&&</span> <span class="nx">a</span><span class="p">(</span><span class="o">--</span><span class="nx">x</span><span class="p">);</span>
</span><span class='line'> <span class="p">};</span>
</span><span class='line'><span class="nx">alert</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<p>我认为很简单,a(x)只是一个代号而已,不是变量,所以跟var a = 1一点关系没有,它可以是b(x),c(x).弹出的a始终为1.</p>
<p>如果把b改成a就不一样了.</p>
<h4>题目3</h4>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">a</span><span class="p">(</span><span class="nx">x</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="mi">2</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">a</span><span class="p">;</span>
</span><span class='line'><span class="nx">alert</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<p>函数申明,然后是变量申明.由于变量没有赋值,那a没有被覆盖.输出的是函数体.JS中变量是随时可以被改变,但这应该局限于执行的时候.</p>
<h4>题目4</h4>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">b</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">,</span> <span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">arguments</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
</span><span class='line'> <span class="nx">alert</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nx">b</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<p>arguments[2] = 10;就是改变a了,好像没有什么好解释了.</p>
<h4>题目5</h4>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">a</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nx">a</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>
<p>这个翻译过上一次的<a href="http://coffeexu.github.io/blog/2013/10/15/javascript-function-invocation-patterns">文章</a>,好像也很简单.this指向call函数第一个参数(这里为null).根据ECMAScript262规范规定：如果第一个参数传入的对象调用者是null或者undefined的话，call方法将把全局对象（也就是window）作为this的值.</p>
<p>此处再总结下this.</p>
<ol>
<li><p>对于obj.fun()此类方法函数调用,哪个<code>对象实例</code>(obj)调用this所在的函数(fun),this指向那个<code>对象实例</code></p></li>
<li><p>对于函数调用,this指向全局对象.(其实可以看做上一种,是window对象的方法函数,全局对象调用,则指向全局对象)</p></li>
<li><p>对于构造函数调用,若该函数返回一个简单类型（number, string, boolean, null or undefined），忽略return值，返回this（指向新的对象）;如果该函数返回一个object实例（简单类型以外的任何类型），那么将返回该对象。</p></li>
<li><p>apply和call调用,this指向apply和call第一参数.即手动设置this的值.</p></li>
</ol>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[IE inherited margin bug: form elements and hasLayout]]></title>
<link href="http://CoffeeXu.github.io/blog/2014/01/04/ie-inherited-margin-bug"/>
<updated>2014-01-04T13:15:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2014/01/04/ie-inherited-margin-bug</id>
<content type="html"><![CDATA[<p>tags: <code>IE</code> <code>表单</code> <code>兼容</code></p>
<br>
<p>总是要切换浏览器的“浏览器模式”和“文档模式”，来测试下IE浏览器是否显示正常，这两种模式的排列组合的情况总是搞不清相互有什么关系，先mark下——<br>
<code>浏览器模式</code>影响的是浏览器的版本及IE的条件注释，会影响服务器端对浏览器版本的判断,主要表现在展现，对CSS影响很大。<br>
<code>文档模式</code>影响的是IE的排版引擎，对DOM的渲染会产生影响。</p>
<p>hasLayout这个IE的特有属性已经很熟悉了，平常都是需要激发hasLayout来解决很多渲染的问题，这次遇到一个因为hasLayout=true造成的IE兼容性问题。<br>
问题代码演示：<a href="http://jsbin.com/oZeYOve/1/edit">http://jsbin.com/oZeYOve/1/edit</a> <br>
问题描述：input属性继承了父类的margin值，导致input左边的距离不受控制（事实上右边也会有问题）。也就是说input会继承父类水平方向的margin值，叠加到自身。IE7及以下浏览器会出现这个问题。</p>
<p>但是，出现该bug的前提是父类是一个被激活了hasLayout的元素。该例子中如果去掉div#search-box的width和height，问题可以被修复。或者将form元素包含到div#search-box元素内。但肯定要遇到“臣妾做不到啊”的情况。<br>
解决办法：<br>
1.CSS hack，给input设置margin负值，用来抵消继承下来的父类margin值。<br>
2.删除父类的margin值。<br>
3.取消父类的hasLayout属性。<br>
4.在input元素之前放文本元素，或者label元素，或者任何的行元素。<br>
5.用span元素把input包起来。</p>
<p>另外我其实遇到过另一个奇葩的问题，input的左边距坍塌。浏览器查看样式点来点去的时候，左边距生效，静止的时候，左边距又退回去了！因为项目中这个页面去掉了，也没办法重现，不知道是哪里的起了冲突。还是先mark</p>
<p>参考资料:[1]<a href="http://www.positioniseverything.net/explorer/inherited_margin.html">http://www.positioniseverything.net/explorer/inherited_margin.html</a></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[图片的map锚点]]></title>
<link href="http://CoffeeXu.github.io/blog/2014/01/04/images-map"/>
<updated>2014-01-04T13:12:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2014/01/04/images-map</id>
<content type="html"><![CDATA[<p>tags: <code>images</code> <code>map</code></p>
<br>
<p>闲来无事，回答了<a href="http://www.html-js.com/qa/254#answer-551">前端乱炖</a>的问题，关于给图片设置锚点，详细说是给自适应的图片设置锚点。因为图片是自适应的，那么area的 coords属性值还是固定的话，锚点就要错位了，所以自然就想到能不能设置百分比，可是 coords到底能不能设置百分比啊，好麻烦啊。翻资料查资料看英文看到吐血啊。</p>
<p>呐，dreamweaver设置map锚点太方便啦。讲起来第一次实习，做页面，还是在聚光科技，导师给了我一个流程图的页面，让我第二天给他，项目组的成员需要这个页面拿到外面去演示（这个是我后来才知道的）。流程图你们知道嘛，位置都是不规则的，按现在来做，基本就是绝对定位绝对定位绝对定位。<br>
我当时还刚实习，算是真正在做的第一个页面，本来IE下坑就多，我做了一个下午也没有弄好，一小块一小块切图，做了个大概。第二天导师问我怎么样了，我说快好了，他一看，才做了一半，而且位置都没有跟设计稿一样，有偏差。不是普通意义上的有偏差，是明显可以看出箭头和框架导航位置歪掉了。<br>
他说，这样，你这个不要了，重新做，把整个图片切下来，不要像这样一块一块切了，整个图片弄在页面上，头尾还是要的。图片热点你知道的嘛？就用这个把链接接上就好了。<br>
我愣了下，什么图片热点，我不会啊。学学要多久？我说，啊，是什么东西，好像不会诶。<br>
他说，你把图片切好，我教你，很简单。<br>
然后，他把我切好的整张内容区的图片拖到dreamweaver里，下面有个map，他用矩形框，在需要添加链接的图片位置画出了一个矩形，然后把链接地址写上，好了！<br>
他说，接下来还有这些这些这些，你就这样把链接添加到对应的位置。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20140104.jpg"></p>
<p>我摔！这么简单要做什么网页！<br>
然后5分钟弄好给他，他匆匆忙忙传给其他成员，然后他们去出差了。<br></p>
<p>好了好了，继续说coords到底能不能设置百分比。<br>
<a href="http://www.w3.org/TR/html4/struct/objects.html#h-13.6.1">w3c标准</a>这句话——Coordinates are relative to the top, left corner of the object. All values are lengths. All values are separated by commas. <br>
重点是中间那句话，所有的值都是lengths。<br>
HTML为元素指定了三种类型的长度值：Pixels，Length，MultiLength。简单来说，Pixels是指阿拉伯数值表示的是像素值，比如‘50’就是指’50px’;Length是指，阿拉伯数值可以是像素值，也可以是百分比。MultiLength可以是Length也可以是相对长度值。</p>
<p>既然可以是百分比，就要考虑百分比的基数是谁。100px的10%，和900px的10%相差不要太多哦。那事实上（什么事实？谁说的事实？只是我测了好几种情况的实验结果），这个百分比计算的数值相对的既不是map的大小，也不是area的大小，也不是img图片的大小。不管你们混乱成什么样，coords始终以100为基准（泪流满面的表情）。就好像直接忽略了百分号‘%’。现实和理想的差距吧。</p>
<p>浏览器和浏览器之间也有差异的，有些解释得好， 有些渲染得差。而且我测试的情况也有所局限，基本就用了矩形这种情况，圆和多边形有自己的特殊地方的话我也不知道。那就找出了这么个<a href="http://home.comcast.net/~urbanjost/IMG/resizeimg3.html">网址</a></p>
<p>整个就是这么个过程，看英文真的好痛苦，要不要学好英语的。而且搜出这么多东西有什么意义嘛？哼哼</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[嗨，近来可好？]]></title>
<link href="http://CoffeeXu.github.io/blog/2013/12/15/recent201312"/>
<updated>2013-12-15T22:04:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2013/12/15/recent201312</id>
<content type="html"><![CDATA[<p>tags: <code>近况</code></p>
<br>
<p><code>近况</code>这个词就像，“下次来玩啊”，“饭吃了没”，“我爱你”一样虚无。</p>
<p>不听周杰伦之后，知道乐坛还有很多好听的歌，很多很棒的艺人；可是说起来，还是最爱周杰伦。需要理由吗？</p>
<p>生活就是这么难，就跟这篇文章一样，没有什么主题，东拼西凑，零零散散，孤孤单单。只是我很想写点东西，不然很多时候都觉得自己是在自言自语。有时候觉得记忆中或美好或痛苦的事情从来就没有发生过，有时候觉得除了自己大概所有东西都是想象。有什么关系？就算真真假假有什么关系？有不喜欢的人喜欢有什么关系？喜欢的人不喜欢又有什么关系？本来就是喜欢忤逆，你都这样，又怎么不让别人忤逆？反正你顺从妥协以后，不见得生活这个婊子就顺了你的意。所以呢</p>
<p>现在下班我会说回家。所以没有男朋友或者依靠或者所谓的安全感，还是会有归属感的。<br>
小时候总是以为自己长大了会是很厉害的人，长大了才羡慕小时候的自己是这么乐观潇洒和自信，自信而无所畏惧，自信而不自知。</p>
<p>真的很忙，却还是睡觉很多。<br>
昨晚梦里一直嚎啕大哭，哭醒了睫毛上还有泪。现实里不敢流下来的眼泪全部在梦里面倾泄。<br>
绿萝又抽了新芽，我还是选择电话你如果死神给我机会最后拨打一通号码即使我知道你永远都不会接。<br>
每天下班都想早点回家的感觉真好。<br>
想过体验各种不同的职业，就是没办法想做公务员。<br>
我也想更新一篇博客，你知道地址嘛？<br>
会经常电话家里，然后总是被催好找男朋友了，拜托我还是中学生怎么能早恋！<br>
圣诞节一起过好嘛？<br>
<code>佳Y</code>，114路真的好狗啊半个小时一班有木有！<br>
我在路上<br></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[如果再重来，会不会稍显狼狈]]></title>
<link href="http://CoffeeXu.github.io/blog/2013/11/20/goodbye"/>
<updated>2013-11-20T21:38:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2013/11/20/goodbye</id>
<content type="html"><![CDATA[<p>数了数，花花跟我一起才一个月而已。<br>
猫的记忆力不是很好，而她现在也才四个月大而已，所以她以后漫长的岁月里大概都不会记得我，可是我可能记得她。</p>
<p>我很喜欢很喜欢猫，很想要拥有一只自己的猫，将它从小带到大，我们会有感情。我们相互依赖，却也相互独立。所以我想方设法领养了花花，纵使那么多人说她难看，我还是想给她一个新家，也是想要满足自己的私欲。<br>
它来之后我才发现不是这样的。可能是太小的缘故，它非常闹腾，对一切都充满了好奇；又不爱干净，总是往脏的地方去，也很少看它收拾自己。我看到它的时候，它永远都是在上窜下跳。<br>
它让我越来越烦躁。</p>
<p>我喜欢猫，是因为它安静干净，花花显然不满足任何一点。我总是想说，等它长大了就好了，就会像别的猫一样，优雅高贵，藐视众生，偶尔又智商低下，犯傻犯贱。可是它事儿逼的精神，显然比我等它长大变成我印象中的猫的耐心强悍得多。<br>
我本来以为我会有很多时间跟它一起享受阳光，消磨时间；养了花花之后，我发现自己还是喜欢往外跑。它没来的时候，我就没在房间度过几个周末。我以为我会为了它改变，事实上我还是每个周末都忙东忙西，然后我才发现，也许我根本没办法空下来照顾它，而且它还让我需要花费更多的时间来收拾。<br>
它成了我的累赘。</p>
<p>我还是喜欢猫，我看到猫的时候可能还会想起花花，但是我可能不会再养猫。<br>
它吐舌头的时候还是很萌，逗它玩的时候还是很傻冒，叫它花花它已经会转过头来看我，抱着它的时候会一直舔我，还有时候伸过来的爪子是温柔的，吃东西的时候很乖，喝水的时候很乖，大便每次还是拉对地方，小便我是不知道它占据了几个点。</p>
<p>我以后可能会养植物，会养别的不费劲的小动物，但我可能不会再养猫。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[周！杰！伦！]]></title>
<link href="http://CoffeeXu.github.io/blog/2013/11/17/jay-zhou"/>
<updated>2013-11-17T19:17:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2013/11/17/jay-zhou</id>
<content type="html"><![CDATA[<p>tags: <code>梦想清单</code></p>
<br>
<p>昨天杰伦演唱会。</p>
<p>跟<code>佳Y</code>会合之前，她们就已经在黄龙逛了一圈，一到就拿出两个杰伦的胸章叫我赶快带上。<br>「衣服戳破心疼不的？」<br>「不心疼不心疼，几块钱的衣服心疼毛线，哈哈」</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131117.jpg"></p>
<p>2点半拿到票之后，我们才安心去吃了今天的第一餐。炒辣鸡、泡菜饼、烤肉、墨鱼卷、牛肉石锅拌饭，安慰我们等了大半天饿坏的肚子。不过韩国料理没吃一半就觉得腻腻的，好在我们也比较饿，但吃到七分还是腻到受不了，说是要去鲜芋仙解腻，因为太远了，我们又赶着四点拍合照，只好作罢，买了点水果又返回了黄龙。</p>
<p>吃完回来，黄龙里面就在彩排了，我们的考试马上就要开始了！其实这个「马上」，估计也有三四个小时。但好像隐隐约约听到里面杰伦在唱，激动得上蹿下跳。天气已经有了晚上的些些凉意，我半个小时内换上大棉袄和大围巾，过了一会儿又带上了手套，小伙伴们投来了诧异的目光。</p>
<p>至于说合拍照的那伙人，已经不见了。其实也就是官网自行组织的粉丝合照，每个喜欢杰伦的人都有自己的故事，我不怎么关心别人的故事。我倒是有些惋惜芋圆，进场了还说要叫外卖。</p>
<p>这个时候，我们又加入了一位没有票的小伙伴，所以，我们逛的时候还要留意下黄牛。我们买了荧光棒、贴纸，天色已经黑了，心情也是越来越激动，疯疯癫癫的已经不在地球上了。黄牛票已经是接近检票进场的时候我们才去问。<br>其实也不用问，周边有很多人都会主动问要不要票只要我们会一句，他们就非常热情地开始商讨。我们就站在大门口，真假票检验处。就在我们商讨怎么办的时候，边上一位路人非常气愤又伤心又无助地电话她远方的朋友，说买到了假票。价值580，她是多少买的我们也不知道，只能默默为她难过。最后那位小伙伴还是进场了，400买了一张工作人员票。黄牛这一行真是狗得很，票价贴掉，进场才知道原来是180的票，跟杰伦就在两头，感受气氛来了？不过既然说是小伙伴，还是想办法把她领到了我们的场次。位置是没有，站在最后。</p>
<p>坐在场子里，我一点都没有意识到时间还早的很，我只知道也许杰伦就在舞台的后面，等着上来跟歌迷见面。发了朋友圈，别人一提醒才发现，妈蛋还有差不多2个小时！不过我们的小伙伴安顿好，也差不多7点了吧。
灯光暗下来了，不准时的杰伦终于要出现了。很好笑的是，灯光暗下来，大屏幕上还是在放着广告，广告啊，大家不可遏制地在尖叫，一有人尖叫，全场就跟中毒一样也尖叫。广告啊真的只是广告啊！好吧，我也跟着人群发神经，不要说人家。</p>
<p>全场粉色的荧光棒真的好美。杰伦玫红色的话筒真的好亮骚。</p>
<br>
<p>第一首慢歌《最后的战役》，那么美好动听的旋律像时光隧道里令人晕眩的彩色光环，我唱着唱着，眼泪流了出来。</p>
<p>我觉得自己流眼泪是因为我想起这首歌的MV，战争中遇难的好友和「我」依依惜别的情景。我想起在Y家看的这个MV，我们还在她家喝红酒喝到脸热热的头晕晕的，不知道是不是夏天午后恼人的太阳晒的。那种感觉后来我总是在闷热的夏天感觉到，红晕和热量从脸颊蔓延到耳朵根，头脑也是热热的，说话和心跳总是很快，总是伴随着羊癫风般的手舞足蹈以及让我心动的男孩子在周围。不知道从哪个夏天起就没有了。我当时暗暗责怪自己的酒量怎么能这么弱呢，后来才知道那瓶红酒大约是有40来度。到后来我也知道，我的酒量真的也是不怎么好，它跟着青春期一样慢慢淡出了。</p>
<p>我越想眼泪流得越凶，我觉得自己的声音已经有点哽咽，便从回忆中抽回到现场。我觉得不行，我一定要打电话给另一半，告诉他此刻的我是多么多么多么地兴奋。我一下感觉更加难过了，因为我没有另一半。我想了想还是抽了张湿巾，擦了擦从十几年前流出的眼泪。此时此刻，我还是满足的。</p>
<p>我想，追随着杰伦的那个我，还是13年前的我，是从来不曾老去的我，是哭是哭笑是笑的我，是「勇敢的少年」的我；而你，是盗版卡带里的周杰伦，是正版卡带里的周杰伦，是cd里的周杰伦，是mp3里的周杰伦，是很少听的文件夹里的周杰伦，是电影里的周杰伦，是偶尔出现在康熙的周杰伦，是眼前说着「谢谢你」的周杰伦，是我的时光机的周杰伦。</p>
<p>「想象我们在西湖，在同一条游船上」</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[外婆]]></title>
<link href="http://CoffeeXu.github.io/blog/2013/11/12/grandmother"/>
<updated>2013-11-12T20:03:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2013/11/12/grandmother</id>
<content type="html"><![CDATA[<p>星期天去邵逸夫看外婆，住院第二天。<br>第二次来邵逸夫，上一次也是外婆住院，家里人一起来探望。这次我一个人，门口买了点水果，冒着点零星的小雨，走进来发现也许跟几年前住的是同一幢楼。上一次是夏天，记得整幢楼都开了空调，当时觉得好高级，真是一家有钱的医院整幢楼打空调；而现在楼层看起来已经有些老旧了，俗话说「物是人非」，而今房子都老了，人呢？</p>
<p>外婆住走廊第一间，进门第一张床，隔壁躺着三个老头儿。外婆穿着病号服，立着一条腿，另一条受伤的腿就平放着，窝在白色的被子的，床头缠着监控器的各种线，食指上夹着一盏灯，感受她老迈的心跳脉搏，闪闪得把指数打在屏幕上。我时不时瞄两眼，看起来还是正常的。<br>我妈接过我买的橙子，放到柜子里，里面还有一床棉被。完了她坐在一旁的椅子上，椅子可以展开，是一张床，晚上我妈就睡上面，一晚上只要2块钱。护士会来统计病房里多少家属需要。<br>进门外婆就招呼我坐，埋怨我不要买东西，人来就好了。招呼我吃上一波亲人探望留下的枣子。叫我妈赶快去洗给我吃。</p>
<p>我小学六年级，我那个敦厚老实的外公就去世了。后来外婆遇到了现在的外公，也是老伴走了，两个人相互凑个伴，过下半辈子，这么一来也十多年了。外公是文化人，每个月离休工资差不多是我工资的两倍，上医院也不花钱，家里的药箱也从来都是满的。两个人老了，病痛什么的也渐渐地多了，三天两头住院。外婆的脚骨折过，所以越是老，反反复复疼痛复发地越是频繁。大半个月前刚抢救回来；这次又是半夜拨了邵逸夫的急救电话，救护车从杭州开到千岛湖接她。在钱方面，她自豪骄傲没给儿女增加负担，但是毕竟是老了，还是需要人照顾。外婆膝下三个女儿，一个儿子；我舅最小，这5年是从来没见过他，大姨大概我这个年纪就意外走了，小姨在南京跟着姨夫在工地上忙活，连亲戚的亲戚喝喜酒也是叫我哥代替去的。但她也不是那么没良心，上一次外婆非常严重，也还是立马赶回来。我妈最大，在农村里干活，算是自由的，所以照顾外婆的事情每每都是落到她身上。<br>我觉得外婆年轻的时候，看起来也是颇有泼妇的霸气。但我还没有看到过她跟人吵架，她说话一直就像是在教训人。不是尖酸刻薄，而是非常强势绝决果断，我妈就斯文随和得多，是读书人的感觉，但她们都不是慈祥的母亲，而且她们都是独立的拥有自我的，她们并不依赖男人，她们总是尽最大的努力做好自己的事情。</p>
<p>自从毕业以后，每次见到外婆，都叮嘱我好赶紧找男朋友了。她的标准是「老实，不滑头，工作要好」，她说疼人要疼在心里，表面上还是要严肃管教。<br>她大概周一周二做手术，三天后就可以回家了。送的任务应该会交给我老爸。外公在千岛湖也是住院着，中秋回去看他，觉得憔悴了很多。两个人都快八九十岁了吧，希望少受一些病痛的折磨，多一些平淡的日子，有了没了的心愿都可以实现。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[我本来想说一个故事]]></title>
<link href="http://CoffeeXu.github.io/blog/2013/11/06/its-a-story"/>
<updated>2013-11-06T20:55:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2013/11/06/its-a-story</id>
<content type="html"><![CDATA[<p>000</p>
<p>我会保持更新，每周一篇。不让博客断掉。</p>
<p>而且，到目前为止，博客已经上好了所有的链接，它是一个完整的存在。</p>
<p>不过，即使它是完整的，也只是一部分的真相。</p>
<p>我前前后后用过网易博客，新浪博客，网易loft，到现在这个。每一次我都认为自己会坚持用下去，最后，它们都变成数据库里一串没有意义的代码。</p>
<br>
<p>001</p>
<p>还有十天，就要去梦寐以求的杰伦演唱会了。</p>
<p>今天起就要开始温习杰伦所有的歌曲，时间好像要重新轮回一次。</p>
<p>如果可以，请把我带回小时候。</p>
<p>说起来，我从来没有想过我可以去到他的演唱会。已经说不好这是一种回忆，还是一种终结。我每次想到，都觉得我大概会在演唱会上热泪眼眶。</p>
<p>本来演唱会那个周末，应该要回家看中医复查的。我就跟老妈说回不去了，我跟同学约了出去玩，我没有跟她说是演唱会。我觉得她肯定会觉得我乱花钱。她又开始碎碎念，说家里造房子正是用钱的时候，我还跑来跑去玩。说我不懂事。可惜我现在又没有花家里的钱了，我是自由的，所以我是不会被约束的，我想去哪里我自己花钱去，我想要什么东西我自己花钱买。乱花钱还是什么，这种都由我自己定义的，因为都是我自己的钱。走的时候我还是留了500。我还是尽量每次回来都会留下一些，造房子的钱我是给不起。</p>
<p>其实很多事情我都瞒着家里，上次去北京，我也是说和同学一起去的。他们不知道我其实一个人跑出去。我觉得自己已经可以为自己负责任了。我只是不想有太多麻烦，我想做什么我自己都清楚。我觉得意外和死亡，都是注定好的。逃不掉，躲不了。</p>
<br>
<p>002</p>
<p>回杭州的路上，前面坐着一对小夫妻，带着一个婴儿。一路上婴儿都在哭闹，影响了一车乘客。小夫妻也是觉得很不好意思，男的就一直满足着婴儿各种需求，希望他满足了之后就不会吵闹。女的没有办法，但还是抱怨说「这么宠溺不好，什么都让着他」。男的说「那不然能怎么办」。女的开始抱怨说「本来小孩要睡觉的，你家里哄哄哄那么吵，到车站了又哄哄哄那么吵，搞的小孩睡不着。」到最后，小夫妻也要吵了起来。</p>
<p>边上一对小情侣，大概也是小孩吵到睡不着，吃着橘子也要把坐车气发泄给对方。</p>
<p>到杭州坐193，车上有一群辩论赛刚结束的大学生，在叽叽喳喳讨论刚才辩论赛上彼此的表现。然后一个美女就忍不住骂道“吵得我头都痛死了！什么辩论赛，我看是卖菜比赛，啾啾啾啾，烦不烦”。不知道那群人是没听到，还是无所顾忌，依然热烈地讨论，美女骂了两三次，辩论赛依然如火如荼地展开着。</p>
<p>我们总是要压抑自己的不舒服，才能不给别人带去不舒服。要知道每个人有自有意识的成年人，都是有这样的觉悟。
但是好像总会在亲密的人面前，失去这种自制力。</p>
<br>
<p>003</p>
<p>我的闹钟总是在4:48分响起，我都按掉继续睡，甚至醒来都不知道我按掉过闹钟。</p>
<br>
<p>004</p>
<p>自由的代价是孤独。</p>
<p>我对自由的概念，是天空很高很蓝，可以有云，视野非常开阔，远处的山青翠地也仿佛在眼前，有种近视眼得救的错觉。我大概小学就近视眼了，从此我与清晰的世界就永远有着隔阂。后来我知道，世界干净还是污浊，跟眼镜片真没多大关系。</p>
<p>大学毕业的时候，我看到了自由。我忍不住又爆了粗口“我艹，老子读了十几年的书终于特么的解脱了。老子特么终于可以不用再读书了！老子特么终于可以想做什么就做什么了！”</p>
<p>分手的时候，我安慰自己说，我自由了。至少再也不用操心另外一个人，考虑另外一人的感受。我可以想去哪里去哪里，想做什么做什么，没有人管。</p>
<p>去上海的时候，我觉得自己是自由的；去北京的时候，我是自由的。</p>
<p>我跟前男友说，“我喜欢自由，我希望自己以后都是自由的”，他回了什么我已经忘记了。</p>
<p>自由，其实都是相对的。</p>
<p>我太明白想要得到什么一定要付出。所以我总是把功课搞定，把成绩搞定，爸妈才不会啰里八嗦，去阻止我青春期所有动荡的的欲望。但我并不是那种任性的熊孩子，我的犟脾气体现在奇怪的时候。比如因为觉得老妈的碎碎念很烦，就离家出走。大晚上的在大街上过了一夜。代价是裸露的脚踝都是蚊子包。犟脾气上来的时候，我才知道自己平常没有办法坚持下去的劲头，都在赌气的时候用完了。</p>
<p>看看我们，用自由换取课堂上汲取的知识，后来我们识字会认方向会坐车，我们可以自由地出走；用自由一天工作8，9小时每周工作5天换一点工资，后来我们才有钱去自由地消费。</p>
<p>总是要压抑自己，去做很多自己不喜欢的事情，来换得我们真正想要的相对的自由。</p>
<br>
<p>005</p>
<p>起因是在朋友圈看到LU酱的婚纱照，想起很多小时候的事情。我特么不写点东西，估计以后午睡都睡不着了！午睡睡着的时间大概只有五分钟，或者是一首歌的时间，醒来都满足地跟穿越了一个世纪一样。可是睡着之前的胡思乱想有时候就霸占了这仅有的五分钟。</p>
<p>LU酱的婚纱看得我真是想哭，没想到已经到了要嫁人的年纪了。明明有些照片看到的还是小学认识她的时候的样子，却是穿着婚纱。</p>
<p>每次回千岛湖，我都害怕看到十几岁的我和十几岁的小伙伴在路边玩耍。</p>
<p>过去发生的每件事情，就算是忘记了，它在人身上引起的改变都不会消失，为什么还要奢求更多？</p>
<br>
<p>006</p>
<p>每个人都在努力地向前走。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[讲一讲CSS的position/float/display]]></title>
<link href="http://CoffeeXu.github.io/blog/2013/10/30/css-position-float-display"/>
<updated>2013-10-30T21:51:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2013/10/30/css-position-float-display</id>
<content type="html"><![CDATA[<p>tags: <code>CSS</code> <code>position</code> <code>float</code> <code>display</code></p>
<br>
<h3>position</h3>
<ol>
<li><p>position属性取值：static(默认)、relative、absolute、fixed、inherit。</p></li>
<li><p>postision：static；始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让top，right，bottom，left的值失效。在切换的时候可以尝试这个方法。</p></li>
<li>除了static值，在其他三个值的设置下，z-index才会起作用。（确切地说z-index只在定位元素上有效）</li>
<li>position：relative和absolute都可以用于定位，区别在于前者的div还属于正常的文档流，后者已经是脱离了正常文档流，不占据空间位置，不会将父类撑开。定位原点relative是相对于它在正常流中的默认位置偏移，它原本占据的空间任然保留；absolute相对于第一个position属性值不为static的父类。所以设置了position：absolute，其父类的该属性值要注意，而且overflow：hidden也不能乱设置，因为不属于正常文档流，不会占据父类的高度，也就不会有滚动条。</li>
<li>fixed旧版本IE不支持，却是很有用，定位原点相对于浏览器窗口，而且不能变。常用于header，footer，或者一些固定的悬浮div，随滚动条滚动又稳定又流畅，比JS好多了。fixed可以有很多创造性的布局和作用，兼容性是问题。</li>
<li>position：inherit。规定从父类继承position属性的值，所以这个属性也是有继承性的。</li>
</ol>
<h3>float</h3>
<ol>
<li>float属性取值：none(默认)、left、right、inherit。</li>
<li>float：left(或right)，向左（或右）浮动，直到它的边缘碰到包含框或另一个浮动框为止。且脱离普通的文档流，会被正常文档流内的块框忽略。不占据空间，无法将父类元素撑开。</li>
<li>任何元素都可以浮动，浮动元素会生成一个块级框，不论它本身是何种元素。因此，没有必要为浮动元素设置display：block。</li>
<li>如果浮动非替换元素，则要指定一个明确的width，否则它们会尽可能的窄。（什么叫替换元素？根据元素本身的特点定义的， (X)HTML中的img、input、textarea、select、object都是替换元素，这些元素都没有实际的内容。 (X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。）</li>
</ol>
<h4>清浮</h4>
<ol>
<li>最直接的clear属性，该属性表示的是框的哪边不应该挨着浮动框。这个属性是对元素本身而言，通过自动为该元素增加上外边距实现的（css1和css2），或者在上外边距之上增加清除空间，而外边距本身不改变的方式（css2.1）。clear的缺陷是可能要添加额外无意义的标签。</li>
<li>通过父类的浮动也可以清理子类浮动，将空间撑开。这有点像负负得正。但原理应该是浮动的元素也是按照文档流的方式布局，只不过它们是另外一个独立的文档流，不同于普通文档流，暂时叫它浮动文档流？</li>
<li>hasLayout和BFC都可以清理浮动。overflow：hidden；zoom:1；hasLayout跟BFC不同之处，前者被限制为一个矩形，可以设置宽高，但BFC不一定可以设置宽高（比如行内元素）。</li>
</ol>
<h3>display</h3>
<ol>
<li>display属性取值：none、inline、inline-block、block、table相关属性值、inherit以及list-item, run-in等</li>
<li>display属性规定元素应该生成的框的类型。文档内任何元素都是框，块框或行内框。</li>
<li>display：none和visiability：hidden都可以隐藏div，区别有点像absolute和relative，前者不占据文档的空间，后者还是占据文档的位置。</li>
<li>display：inline和block，又叫行内元素和块级元素。表现出来的区别就是block独占一行，在浏览器中通常垂直布局，可以用margin来控制块级元素之间的间距（存在margin合并的问题，就是@ 寒冬winter 磨叽的margin collapse么- –||，插一句， 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。）；而inline以水平方式布局，垂直方向的margin和padding都是无效的，大小跟内容一样，且无法设置宽高。inline就像塑料袋，内容怎么样，就长得怎么样；block就像盒子，有固定的宽和高。</li>
<li>inline-block就介于两者之间。inline-block行内块元素。内容被格式化为块元素，而元素本身是一个行内元素。可以设置宽高，又默认不换行特性。IE表现出来的效果不一样，所以需要激发hasLayout，所以就产生了这么一串代码{display:inline-block;<em>display:inline; </em>zoom:1;}。但是不一定要这么累赘，因为还有其他值也可以激发hasLayout，比如height/width。inline-block跟float可以达到同样的布局效果。效果哪个好不好说，前者不会打破文档正常的定位机制，后者就脱离了正常的文档流。完全看具体布局情况选择。另外，激发hasLayout之后的并且设置display：inline的元素，跟普通文字一样按水平方向排列，受vertical-align的影响，并且可以按照容器大小自适应调整。</li>
<li>table相关的属性值可以用来垂直居中，效果一般。</li>
</ol>
<h3>定位机制</h3>
<ol>
<li>上面三个属性都属于CSS定位属性。CSS三种基本的定位机制：普通流、浮动、绝对定位。</li>
</ol>
<h4>随便扯一些居中布局：</h4>
<ul>
<li>宽高固定可以利用负margin。</li>
</ul>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>.center{top：50%;margin-top:-height/2;left:50%;margin-left:-width/2;}</span></code></pre></td></tr></table></div></figure>
<ul>
<li><p>宽高不固定的元素。.center{display：inline-block},父类设置{text-align:center}</p></li>
<li><p>垂直居中table-cell不说了</p></li>
<li><p>{line-height：height;vertical-align:middle;}</p></li>
<li><p>{position:absolute;top:0;bottom:0;margin:auto}别忘记给父类定位{position:relative;}</p></li>
</ul>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[去做，才有困难可言]]></title>
<link href="http://CoffeeXu.github.io/blog/2013/10/27/just-do-it"/>
<updated>2013-10-27T15:39:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2013/10/27/just-do-it</id>
<content type="html"><![CDATA[<p>tags: <code>梦想清单</code></p>
<br>
<p>花了十个月，才完成了原来在连客上写下的清单(其实Evernote里还有好多个清单)</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131027.jpg"></p>
<p>好像也不知道做完了有什么意义，也很难感受当时写下这些想要去做的心情。就好像我一直不能理解小时候说长大要当作家的心情是一样一样的。</p>
<h4>买一台MAC</h4>
<p>现在的笔记本是五月底买的，给自己当作六一儿童节的礼物。以前的联想就被丢在家里积灰尘，很多大学时期的东西就跟过气的笔记本一样被闲置。说来也奇怪，明明有时候好像是那么念旧的一个人，很多有用没用的东西总是舍不得丢掉，很多过去的人和事总是有一岔没一岔的想起，但是又会在应该柔软的时候，gin得跟什么一样。像从来没有回访过母校，我也就在每次路过严分的时候，会呵呵下；或者看到工大校庆的各种转发，打个已阅的标签。</p>
<p>其实现在也很少开电脑了，下了班也很少再有心情去码代码。苹果系统感觉还没有用得很顺，所以也没有体会到效率的提高。好吧，压根就没有在码代码，提高毛线啊。</p>
<h4>养一只叫”萌萌”的猫</h4>
<p>从别人那里领养来一只小母喵，两三个月大的家猫，黑不溜秋的，被好多人嫌弃，小能一直强调“丑哭了！”，但是我还是觉得挺不错的呀，小喵都挺萌的，不过名字没有叫萌萌，花花小八土豆，都是别人取的，反正现在叫什么她都是不会应和的，一直沉浸在自己的世界里发神经！真的是特别神经。不知道是不是小时候都这样皮，到长大了就好点了吧懒懒的了。我不是很有耐心的人，老是烦我我就会教训她，她就会有点害怕我，但晚上还是会在我门口喵喵地叫，求我放她进来睡觉。可是我多无情的人啊，不管她。小时候还是要教好，不能养成恶习。白天还是开着门让她跑来跑去发神经。教了两次已经会上厕所，表扬一下。</p>
<p>我还是希望可以把她养得胖胖的，周末可以坐在我腿上晒太阳，看我上网矫情。</p>
<p>养猫还是一件麻烦的事情，因为对她做什么她都是不会领情的。我是独立的，她也是独立的。我对她抚摸她根本就没有在享受，我表扬她大概她也感受不到吧。我在想我养她长大，我们彼此会有感情吗？</p>
<h4>去北京，旅行</h4>
<p>呵呵。<a href="http://CoffeeXu.github.io/blog/2013/10/23/travel-to-beijing">带着痘痘来北京看人头</a></p>
<p>所以所有这些，都被我当作体验，感受过就好了吧，没什么不同的。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[带着痘痘来北京看人头]]></title>
<link href="http://CoffeeXu.github.io/blog/2013/10/23/travel-to-beijing"/>
<updated>2013-10-23T20:32:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2013/10/23/travel-to-beijing</id>
<content type="html"><![CDATA[<p>tags: <code>梦想清单</code> <code>旅行</code></p>
<br>
<p>本来十一要去稻城，房间太贵，便宜的都定完了，穷人一枚住不起就算了，想说安心回家看中医治疗痘痘去。</p>
<p>但是内心始终不甘心啊，这么长的假期宅在家里不出去玩，以后都没有机会了。而且毕业旅行也是一直都欠着。</p>
<p>but！30号的时候，看到3号飞天津的打折机票只要390不到点，北京情节就来了，说赶紧的看看房间，能订到房就去北京。</p>
<p>好巧不巧的看到豆瓣上一家所谓的北京民宿，随口问了下居然有房间。直接就头脑发热定下了，不能退房，后来一直担心房间会不会不安全，搞的来北京就一直怕怕的。最后定了7号晚上返程的高铁。</p>
<p>在自己的房间浑浑噩噩混过了1号2号，2号晚上老早就洗头洗澡睡觉，第二天四五点爬起来赶飞机。第一次坐飞机，激动死了，还好巧不巧的在窗边，可以看看云层以上的天空啦。最后发现，这趟北京之旅唯一的收获就是坐飞机，这是后话。</p>
<p>腾云驾雾的感觉，好开森！我说那是《楚门的世界》里的边际嘛，有一扇门，可以通往真相。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131023_0.jpg"></p>
<p>那边就是海了。那个小岛可能是台湾。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131023_1.jpg"></p>
<p>到了天津，转城际动车去北京。临时买票，到北京在西单附近，我观望了下，人的确是有点多，随便走了走我就去订好的民宿。</p>
<p>安顿好之后，第一个晚上我就就近逛逛，也没想说去哪里玩。</p>
<p>其实这次来北京已经是我出来玩，安排最充分的一次了，来往的车程和住宿都安排好了。虽然没有细具到每一天去哪些景点，我也不想要细具到这种细枝末节。我写了下大概想要去的地方，至于到底个什么安排，就全部随机了。导致我最后大概就去了总和的1/3，一来是因为一到北京就重感冒了身体不适，二来是累。好吧，还是因为身体不适。</p>
<p>第二天(4号)去了中关村，北京大学，颐和园。</p>
<p>第三天(5号)去了天安门，故宫，王府井，前门大街。</p>
<p>第四天(6号)去了798，跟MC见面吃饭，匆匆赶车去了。</p>
<p>颐和园的鸭子，为了看它，还做坑爹的船，所谓的游湖。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131023_2.jpg"></p>
<p>到处卖的北京老酸奶。好像没什么特别的味道。反正我鼻塞喝不出来。咦，我好像把瓶子买回来了，也不知道带回来没有。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131023_3.jpg"></p>
<p>他们说抹茶味超级浓郁的甜筒。我还是没有吃出什么味道，QAQ</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131023_4.jpg"></p>
<p>没有人喜欢一个人孤孤单单的，我也不希望自己真的孤独终老。但是还是要做好一个人的准备。我去北京就好多人问我说，“不会吧，你一个人去啊！”我也不希望，永远都是一个人，去旅行。</p>
<p>虽然，一个人旅行没什么不好呀。</p>
<p>大不了，就是上厕所的时候，没人看包。必须要大包小包拎厕所里。</p>
<p>大不了，就是麦当劳吃饭忘了拿吸管，又没有人看着位置，只能掀盖子随便喝。</p>
<p>大不了，就是进一家饭店，点一个菜只能一个人吃。服务员还同情地看着一桌只有一个顾客的女屌丝</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131023_5.jpg"></p>
<p>关于吃，我吃最多的还是小区门口的小摊贩，羊杂碎羊肉串粉丝砂锅炒粉干煎饼之类的，感冒好像胃口也不好。</p>
<p>去故宫租的讲解器，被它绕晕了，我好蠢。单身狗就是这样的。</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131023_6.jpg"></p>
<p>798里的为艺术北漂的人们真是为他们感到心酸啊，可是他们有梦想。呵呵</p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131023_7.jpg"></p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131023_8.jpg"></p>
<p><img src="http://CoffeeXu.github.io/images/blog/20131023_9.jpg"></p>
<p>没有爬长城，没有看升旗。其实我对自己说，只要我到了北京，我就是了了心愿。我感受到了北京的毒气，就够了。我就是看一看，看一看就够了啊。</p>
<p>有些事情，去做，就已经是成功了呢，不管最后体验到了什么。</p>
<p>困难一定会是有的，但是去做了，才知道困难是什么，想象出来的都不靠谱的。</p>
<p>在北京，遇到好人，也遇到不好的人，没有遇到坏人，已经是很幸运的事情了啊。</p>
<br>
<p>本来定的是7号晚上的高铁，好在刚到北京第一天我觉得说北京没什么好玩的，加之所谓的民宿还是不怎么踏实，叫大娘帮忙看看提早回杭州，结果就好巧不巧杭州7号台风，半个城都瘫痪了，我还好早一天回，7号在房间窝了一天，管人家涨大水撑船的。但6号那天的机票也是担心了我很久，怕受台风影响，在半路停不下来了。也的确，航班延误了大概半个小时，快到杭州的时候，还像开在贫困山区的道路上一样颠簸了5分钟。</p>
<br>
<br>
<p>最后不管怎么说，去做就好了，不要考虑说有什么意义。我想去，已经是最大的理由了吧。</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[外边距合并的其中一种]]></title>
<link href="http://CoffeeXu.github.io/blog/2013/10/21/collapsing-margins"/>
<updated>2013-10-21T20:31:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2013/10/21/collapsing-margins</id>
<content type="html"><![CDATA[<p>tags: <code>外边距合并</code> <code>collapsing margins</code></p>
<br>
<p>群里的一位同学遇到的问题：<a href="http://jsbin.com/OdEyoh/3/edit">JSBin</a></p>
<p>原本是一个居中的问题，为什么position修改为<code>relative</code>就不能居中了呢？</p>
<p>因为这里莫名其妙地满足了外边距合并的情况：</p>
<ul>
<li><p>普通文档流的块级元素；</p></li>
<li><p>且一个元素包含在另一个元素中，没有<code>内边距</code>或<code>边框</code>把外边距分隔开。所以它们的上和/或下外边距发生了合并。所以麻烦都转移到父元素a上了。</p></li>
</ul>
<p>解决办法：</p>
<ul>
<li>使其中一个元素，变为<code>非</code>普通文档流中的块级元素，例如变为浮动元素(float)｜脱离文档流(position)｜内联元素(inline-block);</li>
<li>设置padding和border分开两个元素的外边距。(父元素上设置。子元素设置，还是没有把两个的margin分开好嘛)</li>
<li>父元素添加<code>overflow:hidden;</code></li>
</ul>
<p>一定要拜读的资料<a href="http://www.w3school.com.cn/css/css_margin_collapsing.asp">w3school-CSS 外边距合并</a></p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[爱整理的都是好姑凉]]></title>
<link href="http://CoffeeXu.github.io/blog/2013/10/15/handbook"/>
<updated>2013-10-15T20:20:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2013/10/15/handbook</id>
<content type="html"><![CDATA[<p>tags: <code>手册</code></p>
<br>
<h3>开始装b</h3>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>rake new_post["title"]
</span><span class='line'>rake generate
</span><span class='line'>rake deploy
</span><span class='line'>
</span><span class='line'>git add .
</span><span class='line'>git commit -m "Some comment here."
</span><span class='line'>git push origin source</span></code></pre></td></tr></table></div></figure>
<h3>先睹为快</h3>
<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>rake preview
</span><span class='line'># ctrl + c 退出预览</span></code></pre></td></tr></table></div></figure>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[JavaScript: 函数调用模式]]></title>
<link href="http://CoffeeXu.github.io/blog/2013/10/15/javascript-function-invocation-patterns"/>
<updated>2013-10-15T19:38:00+08:00</updated>
<id>http://CoffeeXu.github.io/blog/2013/10/15/javascript-function-invocation-patterns</id>
<content type="html"><![CDATA[<p>tags: <code>JavaScript</code> <code>this</code> <code>翻译</code></p>
<br>
<p>JavaScript被描述为一个面向函数语言（有别于面向对象的语言）。因为函数在JavaScript中不仅仅是独立的逻辑执行单元，函数是一等公民，它也提供作用域，且能创建对象。如此依赖函数有好有坏：好的是它使的语言轻且快速（也是该语言发展的初衷），坏的是如果你不知道你在做什么，你很容易把自己绕进去。</p>
<p>JavaScript函数一个需要关心的问题是，不同的调用模式可以产生截然不同的结果。这篇文章介绍了四种模式，如何使用它们，要注意些什么。四种调用模式如下：</p>
<p>1、方法调用（Method Invocation）</p>
<p>2、函数调用（Function Invocation）</p>
<p>3、构造函数调用（Constructor Invocation）</p>
<p>4、apply和call调用（Apply And Call Invocation）</p>
<h2>函数执行</h2>
<p>Javascript（像现今所有语言）函数有逻辑模块化的功能，它可以在执行的任何时候被调用。调用函数时，暂停执行当前函数，传递控制和参数给被调用的函数。此外，this参数也被传递给函数。调用操作符是一对圆括号（） ，它可以包含0个或多个以逗号分隔的表达式。</p>
<p>不幸的是，有多种模式可用来调用函数。这些模式并不是nice-to-know：绝对有必要了解它们。因为不同模式调用函数可以产生截然不同的结果。我认为这是JavaScript在语言设计上的错误，如果设计语言时多些思考（少些匆忙），也不会产生这么大的问题。</p>
<h2>四种调用模式</h2>
<p>虽然只有一个调用操作符（），但有四种调用模式。每种模式在初始化this参数时有所不同。</p>
<h3>方法调用</h3>
<p>对象中的函数，称为方法。方法调用是调用对象中的函数的模式。例如：</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">value</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
</span><span class='line'> <span class="nx">increment</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="o">+=</span><span class="mi">1</span><span class="p">;</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">obj</span><span class="p">.</span><span class="nx">increment</span><span class="p">();</span> <span class="c1">//Method invocation</span>
</span></code></pre></td></tr></table></div></figure>
<p>若函数前面有对象实例object，则称为方法调用。JavaScript将this参数指向调用方法的对象。如上例，this指向obj。Javascript在执行时绑定this（也被称为晚绑定）。</p>
<h3>函数调用</h3>
<p>使用（）调用函数，称为函数调用：</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">add</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">);</span> <span class="c1">//5</span>
</span></code></pre></td></tr></table></div></figure>
<p>使用函数调用模式，this指向全局对象。这是JavaScript语言中的错误！盲目绑定this到全局对象会破坏当前上下文。尤其是在方法函数内使用<code>内部函数</code>。下面这个例子做了很好地解释：</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="mi">500</span><span class="p">;</span> <span class="c1">//Global variable</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">value</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
</span><span class='line'> <span class="nx">increment</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="o">++</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="kd">var</span> <span class="nx">innerFunction</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>
</span><span class='line'> <span class="nx">innerFunction</span><span class="p">();</span> <span class="c1">//Function invocation pattern</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nx">obj</span><span class="p">.</span><span class="nx">increment</span><span class="p">();</span> <span class="c1">//Method invocation pattern</span>
</span></code></pre></td></tr></table></div></figure>
<p>你认为屏幕上显示什么？答案是1的，不好意思你错了（但不要太为难自己，这是JavaScript没有处理好）。真正的答案是500。注意，innerFunction使用函数调用模式，因此this被设置为全局对象。结果就是innerFunction（再次强调，它是函数调用模式）没有指向当前对象的this参数。相反，它（this）被设置到全局对象，其value值被定义为500。我要强调，这是很糟糕的语言设计；增量函数采用方法调用模式来调用，很自然地认为在内部使用它时，this应该总是指向当前函数。</p>
<p>有一个简单的方法来避开这个问题，但在我看来是一种hack。在函数内部定义一个变量（按照惯例，命名为that），将this赋值给这个变量。（题外话：这种方式可行使因为JavaScript中的函数是闭包）：</p>
<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="mi">500</span><span class="p">;</span> <span class="c1">//Global variable</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">value</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
</span><span class='line'> <span class="nx">increment</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
</span><span class='line'> <span class="nx">that</span><span class="p">.</span><span class="nx">value</span><span class="o">++</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'> <span class="kd">var</span> <span class="nx">innerFunction</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'> <span class="nx">alert</span><span class="p">(</span><span class="nx">that</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
</span><span class='line'> <span class="p">}</span>
</span><span class='line'>