实习周分享

第一次

第一次周总结，因为还在学习阶段，没跟项目，就分享一下本周学习中出错和重点学习的内容。

一.this指向问题

this是Javascript中一个很特别的关键字，被自动定义在所有函数的作用域中。

this指向的规则总结一句话就是：
　　this的绑定只取决于函数的调用方式，和函数的声明的位置没有任何关系。

1. 默认绑定

最常见的函数调用类型：函数独立调用，this指向全局对象，严格模式下绑定到undefined。

var a = 1;

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

foo(); // 1

在代码中，foo()是不带任何修饰符的函数引用进行调用的，只能使用默认绑定，this指向window。

2.隐式绑定

当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。

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

var obj = {
	a: 2,
	foo: foo
}

obj.foo(); // 2

对象属性引用链中只有最后一层在调用位置中起作用。

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

var obj2 = {
	a: 2,
	foo: foo
}

var obj1 = {
	a: 1,
	obj2: obj2
}

obj1.obj2.foo(); // 2  obj2决定foo的this指向。

  隐式丢失:
　　最常见的this绑定问题就是隐式绑定的函数会丢失绑定对象，而应用默认绑定。

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

var obj = {
	a: 2,
	foo: foo
}

var a = 'global';

var bar = obj.foo;
bar(); // 'global'

虽然bar是obj.foo的一个引用，但是实际上它引用的是foo函数本身，因此bar()是一个不带任何修饰符的函数调用，应用默认绑定。

解决方法：
使用硬绑定（显式绑定的一个变种）

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

var obj = {
	a: 2
}

var bar = function(){
	foo.call(obj);
}

bar(); // 2 
bar.call(window); // 2  硬绑定的bar不能再修改它的this

3.显式绑定

如果对象内部不包含函数的引用，又想在某个对象上强制调用函数，可以使用call(…)和apply(…)方法直接指定this的绑定对象。 （如果传入一个原始值，会被转换为它的对象形式）

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

var obj = {
	a: 2
}

foo.call( obj ) // 2

通过 foo.call(…) 可以在调用foo时强制把它的this绑定到obj上。

4.new绑定
使用 new 来调用函数，this绑定到新创建的对象。

function foo(a){
	this.a = a;
}

var bar = new foo(2);
console.log( bar.a ); // 2

new调用函数 foo() 时，构造一个新的对象并把它绑定到foo()调用中的this上。


5.箭头函数的词法作用域
箭头函数不使用this的四种标准规则，而是根据外层（函数或者全局）作用域来决定this。

function foo(){
	return (a) = >{
		console.log( this.a );  // this继承自foo()
	}
}

var obj1 = {
	a: 1
};
var obj2 = {
	a: 2
};

var bar = foo.call( obj1 )
bar.call( obj2 ); // 1

foo()内部的箭头函数会捕获调用时foo()的this指向。由于foo() 的this绑定到obj1，所以箭头函数的this也绑定到obj1，而且箭头函数的绑定无法被再次修改。
6.总结

• 是否由new调用（new 绑定）？绑定到新创建的对象。 　　
  　var bar = new foo()
• 是否通过call、apply（显式绑定）？绑定的指定的对象。 　　
  　foo.call( obj )
• 是否在某个上下文对象中调用（隐式绑定）？绑定的是哪个上下文对象。 　　
  　obj.foo()
• 如果以上都不是，函数独立调用，使用默认绑定。在严格模式下绑定到undefined,否则绑定到全局对象。 　　
  　foo()
• 箭头函数根据当前的词法作用域来决定this。通俗的讲就是：箭头函数会继承外层函数调用的this绑定。

第二次

什么是AJAX?

AJAX （异步 JavaScript 和 XML），是指一种创建交互式（前后端交互）网页应用的网页开发技术。

前端通过与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

在AJAX未出现之前，浏览器想从服务器获得资源，注意是获取资源，会经过如下一个过程:

• 浏览器发起请求 —> 服务器接到请求，响应给你HTML文档 — >浏览器收到 资源，刷新页面，加载获得的的HTML。
• 
  
  

  ajax是一个默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）

  - 什么是同步请求？(false)

   同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码
   也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，
   当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态
  

  - 什么是异步请求？(默认:true)

  默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
  Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
  无论请求的时间长或者短，用户都在操作页面的其他内容，并不会有等待的感觉。
  

  AJAX与后端交互的步骤

  1. 创建XMLHttpRequest对象
     

  2. 使用open方法
     设置请求的数据（请求方式，请求的地址，是否异步）：open( 'GET', url, true )

     open() 的第三个参数中使用了“true”。该参数规定请求是否异步处理。True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应
     把该参数设置为 “false”， 设置onreadystatechange不生效。
     

•     3. send() 发送请求

•     4. 使用 onreadystatechange 监听状态的变化
         设置回调函数，当后端响应回来后，前端要做什么事情

• //Get请求
  	// 1.创建一个XMLHttpRequest对象
  	var xhr = new XMLHttpRequest();
  	// 2.设置请求的方式和请求地址
  	/* 
  		① 请求类型： GET 或 POST
  		② url: 服务器地址
  		③ async: true(异步) 或 false(同步)
  	 */
  	xhr.open('GET', '05.Ajax.php', true);
  	// 3.发送请求
  	xhr.send();
  	// 4.当 readyState 属性改变时，就会调用该函数。
  	// 监听状态的变化 (被触发 5 次（0 - 4），对应着 readyState 的每个变化。)
  	xhr.onreadystatechange = function () { // 同步状态下不生效
     	 /* 
     	  XMLHttpRequest 的状态从 0 到 4 发生变化:
    	     0: 请求未初始化  （XMLHttpRequest创建后的初始值）
     	     1: 服务器连接已建立 ( 已经调用了open()，send() 之前 )
     	     2: send已经执行，已接收所有响应内容。
      	 3: 解析接收到的服务器端响应数据
           4: 解析已经完成，数据都已经解析为客户端可用的格式。
      	 */
      	if (xhr.readyState == 4) {
     	     //http状态码判断请求是否成功：
        	   if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            	  // 5.处理返回的结果
           	    console.log(xhr.response);
        	   } else {
           	    console.log('请求失败');
         	  }
     	  }
     }
  

  post请求:

  function objstr(data){
  	data = data || {};
      var res = [];
      for(var key in data){
          //不允许出现中文，出现了进行转码
          res.push(encodeURIComponent(key) + '=' +  encodeURIComponent(data[key]))
      }
      return res.join('&')
  }
  
  function ajax(option){
       //0.将对象转为字符串
       var str = objstr(option.data)
       // 1.创建一个异步对象
       var xmlhttp = new XMLHttpRequest();
       xmlhttp.open('POST', option.url, true);
       // 设置HTTP请求头,编码方式
       xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
       // 3.发送请求
       xmlhttp.send(str);
       // 4.监听状态的变化
       xmlhttp.onreadystatechange = function(ev2){
           if(xmlhttp.readyState == 4){
               //判断请求是否成功：
               if(xmlhttp.status >=200 && xmlhttp.status < 300 || xmlhttp.status == 304){
                   // 5.处理返回的结果
                   console.log(xhr.response);
               }else{
                  console.log('请求失败');
               }     
           }
       }
  }
  

  属性

  XMLHttpRequest.onreadystatechange
    当 readyState 属性发生变化时，调用的事件。

  XMLHttpRequest.readyState
    返回 一个数字（ 0 — 4 ），代表请求的状态码。

  XMLHttpRequest.response
    整个响应实体

  XMLHttpRequest.responseText
    对应请求的响应String，如果请求未成功或尚未发送，则返回 null。

  XMLHttpRequest.status
    请求的响应状态（http状态码）。

  XMLHttpRequest.timeout
    设置该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。

  方法：

  XMLHttpRequest.open()
     初始化一个请求。

  XMLHttpRequest.send()
     发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。

  XMLHttpRequest.setRequestHeader()
    设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用。

  XMLHttpRequest.abort()
     如果请求已被发出，则立刻中止请求。