今天完成的事：学会了用Postman，了解了原型和原型链，稍微了解了一部分hosts和一点点继承，

明天要完成的事：看资料看文档

难题：原型链好难理解啊！继承更难理解！但是我居然会用？？？但是异步里的回调函数我还懂一点但是prome实在没理解：明天再看看。angular文档有点奇怪语法什么的都没有只有剩下的标签和事件，感觉又是那种css一样的记忆，方法。师兄的意思是不看angularjs直接看angular，那angular1也是angularjs的一部分任务6-10都是angularjs啊？？？

收获：

理解原型之前先理解在js中一切都是对象，

原型链和原型：原型就是js创建一个函数或者一个对象的模板；然后当你创建一个构造函数之后，自然就将其存储进了栈内存，这个栈内存里的就是原型对象（你把它看成对象）（只能这么理解原理似乎有区别），而js会自动创建一个prototype属性这个属性就是指向一个对象，这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。那么，prototype就是通过调用构造函数而创建的那个对象实例的原型对象。然后每当你使用这个构造函数构造新的对象时，新的对象和函数会继承之前的prototype的属性和方法，

但是函数还有一个__proto__属性，这个是这个函数的私有属性也就是添加属性时没有添加到模板上只添加给了函数，  并且这个属性是不能访问的

函数可以用来作为构造函数来使用。另外只有函数才有prototype属性并且可以访问到，但是对象实例不具有该属性，只有一个内部的不可访问的__proto__属性。__proto__是对象中一个指向相关原型的神秘链接。__proto__是不对外公开的，也就是说是个私有属性.

实例就是通过构造函数创建的。实例一创造出来就具有constructor属性（指向构造函数）和__proto__属性（指向原型对象），

构造函数中有一个prototype属性，这个属性是一个指针，指向它的原型对象。

原型对象内部也有一个指针（constructor属性）指向构造函数:Person.prototype.constructor = Person;

实例可以访问原型对象上定义的属性和方法

但是原型的属性添加时必须用this，什么属性添加

function Animal(name)   //基类构造函数

                            {

                                this.name = name;//设置对象属性

                            }

                            Animal.prototype.behavior = function() //给基类构造函数的prototype添加behavior方法

                            {  

                                alert("this is a "+this.name);

                        }

                            var Dog = new Animal("dog");//创建Dog对象

                            var Cat = new Animal("cat");//创建Cat对象

                            Dog.behavior();//通过Dog对象直接调用behavior方法

                            Cat.behavior();//output "this is a cat"

                            alert(Dog.behavior==Cat.behavior);//output true;

原型链

当从一个对象那里调取属性或方法时，如果该对象自身不存在这样的属性或方法，就会去自己关联的prototype对象那里寻找，如果prototype没有，就会去prototype关联的前辈prototype那里寻找，如果再没有则继续查找Prototype.Prototype引用的对象，依次类推，直到Prototype.….Prototype为undefined（Object的Prototype就是undefined）从而形成了所谓的“原型链”。

   前端垮域问题有哪些常用的解决方式？？

这个我之前了解过，但是看完师兄小课堂的资料又有新的理解：

2.为什么script标签引入的文件不受同源策略的限制？

因为script标签引入的文件内容是不能够被客户端的js获取到的，不会影响到被引用文件的安全，所以没必要使script标签引入的文件遵循浏览器的同源策略。而通过ajax加载的文件内容是能够被客户端js获取到的，所以ajax必须遵循同源策略，否则被引入文件的内容会泄漏或者存在其他风险。

4.1 window.name + iframe

window.name的美妙之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的name值（2MB）。原理：利用了“在同一浏览器窗口载入的不同页面（ 无论它们是否不同域 ），共享同一个window.name，并且都对window.name有读写的权限”的这一特性来实现页面间的数据交换

4.2 CORS

CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。 因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

4.3 JSONP

JSONP包含两部分：回调函数和数据。回调函数是当响应到来时要放在当前页面被调用的函数。数据就是传入回调函数中的json数据，也就是回调函数的参数了。

jsonp虽然很简单，但是有如下缺点：

1）安全问题(请求代码中可能存在安全隐患);

2）要确定jsonp请求是否失败并不容易。

4.4 配置Nginx通过域名访问网页

（这4种方法最后一种是我们用的他其实只是找了个朋友走关系，帮忙传个消息，原理则是服务器与服务器之间无需遵守同源政策，而前面第一种：

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

在getDomainData.html页面中，我们怎么把data.html页面载入进来呢？显然我们不能直接在getDomainData.html页面中通过改变window.location来载入data.html页面，因为我们想要即使getDomainData.htmll页面不跳转也能得到data.html里的数据。答案就是在getDomainData.html页面中使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取data.html的数据，然后getDomainData.html再去得到iframe获取到的数据。

充当中间人的iframe想要获取到data.html的通过window.name设置的数据，只需要把这个iframe的src设为http://localhost:8001/data.html就行了。然后getDomainData.html想要得到iframe所获取到的数据，也就是想要得到iframe的window.name的值，还必须把这个iframe的src设成跟getDomainData.html页面同一个域才行，不然根据前面讲的同源策略，getDomainData.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。

https://www.cnblogs.com/SherryIsMe/p/4752332.html

第2种的话

感觉比较简单而且是浏览器里的设置，没有太多了解

jsonp师兄讲了一下但是没能理解，很大一部分原理和ajax是一样的

）

继承：

对象：“无序属性的结合，其属性值可以包含基本值、对象或者函数”。

面向对象编程（OOP）：核心思想是将各种复杂关系，抽象成一个个对象，然后由对象之间的分工合作，完成对真实世界的模拟。

在JS中继承是一个非常复杂的话题，比其他任何面向对象语言中的继承都复杂得多。在大多数其他面向对象语言中，继承一个类只需使用一个关键字即可。在JS中想要达到继承公用成员的目的，需要采取一系列措施。

JavaScript语言的对象体系，不是基于“类”，而是基于构造函数（constructor）和原型（prototype）

原型对象：只要创建一个新函数，就会根据特定的规则为该函数创建一个prototype属性指向其原型对象，默认情况下原型对象会自动获得一个constructor属性，该属性包含一个指向prototype属性所在函数的指针

许多OO语言都支持两种继承方式：接口继承和实现继承，接口继承只继承方法签名，实现继承则继承实际的方法

当开发人员需要调试一个网页是否运行正常，并不是简简单单地调试网页的HTML、CSS、脚本等信息是否运行正常，更加重要的是网页能够正确是处理各种HTTP请求，毕竟网页的HTTP请求是网站与用户之间进行交互的非常重要的一 种方式，在动态网站中，用户的大部分数据都需要通过HTTP请求来与服务器进行交互。Postman插件就充当着这种交互方式的“桥梁”

 从标准上来看，GET 和 POST 的区别如下：

          GET 用于获取信息，是无副作用的，是幂等的，且可缓存 POST 用于修改服务器上的数据，有副作用，非幂等，不可缓存

          get是从服务器上获取数据，post是向服务器传送数据。

Network面板-请求表

    Name：资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。    

    Status：HTTP状态码。

    Type：请求的资源MIME类型。

    Initiator：标记请求是由哪个对象或进程发起的（请求源）。

        Parser： 请求由Chrome的HTML解析器时发起的。

        Redirect：请求是由HTTP页面重定向发起的。

        Script：请求是由Script脚本发起的。

        Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。

    Size：从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)

    Time：请求或下载的时间，从发起Request到获取到Response所用的总时间。

    Timeline：显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。

    通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：

Headers：该资源的HTTP头信息。

Preview：根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。

Response：显示HTTP的Response信息。

Cookies：显示资源HTTP的Request和Response过程中的Cookies信息。

Timing：显示资源在整个请求生命周期过程中各部分花费的时间。

查看资源HTTP头信息

    在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers、Request Headers以及Query String Parameters或者Form Data等信息。

General部分:    

    Request URL:资源的请求url

    Request Method:HTTP方法

    Status Code:响应状态码

    200（状态码） OK（原因短语）    

    301 - 资源（网页等）被永久转移到其它URL    

    404 - 请求的资源（网页等）不存在    

    500 - 内部服务器错误    

Response Headers:

    Content-Encoding:gzip ——压缩编码类型

    Content-Type:text/html ——服务端发送的类型及采用的编码方式    

    Date:Tue, 14 Feb 2017 03:38:28 GMT ——客户端请求服务端的时间    

    Last-Modified:Fri, 10 Feb 2017 09:46:23 GMT ——服务端对该资源最后修改的时间，GMT是格林尼治标准时间    

    Server:nginx/1.2.4 ——服务端的Web服务端名    

    Transfer-Encoding:chunked ——分块传递数据到客户端    

Request Headers:

    Accept:text/html ——客户端能接收的资源类型    

    Accept-Encoding:gzip, deflate ——客户端能接收的压缩数据的类型    

    Accept-Language:en-US,en;q=0.8 ——客户端接收的语言类型    

    Cache-Control:no-cache ——服务端禁止客户端缓存页面数据    

    Connection:keep-alive ——维护客户端和服务端的连接关系    

    Cookie: ——客户端暂存服务端的信息    

    Host:www.jnshu.com ——连接的目标主机和端口号    

    Pragma:no-cache ——服务端禁止客户端缓存页面数据    

    Referer:http://www.jnshu.com/daily/12345 ——来于哪里    

    User-Agent: ——客户端版本号的名字    

浏览器访问网站，要首先通过DNS服务器把要访问的网站域名解析成其指定的IP地址，之后，浏览器才能对此网站进行定位并且访问其数据。 操作系统规定，在进行DNS请求以前，先检查系自己的Hosts文件中是否有这个域名和IP的映射关系。 如果有，则直接访问这个IP地址指定的网络位置，如果没有，再向已知的DNS服务器提出域名解析请求。也就是说Hosts的IP解析优先级比DNS要高。

但是在查资料时发现一个叫dns污染没搞懂。

异步的执行方式：

同步模式"指后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的。

"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务， 而是执行回调函数，后一个任务则是不等前一个任务结束就执行， 所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

异步的注疑事项：

异步编程的主要方式是使用回调函数，但是回调函数嵌套形成Callback Hell问题。 Callback Hell 最大的问题是不好写、不好看，以及衍生出来的不好管理，这样的代码不易阅读、管理、重构困难、没有灵活性。

无论是 Promise 还是 generator，亦或者是 async/await，他们所做的任务都是要千方百计地把Callback Hell拉成平整的线性结构，加入语法糖。

1 回调函数

异步编程最基本的方法。

假定有两个函数f1和f2，f2等待f1的执行结果。如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。

                        function f1(callback){

                            　　　　setTimeout(function () {                      

                            　　　　　　// f1的任务代码                       

                            　　　　　　callback();                            

                            　　　　}, 1000);                        

                            　　}

                        f1(f2);

通过延迟执行时间，执行完f1之后执行f2，

2 事件监听

另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

                        clickEvent.addEventListener("click", function (e) {

                        console.log("someone is pressing my buttons…");

                        });