前端知识点总结——bind、call、apply的区别 / null和undefined的区别 / BFC / 跨域相关问题 / Promise

bind、call、apply的区别

apply：apply(this,[])第一个参数是this的指向，第二个参数是函数接受的参数数组，必须是数组形式，该方法会立即执行。

let nums = [1,2,3,4,5]
let temp = 0
temp = Math.min.apply(null,nums)
console.log(temp); // 1

call：call(this,args,args,...,)第一个参数是this的指向，第二个参数是函数接受的参数列表，该方法会立即执行

let nums = [1,2,3,4,5]
let temp = 0
temp = Math.max.call(null,nums[0],nums[1],nums[2],nums[3],nums[4])
console.log(temp); // 5

bind：bind(this,args,args,...,)第一个是参数this的指向，第二个参数是函数接受的参数列表，可以分多次传入，该方法会返回一个永久改变this指向的函数。

let nums = [1,2,3,4,5]
let func = new Function()
func = Math.max.bind(null,nums[0],nums[1],nums[2],nums[3])
console.log(func()); // 4

null和undefined、NaN的区别

1. null：表示没有对象，不应该有值
2. undefined：表示缺少值，应该有但是还没有定义
3. NaN：一个特殊的数字值，类型是number，表示不是一个合法的数字
   NaN是唯一一个自己与自己不相等的值

NaN === NaN //false

BFC（块级格式化上下文）

body本身也相当于一个BFC，margin也会产生折叠。BFC是一块区域，可以产生许多个，每个都相对独立。

浏览器对BFC区域的约束规则

1. 生成BFC元素的子元素会一个接一个的放置。
2. 垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。
3. 生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界相接触（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

BFC的布局规则

• 同一个BFC内部的Box在垂直方向，一个接一个地排列
• Box垂直方向的间距由margin决定，属于同一个BFC内的两个Box会发生边距重叠，间距为较宽的margin
• BFC内部每个Box的左margin与包含块的左border相接触
• 包含块内部子元素不会重叠，即使是float属性也只是水平依次排开
• BFC内部和外部相互独立互不影响
• BFC的高度要将float元素包含进来

创建方法

position:absolute;
display:inline-block、table-cell、flex、table-caption或者inline-flex。
float:left/right;
overflow:hidden、scroll、auto、clip。（即overflow的值不是visible）

跨域相关问题

什么是跨域：当一个请求的url中 协议、域名、端口号 中有任何一个不相同即为跨域。
例如：

非同源的限制：

1. 不能读取cookie、localStorage和indexDB（前端数据库）
2. 不能获取非同源网页的DOM
3. 不能向非同源地址发送AJAX请求

跨域解决方案

1. document.domain：主域名相同子域名不同时可以使用document.domain配置，配置之后两个页面不存在跨域问题
2. JSONP：使用<script>标签像服务器请求JSON数据，将数据放到一个指定名字的回掉函数的参数传回来。
   JS原生方式：

   <script src="http://zzk.com/data.php?callback=dosomething"></script>
   // 向服务器zzk.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
    
   // 处理服务器返回回调函数的数据
   <script type="text/javascript">
   	// 服务器返回的参数传回到res里
       function dosomething(res){
           // 处理获得的数据
           console.log(res.data)
       }
   </script>
   

   Vue方式：

   this.$http.jsonp('http://www.domain2.com:8080/login', {
       params: {},
       jsonp: 'handleCallback'
   }).then((res) => {
       console.log(res); 
   })
   

3. CORS:跨域资源分享
   • 服务器端设置Access-Control-Allow-Origin
   • 需要cookie跨域请求，前后端都需要设置
4. 设置nginx反向代理，nginx拦截发出的请求，再通过nginx发送给服务端，服务端返回的数据发送给nginx，nginx在返回给浏览器。同源策略是浏览器设定的，并不影响http的请求。

Promise

1. Promise对象是一个构造函数，用来生成promise对象
2. Promise构造函数接受一个函数作为参数，该函数的两个参数是resolve和reject，是两个函数，由JavaScript引擎提供，不用自己提供。

   var promise = new Promise(function (resolve,reject){
   	if(/异步执行完/){
   		resolve(value)
   	}else{
   		reject(error)
   	}
   })
   

3. resolve函数作用是将promise对象状态从pending改为resolced，在异步操作成功时调用，并且将异步操作的结果作为参数传递出去
4. reject函数作用是将promise对象状态从pending改为rejected，在异步操作失败时调用，并且将异步操作报出的错误作为参数传递出去。

   promise.then(
   	function (value){
   		//成功时调用
   		console.log(value)
   	},
   	function (error){
   		//失败时调用
   		console.log(error)	
   	}
   )
   

5. reject和catch区别

   • reject的作用是将promise的状态从pending改为rejected

   • 如果then中有第二个回调函数，会直接进入then的第二个回调函数

   • 如果then中没有第二个回调函数，会进入catch

      new Promise((resolve,reject) =>{
        if(false){
          resolve('假装异步函数执行成功')
        }else{
          reject('假装异步函数执行失败') //此时进入reject函数
        }
      }).then(
        res => {
          console.log(res);
        },
        rej => {
          console.log(rej);
        }
      )
     

     new Promise((resolve,reject) =>{
          if(false){
            resolve('假装异步函数执行成功')
          }else{
            reject('假装异步函数执行失败')
          }
        }).then(
          res => {
            console.log(res);
          }
        ).catch( //此时会进入catch中
          rej => {
            console.log(rej);
          }
        )