学习HTML的7个秘诀，网友：原来是这样...

何学习HTML语言。

初学者有一个常见的错误就是犹豫于判断哪种编程语言是做好的、最该先学的。我们有很多的选择，但你不能说那种语言“最好”。

我们应该理解：说到底，什么语言并不重要。重要的是理解数据结构、控制逻辑和设计模式。任何一种语言—甚至一种简单的脚本语言—都会具有所有编程语言都共有的各种特征，也就是说各种语言是贯通的。

我编程使用Pascal，汇编，和C语言，事实上我从来没有把它当成职业以求获得回报。我一直在自学编程，工作上用不到它，我使用现有的知识，参考各种文档和书本，学习它们的用法。

因此，不要急于选择何种编程语言。找出你想要开发的东西，使用一种能够完成这项任务的语言，这就可以了。

这里以html为例说一下：

html的意义就在于放置内容，无论是文本还是图片，它们都属于内容。
按照规定，所有的内容都必须放在容器里，否则无法享受五折优惠…对不起走错片场了。而容器就是html的标签，语法结构是：
<容器名>各种文本内容</容器名>

容器名当然是英文字母的，并且有许多种。它们的规则很简单：
1.一般成对出现，一个表开始一个表结束
2.结束的那个前面需要加一条斜线
3.容器名放在尖角符号内
另外，容器之间可以嵌套，也就是说容器里面可以再放容器。

到这里为止，你已经可以开始写html了，随便百度一下html有哪些标签，然后跟着套用即可。

但如果还是有点懵，可以按如下顺序做一遍：
1.找一个尽可能简单的html源码页面看一遍，把每个标签干嘛的闹清楚
2.假装有一篇word文档要转成html，亲手写一遍写一个html页面
3.没了，html入门真的就那么简单……

桌面脚本

想要动手在Windows里或苹果系统里编程，最简单的方法是从一种脚本语言或宏语言开始，例如AutoHotkey(Windows) 或Automator(苹果系统)。如今一些硬件程序员冲着他们的屏幕大喊大叫，说AHK和AppleScript并不是“真正”的编程语言。也许他们说的是对的—技术上，这些种类的语言只能做一些上层的编程。但是对于那些只是想来脱盲、想在他们的电脑里实现一些能自动运行的程序的新手来说，这些语言会是一个绝妙的入门入口—而且你会吃惊于它们丰富的功能。

Web开发

HTML 和 CSS：开发网站，你第一件要知道的事情就是HTML(网页就是由它组成的)和CSS(一种让外观更好看的样式标记)。 HTML 和 CSS 并不是编程语言—它们只是页面的结构和样式信息。然而，在开始开发web应用程序之前你必须要学会如何手工的编写简单的HTML和CSS，web页面是任何webapp的前端显示部分。这个HTML 指导是你入手的好地方。

JavaScript:当你可以通过HTML和CSS构建一个静态页面后，事情就开始变得有趣了—因为到了该学JavaScript的时候了。 JavaScript是一种web浏览器上的编程语言，它的魔力就是能在页面里制造一些动态效果。

JavaScript可以做bookmarklets,Greasemonkey脚本, 和Ajax, 所以它是web上各种好东西的关于因素。学习JavaScript从这里开。

服务器端脚本：

一旦你学会了网页里的知识，你就要开始对它添加一些动态服务器操作—为了实现这些，你需要把目光转移到服务器端脚本语言，例如PHP, Python, Perl, 或 Ruby。

举个例子，如果想要制作一个网页形式的联系方式表单，根据用户的输入发送邮件，你就需要使用服务器端脚本来实现。像PHP这样的脚本语言可以让你跟web服务器上的数据库进行沟通，所以如果你想搭建一个用户可以登录注册的网站，这样的语言正是你需要的。

Web框架：

过去数年里，web开发人员在开发动态网站的过程中不得不一遍又一遍的针对重复遇到的问题写出重复的代码。为了避免这种每次开发一些新网站都会重复劳动一次的问题，一些程序员动手搭建了一些框架，让框架替我们完成重复性的工作。

非常流行的Ruby on Rails框架，作为一个例子，它利用Ruby编程语言，为我们提供了一个专门面向web的架构，普通的web应用程序都能使用它来完成。事实上，Adam使用Rails开发了他的第一个正式的(而且是叹为观止的!)web应用程序，MixTape.me。这就是他的如何在没有任何经验的情况下搭建一个网站。还有一些其他的web开发框架包括CakePHP(针对 PHP 编程者),Django(针对 Python 编程中), 以及jQuery(针对 JavaScript).

Web APIs:

API (应用层序编程接口)是指不同的软件之间相互交换的程序途径。例如，如果你想在你的网站上放一个动态的地图，你可以使用Google Map，而不需要开发自己的地图。The Google Maps API可以轻松的让你通过JavaScript在程序中引入一个地图到你的页面上。几乎所有的现代的你所知道的和喜爱的web服务都提供了API，通过这些API你可以获取到他们的数据和小工具，在你的应用程序里就可以使用这些交互过来的东西了，例如Twitter, Facebook, Google Docs, Google Maps, 这个列表远不止这些。

通过API把其他web应用集成到你的web应用里是现在富web开发的前沿地带。每个优秀的主流的web服务API都附带有完整的文档和一些快速入手的指导(例如，这个就是Twitter的)。疯狂吧。

命令行脚本

如果你想开发一个程序，让它读取文字或文件、输入输出一些有用的东西，那么，命令行脚本语言将是个不错的选择。然而它并不像web应用程序和桌面应用程序那样有吸引力和好看的外观，但是作为快速开发的脚本语言，你却不能忽视它们。

很多的在linux平台上运行的web脚本同样能以命令行模式运行，例如Perl，Python和PHP，所以如果你学会了使用它们，你将能在两种环境中使用它们。我的学习道路一直没离开Perl太远，我自学Python使用的是这本优秀的在线免费书Dive into Python。

如果成为一个Unix高手也是你学习的目标，那么你绝对要精通bash这个脚本语言。 Bash是Unix和Linux环境下的一种命令行脚本语言，它能够为你做所以的事情：从自动备份数据库脚本到功能齐全的用户交互程序。起初我没有任何使用bash脚本的经验，但最终我用bash开发了一个全功能的个人代办任务管理器：Todo.txt CLI。

插件(Add-ons)

如今的web应用程序和浏览器都可以通过一些扩展软件来丰富自己的功能。由于一些现有的软件，例如Firefox、WordPress越来越受到开发人员的关注，插件的开发也日益流行，人们都在说“But if only it could do THIS…”

只要你掌握了HTML，JavaScript和CSS，你就可以在任何的浏览器里开发你想要的很多东西。 Bookmarklets,Greasemonkeyuser scripts, 和Stylishuser styles这些软件都是用的更普通页面一样的语言写成的, 这几个东西都值得你去研究一些。

更高级的浏览器扩展程序，例如Firefox的扩展，它们可以帮助你很多。开发Firefox的扩展.

举个例子，需要你精通JavaScript和XML(一种标记语言，类似HTML，但具有更严格的格式)。早在2007年我就写下来how to build a Firefox extension, 这是我在笨手笨脚的研究网上的一些学习资料后获得的成果。

很多免费的、受欢迎的web应用程序都提供了扩展框架，例如WordPress 和 MediaWiki。这些应用程序都是用PHP写成的，所以只有对PHP熟悉你才能做这些事情。这个就是如何编写WordPress插件。而想驾驭Google Wave前沿技术的开发人员可以从使用HTML, JavaScript, Java, 和 Python 写小组件和小工具开始。我写的第一个Wave bot是跟着这个一个下午时间的快速入门指导开始的。

开发桌面上的Web应用程序

学习编程最好的结果是你在一个环境下学的东西可以应用到另外的环境中。先学习开发web应用程序的好处就是我们有一些方法可以让web应用程序直接在桌面上运行。例如，Adobe AIR是一个跨平台的即时运行平台，它能让你编写的程序运行在任何装有AIR的操作系统的桌面上。

AIR应用程序都是由HTML, Flash, 或 Flex 写成的，所以它能让你的web程序在桌面环境中运行。 AIR是开发部署桌面应用程序的一个优秀的选择，就像我们提到过的10个让你值得去安装AIR的应用程序。

- 移动应用开发

能在iPhone或者Android智能手机上运行的手机应用程序的开发如今正呈现井喷之势，所以你也可以梦想一下如何在iTunes应用商店里通过你的天才程序大赚一笔。但是，作为一个编码新手，直接奔向移动开发所经历的学习曲线可能会很陡，因为它需要你熟悉高级的编程语言，例如Java和Objective C。

然而，你当然应该看看iPhone 和 Android 编程究竟是什么样子的。阅读这个简单的iPhone应用开发例子可以初步认识一下iPhone程序的开发过程。 Android 程序都是由Java写成的，这有一个简单的视频教程教你如何开发第一个”Hello Android“程序

耐心，刻苦，尝试，失败

作为一个好的程序员，都有一个不达目的誓不罢休的品质，他们会惊喜于通过长期推敲和失败换来的一点成绩。学会编程会有很好的回报的，但是学习的过程可能会是饱受挫折和孤独的。如果有可能，最好找个伴一起陪你做这件事。想精通编程，这和其他事情一样，需要坚持，反复尝试，获得更多的经验。

his是JavaScript中的一个关键字，但是又一个相对比较特别的关键字，不像function、var、for、if这些关键字一样，可以很清楚的搞清楚它到底是如何使用的。
this会在执行上下文中绑定一个对象，但是是根据什么条件绑定的呢？在不同的执行条件下会绑定不同的对象，这也是让人捉摸不定的地方。
这一次，我们一起来彻底搞定this到底是如何绑定的吧！

一. 理解this

1.1. 为什么使用this

在常见的编程语言中，几乎都有this这个关键字（Objective-C中使用的是self），但是JavaScript中的this和常见的面向对象语言中的this不太一样：

常见面向对象的编程语言中，比如Java、C++、Swift、Dart等等一系列语言中，this通常只会出现在类的方法中。
也就是你需要有一个类，类中的方法（特别是实例方法）中，this代表的是当前调用对象。
但是JavaScript中的this更加灵活，无论是它出现的位置还是它代表的含义。

使用this有什么意义呢？下面的代码中，我们通过对象字面量创建出来一个对象，当我们调用对象的方法时，希望将对象的名称一起进行打印。

如果没有this，那么我们的代码会是下面的写法：

在方法中，为了能够获取到name名称，必须通过obj的引用（变量名称）来获取。
但是这样做有一个很大的弊端：如果我将obj的名称换成了info，那么所有的方法中的obj都需要换成info。

var obj={
  name: "why",
  running: function() {
    console.log(obj.name + " running");
  },
  eating: function() {
    console.log(obj.name + " eating");
  },
  studying: function() {
    console.log(obj.name + " studying");
  }
}

事实上，上面的代码，在实际开发中，我们都会使用this来进行优化：

当我们通过obj去调用running、eating、studying这些方法时，this就是指向的obj对象

var obj={
  name: "why",
  running: function() {
    console.log(this.name + " running");
  },
  eating: function() {
    console.log(this.name + " eating");
  },
  studying: function() {
    console.log(this.name + " studying");
  }
}

所以我们会发现，在某些函数或者方法的编写中，this可以让我们更加便捷的方式来引用对象，在进行一些API设计时，代码更加的简洁和易于复用。

当然，上面只是应用this的一个场景而已，开发中使用到this的场景到处都是，这也是为什么它不容易理解的原因。

1.2. this指向什么

我们先说一个最简单的，this在全局作用域下指向什么？

这个问题非常容易回答，在浏览器中测试就是指向window
所以，在全局作用域下，我们可以认为this就是指向的window

console.log(this); // window

var name="why";
console.log(this.name); // why
console.log(window.name); // why

但是，开发中很少直接在全局作用域下去使用this，通常都是在函数中使用。

所有的函数在被调用时，都会创建一个执行上下文：

这个上下文中记录着函数的调用栈、函数的调用方式、传入的参数信息等；
this也是其中的一个属性；

我们先来看一个让人困惑的问题：

定义一个函数，我们采用三种不同的方式对它进行调用，它产生了三种不同的结果

// 定义一个函数
function foo() {
  console.log(this);
}

// 1.调用方式一: 直接调用
foo(); // window

// 2.调用方式二: 将foo放到一个对象中,再调用
var obj={
  name: "why",
  foo: foo
}
obj.foo() // obj对象

// 3.调用方式三: 通过call/apply调用
foo.call("abc"); // String {"abc"}对象

上面的案例可以给我们什么样的启示呢？

1.函数在调用时，JavaScript会默认给this绑定一个值；
2.this的绑定和定义的位置（编写的位置）没有关系；
3.this的绑定和调用方式以及调用的位置有关系；
4.this是在运行时被绑定的；

那么this到底是怎么样的绑定规则呢？一起来学习一下吧

二. this绑定规则

我们现在已经知道this无非就是在函数调用时被绑定的一个对象，我们就需要知道它在不同的场景下的绑定规则即可。

2.1. 默认绑定

什么情况下使用默认绑定呢？独立函数调用。

独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；

案例一：普通函数调用

该函数直接被调用，并没有进行任何的对象关联；
这种独立的函数调用会使用默认绑定，通常默认绑定时，函数中的this指向全局对象（window）；

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

foo();

案例二：函数调用链（一个函数调用另外一个函数）

所有的函数调用都没有被绑定到某个对象上；

// 2.案例二:
function test1() {
  console.log(this); // window
  test2();
}

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

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

案例三：将函数作为参数，传入到另一个函数中

function foo(func) {
  func()
}

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

foo(bar);

我们对案例进行一些修改，考虑一下打印结果是否会发生变化：

这里的结果依然是window，为什么呢？
原因非常简单，在真正函数调用的位置，并没有进行任何的对象绑定，只是一个独立函数的调用；

function foo(func) {
  func()
}

var obj={
  name: "why",
  bar: function() {
    console.log(this); // window
  }
}

foo(obj.bar);

2.2. 隐式绑定

另外一种比较常见的调用方式是通过某个对象进行调用的：

也就是说它的调用位置中，是通过某个对象发起的函数调用。

案例一：通过对象调用函数

foo的调用位置是obj.foo()方式进行调用的
那么foo调用时this会隐式地被绑定到obj对象上

function foo() {
  console.log(this); // obj对象
}

var obj={
  name: "why",
  foo: foo
}

obj.foo();

案例二：案例一的变化

我们通过obj2又引用了obj1对象，再通过obj1对象调用foo函数；
那么foo调用的位置上其实还是obj1被绑定了this；

function foo() {
  console.log(this); // obj对象
}

var obj1={
  name: "obj1",
  foo: foo
}

var obj2={
  name: "obj2",
  obj1: obj1
}

obj2.obj1.foo();

案例三：隐式丢失

结果最终是window，为什么是window呢？
因为foo最终被调用的位置是bar，而bar在进行调用时没有绑定任何的对象，也就没有形成隐式绑定；
相当于是一种默认绑定；

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

var obj1={
  name: "obj1",
  foo: foo
}

// 讲obj1的foo赋值给bar
var bar=obj1.foo;
bar();

2.3. 显示绑定

隐式绑定有一个前提条件：

必须在调用的对象内部有一个对函数的引用（比如一个属性）；
如果没有这样的引用，在进行调用时，会报找不到该函数的错误；
正是通过这个引用，间接地将this绑定到了这个对象上；

如果我们不希望在 对象内部 包含这个函数的引用，同时又希望在这个对象上进行强制调用，该怎么做呢？

JavaScript所有的函数都可以使用call和apply方法（这个和Prototype有关）。

它们两个的区别这里不再展开；
其实非常简单，第一个参数是相同的，后面的参数，apply为数组，call为参数列表；

这两个函数的第一个参数都要求是一个对象，这个对象的作用是什么呢？就是给this准备的。
在调用这个函数时，会将this绑定到这个传入的对象上。

因为上面的过程，我们明确地绑定了this指向的对象，所以称之为 显示绑定。

2.3.1. call、apply

通过call或者apply绑定this对象

显示绑定后，this就会明确地指向绑定的对象

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

foo.call(window); // window
foo.call({name: "why"}); // {name: "why"}
foo.call(123); // Number对象,存放时123

2.3.2. bind函数

如果我们希望一个函数总是显示的绑定到一个对象上，可以怎么做呢？

方案一：自己手写一个辅助函数（了解）

我们手动写了一个bind的辅助函数
这个辅助函数的目的是在执行foo时，总是让它的this绑定到obj对象上

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

var obj={
  name: "why"
}

function bind(func, obj) {
  return function() {
    return func.apply(obj, arguments);
  }
}

var bar=bind(foo, obj);

bar(); // obj对象
bar(); // obj对象
bar(); // obj对象

方案二：使用Function.prototype.bind

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

var obj={
  name: "why"
}

var bar=foo.bind(obj);

bar(); // obj对象
bar(); // obj对象
bar(); // obj对象

2.3.3. 内置函数

有些时候，我们会调用一些JavaScript的内置函数，或者一些第三方库中的内置函数。

这些内置函数会要求我们传入另外一个函数；
我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内部会帮助我们执行；
这些函数中的this又是如何绑定的呢？

案例一：setTimeout

setTimeout中会传入一个函数，这个函数中的this通常是window

setTimeout(function() {
  console.log(this); // window
}, 1000);

为什么这里是window呢？

这个和setTimeout源码的内部调用有关；
setTimeout内部是通过apply进行绑定的this对象，并且绑定的是全局对象；

案例二：数组的forEach

数组有一个高阶函数forEach，用于函数的遍历：

在forEach中传入的函数打印的也是Window对象；
这是因为默认情况下传入的函数是自动调用函数（默认绑定）；

var names=["abc", "cba", "nba"];
names.forEach(function(item) {
  console.log(this); // 三次window
});

我们是否可以改变该函数的this指向呢？

forEach参数

var names=["abc", "cba", "nba"];
var obj={name: "why"};
names.forEach(function(item) {
  console.log(this); // 三次obj对象
}, obj);

案例三：div的点击

如果我们有一个div元素：

注意：省略了部分代码

  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>

  <div class="box"></div>

获取元素节点，并且监听点击：

在点击事件的回调中，this指向谁呢？box对象；
这是因为在发生点击时，执行传入的回调函数被调用时，会将box对象绑定到该函数中；

var box=document.querySelector(".box");
box.onclick=function() {
  console.log(this); // box对象
}

所以传入到内置函数的回调函数this如何确定呢？

某些内置的函数，我们很难确定它内部是如何调用传入的回调函数；
一方面可以通过分析源码来确定，另一方面我们可以通过经验（见多识广）来确定；
但是无论如何，通常都是我们之前讲过的规则来确定的；

2.4. new绑定

JavaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字。

使用new关键字来调用函数时，会执行如下的操作：

1.创建一个全新的对象；
2.这个新对象会被执行Prototype连接；
3.这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；
4.如果函数没有返回其他对象，表达式会返回这个新对象；

// 创建Person
function Person(name) {
  console.log(this); // Person {}
  this.name=name; // Person {name: "why"}
}

var p=new Person("why");
console.log(p);

2.5. 规则优先级

学习了四条规则，接下来开发中我们只需要去查找函数的调用应用了哪条规则即可，但是如果一个函数调用位置应用了多条规则，优先级谁更高呢？

1.默认规则的优先级最低

毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定this

2.显示绑定优先级高于隐式绑定

显示绑定和隐式绑定哪一个优先级更高呢？这个我们可以测试一下：

结果是obj2，说明是显示绑定生效了

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

var obj1={
  name: "obj1",
  foo: foo
}

var obj2={
  name: "obj2",
  foo: foo
}

// 隐式绑定
obj1.foo(); // obj1
obj2.foo(); // obj2

// 隐式绑定和显示绑定同时存在
obj1.foo.call(obj2); // obj2, 说明显式绑定优先级更高

3.new绑定优先级高于隐式绑定

结果是foo，说明是new绑定生效了

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

var obj={
  name: "why",
  foo: foo
}

new obj.foo(); // foo对象, 说明new绑定优先级更高

4.new绑定优先级高于bind

new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高

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

var obj={
  name: "obj"
}

var foo=new foo.call(obj);

new和call同时使用

但是new绑定是否可以和bind后的函数同时使用呢？可以

结果显示为foo，那么说明是new绑定生效了

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

var obj={
  name: "obj"
}

// var foo=new foo.call(obj);
var bar=foo.bind(obj);
var foo=new bar(); // 打印foo, 说明使用的是new绑定

优先级总结：

new绑定 > 显示绑定（bind）> 隐式绑定 > 默认绑定

三. this规则之外

我们讲到的规则已经足以应付平时的开发，但是总有一些语法，超出了我们的规则之外。（神话故事和动漫中总是有类似这样的人物）

3.1. 忽略显示绑定

如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则：

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

var obj={
  name: "why"
}

foo.call(obj); // obj对象
foo.call(null); // window
foo.call(undefined); // window

var bar=foo.bind(null);
bar(); // window

3.2. 间接函数引用

另外一种情况，创建一个函数的间接引用，这种情况使用默认绑定规则。

我们先来看下面的案例结果是什么？

(num2=num1)的结果是num1的值；

var num1=100;
var num2=0;
var result=(num2=num1);
console.log(result); // 100

我们来下面的函数赋值结果：

赋值(obj2.foo=obj1.foo)的结果是foo函数；
foo函数被直接调用，那么是默认绑定；

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

var obj1={
  name: "obj1",
  foo: foo
}; 

var obj2={
  name: "obj2"
}

obj1.foo(); // obj1对象
(obj2.foo=obj1.foo)();  // window

3.3. ES6箭头函数

在ES6中新增一个非常好用的函数类型：箭头函数

这里不再具体介绍箭头函数的用法，可以自行学习。

箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。

我们来看一个模拟网络请求的案例：

这里我使用setTimeout来模拟网络请求，请求到数据后如何可以存放到data中呢？
我们需要拿到obj对象，设置data；
但是直接拿到的this是window，我们需要在外层定义：var _this=this
在setTimeout的回调函数中使用_this就代表了obj对象

var obj={
  data: [],
  getData: function() {
    var _this=this;
    setTimeout(function() {
      // 模拟获取到的数据
      var res=["abc", "cba", "nba"];
      _this.data.push(...res);
    }, 1000);
  }
}

obj.getData();

上面的代码在ES6之前是我们最常用的方式，从ES6开始，我们会使用箭头函数：

为什么在setTimeout的回调函数中可以直接使用this呢？
因为箭头函数并不绑定this对象，那么this引用就会从上层作用域中找到对应的this

var obj={
  data: [],
  getData: function() {
    setTimeout(()=> {
      // 模拟获取到的数据
      var res=["abc", "cba", "nba"];
      this.data.push(...res);
    }, 1000);
  }
}

obj.getData();

思考：如果getData也是一个箭头函数，那么setTimeout中的回调函数中的this指向谁呢？

答案是window；
依然是不断的从上层作用域找，那么找到了全局作用域；
在全局作用域内，this代表的就是window

var obj={
  data: [],
  getData: ()=> {
    setTimeout(()=> {
      console.log(this); // window
    }, 1000);
  }
}

obj.getData();

四. this面试题

4.1. 面试题一：

var name="window";
var person={
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};
function sayName() {
  var sss=person.sayName;
  sss(); 
  person.sayName(); 
  (person.sayName)(); 
  (b=person.sayName)(); 
}
sayName();

这道面试题非常简单，无非就是绕一下，希望把面试者绕晕：

function sayName() {
  var sss=person.sayName;
  // 独立函数调用，没有和任何对象关联
  sss(); // window
  // 关联
  person.sayName(); // person
  (person.sayName)(); // person
  (b=person.sayName)(); // window
}

4.2. 面试题二：

var name='window'
var person1={
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: ()=> console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return ()=> {
      console.log(this.name)
    }
  }
}

var person2={ name: 'person2' }

person1.foo1(); 
person1.foo1.call(person2); 

person1.foo2();
person1.foo2.call(person2);

person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);

person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);

下面是代码解析：

、输入地址

当我们开始在浏览器中输入网址的时候，浏览器其实就已经在智能的匹配可能得 url 了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。对于 google的chrome 的浏览器，他甚至会直接从缓存中把网页展示出来，就是说，你还没有按下 enter，页面就出来了。

2、浏览器查找域名的 IP 地址　　

1、请求一旦发起，浏览器首先要做的事情就是解析这个域名，一般来说，浏览器会首先查看本地硬盘的 hosts 文件，看看其中有没有和这个域名对应的规则，如果有的话就直接使用 hosts 文件里面的 ip 地址。

2、如果在本地的 hosts 文件没有能够找到对应的 ip 地址，浏览器会发出一个 DNS请求到本地DNS服务器。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。

3、查询你输入的网址的DNS请求到达本地DNS服务器之后，本地DNS服务器会首先查询它的缓存记录，如果缓存中有此条记录，就可以直接返回结果，此过程是递归的方式进行查询。如果没有，本地DNS服务器还要向DNS根服务器进行查询。

4、根DNS服务器没有记录具体的域名和IP地址的对应关系，而是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务器的地址。这种过程是迭代的过程。

5、本地DNS服务器继续向域服务器发出请求，在这个例子中，请求的对象是.com域服务器。.com域服务器收到请求之后，也不会直接返回域名和IP地址的对应关系，而是告诉本地DNS服务器，你的域名的解析服务器的地址。

6、最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到一个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返回给用户电脑，还要把这个对应关系保存在缓存中，以备下次别的用户查询时，可以直接返回结果，加快网络访问。

下面这张图很完美的解释了这一过程：

—知识扩展—

1.什么是DNS？

DNS（Domain Name System，域名系统），因特网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析）。
　　
通俗的讲，我们更习惯于记住一个网站的名字，比如www.baidu.com,而不是记住它的ip地址，比如：167.23.10.2。而计算机更擅长记住网站的ip地址，而不是像www.baidu.com等链接。因为，DNS就相当于一个电话本，比如你要找www.baidu.com这个域名，那我翻一翻我的电话本，我就知道，哦，它的电话（ip）是167.23.10.2。

2.DNS查询的两种方式：递归查询和迭代查询

1、递归解析

当局部DNS服务器自己不能回答客户机的DNS查询时，它就需要向其他DNS服务器进行查询。此时有两种方式，如图所示的是递归方式。局部DNS服务器自己负责向其他DNS服务器进行查询，一般是先向该域名的根域服务器查询，再由根域名服务器一级级向下查询。最后得到的查询结果返回给局部DNS服务器，再由局部DNS服务器返回给客户端。

2、迭代解析

当局部DNS服务器自己不能回答客户机的DNS查询时，也可以通过迭代查询的方式进行解析，如图所示。局部DNS服务器不是自己向其他DNS服务器进行查询，而是把能解析该域名的其他DNS服务器的IP地址返回给客户端DNS程序，客户端DNS程序再继续向这些DNS服务器进行查询，直到得到查询结果为止。也就是说，迭代解析只是帮你找到相关的服务器而已，而不会帮你去查。比如说：baidu.com的服务器ip地址在192.168.4.5这里，你自己去查吧，本人比较忙，只能帮你到这里了。

3.DNS域名称空间的组织方式

我们在前面有说到根DNS服务器，域DNS服务器，这些都是DNS域名称空间的组织方式。按其功能命名空间中用来描述 DNS 域名称的五个类别的介绍详见下表中，以及与每个名称类型的示例

4.DNS负载均衡

当一个网站有足够多的用户的时候，假如每次请求的资源都位于同一台机器上面，那么这台机器随时可能会蹦掉。处理办法就是用DNS负载均衡技术，它的原理是在DNS服务器中为同一个主机名配置多个IP地址,在应答DNS查询时,DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果,将客户端的访问引导到不同的机器上去,使得不同的客户端访问不同的服务器,从而达到负载均衡的目的?例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等。

3、浏览器向 web 服务器发送一个 HTTP 请求

拿到域名对应的IP地址之后，浏览器会以一个随机端口（1024<端口<65535）向服务器的WEB程序（常用的有httpd,nginx等）80端口发起TCP的连接请求。这个连接请求到达服务器端后（这中间通过各种路由设备，局域网内除外），进入到网卡，然后是进入到内核的TCP/IP协议栈（用于识别该连接请求，解封包，一层一层的剥开），还有可能要经过Netfilter防火墙（属于内核的模块）的过滤，最终到达WEB程序，最终建立了TCP/IP的连接。
　　
TCP连接如图所示: 　　

建立了TCP连接之后，发起一个http请求。一个典型的 http request header 一般需要包括请求的方法，例如 GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法，一般的浏览器只能发起 GET 或者 POST 请求。
　　
客户端向服务器发起http请求的时候，会有一些请求信息，请求信息包含三个部分：

请求方法URI协议/版本

请求头(Request Header)

请求正文

下面是一个完整的HTTP请求例子：

GET/sample.jspHTTP/1.1
Accept:image/gif.image/jpeg,*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window?NT5.0)
Accept-Encoding:gzip,deflate

username=jinqiao&password=1234

注意：最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头。

1.请求的第一行是“方法URL议/版本”：GET/sample.jsp HTTP/1.1
2.请求头(Request Header)

请求头包含许多有关的客户端环境和请求正文的有用信息。例如，请求头可以声明浏览器所用的语言，请求正文的长度等。

Accept:image/gif.image/jpeg.*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible:MSIE5.01:Windows?NT5.0)
Accept-Encoding:gzip,deflate.

3.请求正文
请求头和请求正文之间是一个空行，这个行非常重要，它表示请求头已经结束，接下来的是请求正文。请求正文中可以包含客户提交的查询字符串信息：

username=jinqiao&password=1234

— 知识扩展—

1.TCP三次握手

第一次握手：客户端A将标志位SYN置为1,随机产生一个值为seq=J（J的取值范围为=1234567）的数据包到服务器，客户端A进入SYN_SENT状态，等待服务端B确认；

第二次握手：服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接，服务端B将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给客户端A以确认连接请求，服务端B进入SYN_RCVD状态。

第三次握手：客户端A收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给服务端B，服务端B检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，客户端A和服务端B进入ESTABLISHED状态，完成三次握手，随后客户端A与服务端B之间可以开始传输数据了。

如图所示：

2.为什需要三次握手？

《计算机网络》第四版中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”

书中的例子是这样的，“已失效的连接请求报文段”的产生在这样一种情况下：client发出的第一个连接请求报文段并没有丢失，而是在某个网络结点长时间的滞留了，以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后，就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段，同意建立连接。

假设不采用“三次握手”，那么只要server发出确认，新的连接就建立了。由于现在client并没有发出建立连接的请求，因此不会理睬server的确认，也不会向server发送数据。但server却以为新的运输连接已经建立，并一直等待client发来数据。这样，server的很多资源就白白浪费掉了。采用“三次握手”的办法可以防止上述现象发生。例如刚才那种情况，client不会向server的确认发出确认。server由于收不到确认，就知道client并没有要求建立连接。”。主要目的防止server端一直等待，浪费资源。

3.TCP四次挥手

第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。

第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与- SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。

第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。

第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。

4.为什么建立连接是三次握手，而关闭连接却是四次挥手呢？

这是因为服务端在LISTEN状态下，收到建立连接请求的SYN报文后，把ACK和SYN放在一个报文里发送给客户端。而关闭连接时，当收到对方的FIN报文时，仅仅表示对方不再发送数据了但是还能接收数据，己方也未必全部数据都发送给对方了，所以己方可以立即close，也可以发送一些数据给对方后，再发送FIN报文给对方来表示同意现在关闭连接，因此，己方ACK和FIN一般都会分开发送。

4、服务器的永久重定向响应

服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问http://www.google.com/而非http://google.com/。

为什么服务器一定要重定向而不是直接发送用户想看的网页内容呢？其中一个原因跟搜索引擎排名有关。如果一个页面有两个地址，就像http://www.yy.com/和http://yy.com/，搜索引擎会认为它们是两个网站，结果造成每个搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是什么意思，这样就会把访问带www的和不带www的地址归到同一个网站排名下。还有就是用不同的地址会造成缓存友好性变差，当一个页面有好几个名字时，它可能会在缓存里出现好几次。

—-扩展知识—-

1.301和302的区别。

301和302状态码都表示重定向，就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址，这个地址可以从响应的Location首部中获取（用户看到的效果就是他输入的地址A瞬间变成了另一个地址B）——这是它们的共同点。

他们的不同在于。301表示旧地址A的资源已经被永久地移除了（这个资源不可访问了），搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址；

302表示旧地址A的资源还在（仍然可以访问），这个重定向只是临时地从旧地址A跳转到地址B，搜索引擎会抓取新的内容而保存旧的网址。SEO302好于301

2.重定向原因：

网站调整（如改变网页目录结构）；

网页被移到一个新地址；

网页扩展名改变(如应用需要把.php改成.Html或.shtml)。

这种情况下，如果不做重定向，则用户收藏夹或搜索引擎数据库中旧地址只能让访问客户得到一个404页面错误信息，访问流量白白丧失；再者某些注册了多个域名的网站，也需要通过重定向让访问这些域名的用户自动跳转到主站点等。

3.什么时候进行301或者302跳转呢？

当一个网站或者网页24—48小时内临时移动到一个新的位置，这时候就要进行302跳转，而使用301跳转的场景就是之前的网站因为某种原因需要移除掉，然后要到新的地址访问，是永久性的。

清晰明确而言：使用301跳转的大概场景如下：

域名到期不想续费（或者发现了更适合网站的域名），想换个域名。

在搜索引擎的搜索结果中出现了不带www的域名，而带www的域名却没有收录，这个时候可以用301重定向来告诉搜索引擎我们目标的域名是哪一个。

空间服务器不稳定，换空间的时候。

5、浏览器跟踪重定向地址

现在浏览器知道了 http://www.google.com/ 才是要访问的正确地址，所以它会发送另一个http请求。

6、服务器处理请求

经过前面的重重步骤，我们终于将我们的http请求发送到了服务器这里，其实前面的重定向已经是到达服务器了，那么，服务器是如何处理我们的请求的呢？

后端从在固定的端口接收到TCP报文开始，它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。

一些大一点的网站会将你的请求到反向代理服务器中，因为当网站访问量非常大，网站越来越慢，一台服务器已经不够用了。于是将同一个应用部署在多台服务器上，将大量用户的请求分配给多台机器处理。

此时，客户端不是直接通过HTTP协议访问某网站应用服务器，而是先请求到Nginx，Nginx再请求应用服务器，然后将结果返回给客户端，这里Nginx的作用是反向代理服务器。同时也带来了一个好处，其中一台服务器万一挂了，只要还有其他服务器正常运行，就不会影响用户使用。

如图所示：

通过Nginx的反向代理，我们到达了web服务器，服务端脚本处理我们的请求，访问我们的数据库，获取需要获取的内容等等，当然，这个过程涉及很多后端脚本的复杂操作。由于对这一块不熟，所以这一块只能介绍这么多了。

—-扩展阅读—-

1.什么是反向代理？

客户端本来可以直接通过HTTP协议访问某网站应用服务器，网站管理员可以在中间加上一个Nginx，客户端请求Nginx，Nginx请求应用服务器，然后将结果返回给客户端，此时Nginx就是反向代理服务器。

7、服务器返回一个 HTTP 响应　

经过前面的6个步骤，服务器收到了我们的请求，也处理我们的请求，到这一步，它会把它的处理结果返回，也就是返回一个HTPP响应。

HTTP响应与HTTP请求相似，HTTP响应也由3个部分构成，分别是：

状态行

响应头(Response Header)

响应正文

HTTP/1.1?200?OK
Date:?Sat,?31?Dec?2005?23:59:59?GMT
Content-Type:?text/html;charset=ISO-8859-1
Content-Length:?122

＜html＞
＜head＞
＜title＞http＜/title＞
＜/head＞
＜body＞
＜!--?body?goes?here?--＞
＜/body＞
＜/html＞

状态行：

状态行由协议版本、数字形式的状态代码、及相应的状态描述，各元素之间以空格分隔。

格式: HTTP-Version Status-Code Reason-Phrase CRLF
例如: HTTP/1.1 200 OK

协议版本：是用http1.0还是其他版本

状态描述：状态描述给出了关于状态代码的简短的文字描述。比如状态代码为200时的描述为 ok

状态码：状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值，如下：

1xx：信息性状态码，表示服务器已接收了客户端请求，客户端可继续发送请求。

100 Continue

101 Switching Protocols

2xx：成功状态码，表示服务器已成功接收到请求并进行处理。

200 OK 表示客户端请求成功

204 No Content 成功，但不返回任何实体的主体部分

206 Partial Content 成功执行了一个范围（Range）请求

3xx：重定向状态码，表示服务器要求客户端重定向。

301 Moved Permanently 永久性重定向，响应报文的Location首部应该有该资源的新URL

302 Found 临时性重定向，响应报文的Location首部给出的URL用来临时定位资源

303 See Other 请求的资源存在着另一个URI，客户端应使用GET方法定向获取请求的资源

304 Not Modified 服务器内容没有更新，可以直接读取浏览器缓存

307 Temporary Redirect 临时重定向。与302 Found含义一样。302禁止POST变换为GET，但实际使用时并不一定，307则更多浏览器可能会遵循这一标准，但也依赖于浏览器具体实现

4xx：客户端错误状态码，表示客户端的请求有非法内容。

400 Bad Request 表示客户端请求有语法错误，不能被服务器所理解

401 Unauthonzed 表示请求未经授权，该状态代码必须与 WWW-Authenticate 报头域一起使用

403 Forbidden 表示服务器收到请求，但是拒绝提供服务，通常会在响应正文中给出不提供服务的原因

404 Not Found 请求的资源不存在，例如，输入了错误的URL

5xx：服务器错误状态码，表示服务器未能正常处理客户端的请求而出现意外错误。

500 Internel Server Error 表示服务器发生不可预期的错误，导致无法完成客户端的请求

503 Service Unavailable 表示服务器当前不能够处理客户端的请求，在一段时间之后，服务器可能会恢复正常

响应头：

响应头部：由关键字/值对组成，每行一对，关键字和值用英文冒号”:”分隔，典型的响应头有：

响应正文

包含着我们需要的一些具体信息，比如cookie，html，image，后端返回的请求数据等等。这里需要注意，响应正文和响应头之间有一行空格，表示响应头的信息到空格为止，下图是fiddler抓到的请求正文，红色框中的：响应正文：

8、浏览器显示 HTML

在浏览器没有完整接受全部HTML文档时，它就已经开始显示这个页面了，浏览器是如何把页面呈现在屏幕上的呢？不同浏览器可能解析的过程不太一样，这里我们只介绍webkit的渲染过程，下图对应的就是WebKit渲染的过程，这个过程包括：

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

浏览器在解析html文件时，会”自上而下“加载，并在加载过程中进行解析渲染。在解析过程中，如果遇到请求外部资源时，如图片、外链的CSS、iconfont等，请求过程是异步的，并不会影响html文档进行加载。

解析过程中，浏览器首先会解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。

DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。

页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。因为JS有可能会修改DOM，最为经典的document.write，这意味着，在JS执行完成前，后续所有资源的下载可能是没有必要的，这是js阻塞后续资源下载的根本原因。所以我明平时的代码中，js是放在html文档末尾的。

JS的解析是由浏览器中的JS解析引擎完成的，比如谷歌的是V8。JS是单线程运行，也就是说，在同一个时间内只能做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。但是又存在某些任务比较耗时，如IO读写等，所以需要一种机制可以先执行排在后面的任务，这就是：同步任务(synchronous)和异步任务(asynchronous)。

JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务，异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行，形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件；脚本运行时先依次运行执行栈，然后会从任务队列里提取事件，运行任务队列中的任务，这个过程是不断重复的，所以又叫做事件循环(Event loop)。具体的过程可以看这篇文章：

http://www.cnblogs.com/xianyulaodi/p/6414805.html

9、浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

其实这个步骤可以并列在步骤8中，在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。比如我要获取外图片，CSS，JS文件等，类似于下面的链接：

图片：http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
CSS式样表：http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
JavaScript 文件：http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js

这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…

不像动态页面，静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯，而从缓存中直接读取，或者可以放到CDN中

在线咨询

上一篇：前端代码Review，一次性掰扯明白！
下一篇：网站404或空白怎么办？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

学习HTML的7个秘诀，网友：原来是这样...

一. 理解this

1.1. 为什么使用this

1.2. this指向什么

二. this绑定规则

2.1. 默认绑定

2.2. 隐式绑定

2.3. 显示绑定

2.3.1. call、apply

2.3.2. bind函数

2.3.3. 内置函数

2.4. new绑定

2.5. 规则优先级

三. this规则之外

3.1. 忽略显示绑定

3.2. 间接函数引用

3.3. ES6箭头函数

四. this面试题

4.1. 面试题一：

4.2. 面试题二：

、输入地址

2、浏览器查找域名的 IP 地址

—知识扩展—

1.什么是DNS？

2.DNS查询的两种方式：递归查询和迭代查询

3.DNS域名称空间的组织方式

4.DNS负载均衡

3、浏览器向 web 服务器发送一个 HTTP 请求

— 知识扩展—

1.TCP三次握手

2.为什需要三次握手？

3.TCP四次挥手

4.为什么建立连接是三次握手，而关闭连接却是四次挥手呢？

4、服务器的永久重定向响应

—-扩展知识—-

1.301和302的区别。

2.重定向原因：

3.什么时候进行301或者302跳转呢？

5、浏览器跟踪重定向地址

6、服务器处理请求

—-扩展阅读—-

1.什么是反向代理？

7、服务器返回一个 HTTP 响应

状态行：

响应头：

响应正文

8、浏览器显示 HTML

9、浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

您的项目需求

2、浏览器查找域名的 IP 地址　　

7、服务器返回一个 HTTP 响应　