首先先介绍一下作用域等一些基础概念。

 每个JavaScript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个。

[[scope]] : 指的就是我们所说的作用域，其中存储了执行期上下文的集合

作用域链 ： [[scope]] 中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链接叫做作用域链。

运行期上下文  ： 当函数执行时，会创建一个称为执行期上下文的内部对象（AO）。一个执行期上下文定义了一个函数执行的环境，函数每次执行时对应的执行环境都是的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，它所产生的执行上下文被销毁。

查找变量  ：从作用域链的顶端依次向下查找。

下面举一些例子：

立即执行函数

之前学过函数的定义、函数表达式，还有一种函数叫做立即执行函数。

立即执行函数：函数执行过后立即被销毁。

立即执行函数的官方写法：

针对初始化功能的函数，可以有参数。

只有表达式才能被执行符号执行，能被执行符号执行的表达式，函数名字会被自动忽略。

下面是一道曾阿里面试题

下面是几道经典的例题，可以参考一下：

那么采用立即执行函数呢？会有怎样的结果呢？

闭包

闭包的现象：当内部函数保存到外部时会产生闭包。

闭包会导致原有的作用域链不释放，造成内存泄漏

（内存泄漏：内存占用（比如：手握沙子，握得越紧手里剩得就越少））

闭包触发的情况：

    两个或多个函数互相嵌套，把里面的函数保存到外部，这样的情况一定会产生闭包。从外面还可以调用里面的函数。

闭包的作用：

            实现公有变量

                    eg：函数累加器

            可以做缓存（存储结构）

                    eg：eater

               可以实现封装，属性私有化

                    eg：person（）

                模块化开发，防止污染全局变量

附加一个逗号操作符：

        先看前面的表达式，再看后面的表达式，把后面表达式的计算结构返回

例题：

注释内容以样式为例，如下：

1、支持所有IE浏览器

<!--[if IE]>
<link rel="stylesheet" href="all-ie-only.css" type="text/css"/>
<![endif]-->
    


        

            1
        

        

            2
        

        

            3
        

    

2、支持非IE浏览器

<!--[if !IE]>
<link rel="stylesheet" href="not-ie.css" type="text/css"/>
<![endif]-->
    


        

            1
        

        

            2
        

        

            3
        

    

上面是除了IE浏览器外所有浏览器都识别这个样式，另外CSS-TRICKS的《How To Create an IE-Only Stylesheet》一文中提供了另一种写法：

<!--[if !IE]><!--> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]-->
    


        

            1
        

        

            2
        

        

            3
        

    

3、仅仅支持IE10

<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]-->
    


        

            1
        

        

            2
        

        

            3
        

    

4、支持IE10以下版本（IE9以及IE9以下版本）

这种方法是样式表使用在低于IE10的浏览器,换句话说除了IE10以外的所有IE版本都将被支持。

<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->
    


        

            1
        

        

            2
        

        

            3
        

    

也可以写成

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->
    


        

            1
        

        

            2
        

        

            3
        

    

前面我们也说过了lt和lte的区别,lt表示小于版本号，不包括条件版本号本身；而lte是小于或等于版本号，包括了版本号自身。

上面这几种方法，使用的是低于（lt）和低于或等于（lte）的方法来判断，我们也可以使用大于gt和大于或等于gte达到上面的效果：

5、高于IE9的版本(IE10以及IE10以上版本)

<!--[if gt IE 9]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]-->
    


        

            1
        

        

            2
        

        

            3
        

    

或

<!--[if gte IE 10]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]-->
    


        

            1
        

        

            2
        

        

            3
        

    

6、指定多种IE版本

<!--[if (IE 6)|(IE 7)|(IE 8)]>
<link rel="stylesheet" type="text/css" href="ie6-7-8.css">
<![endif]-->
    


        

            1
        

        

            2
        

        

            3
        

    

参考： 
https://www.cnblogs.com/hushufang/p/3708704.html

一、登录微信测试公众品平台，修改网页授权基本信息，输入授权回调页面域名（自己的域名）。

然后重新建立一个tp框架 编写方法如图：

在公共模块中新建function.php

在自己的手机端访问，就能获取access_token;

在 JavaScript 中

1. call、apply 和 bind 是 Function 对象自带的三个方法，都是为了改变函数体内部 this 的指向。
2. call、apply 和 bind 三者第一个参数都是 this 要指向的对象，也就是想指定的上下文。
3. call、apply 和 bind 三者都可以利用后续参数传参。
4. bind 是返回对应 函数，便于稍后调用；apply 、call 则是立即调用 。

举个栗子

function fruits() {}

fruits.prototype = {
   color: 'red',
   say: function() { console.log('My color is ' + this.color); 
   }
} var apple = new fruits;
apple.say(); // 此时方法里面的this 指的是fruits // 结果： My color is red
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

    

如果我们有一个对象 banana= {color : 'yellow'} ,我们不想重新定义 say 方法，那么我们可以通过 call 或 apply 用 apple 的 say 方法：

var banana = { color: 'yellow' };
apple.say.call(banana); // 此时的this的指向已经同过call（）方法改变了，指向的是banana，this.color就是banana.color='yellow'; // 结果是My color is yellow 

apple.say.apply(banana); // 同理，此时的this的指向已经同过apply（）方法改变了，指向的是banana，this.color就是banana.color ='yellow'; // 结果是My color is yellow

apple.say.apply(null); // null是window下的，此时，this 就指向了window ，但是window下并没有clolr这个属性，因此this.clolr就是window.color=undefined; // 结果是My color is undefined
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

    

call 和 apply 的区别

二者的作用完全一样，知识接受 参数 的方式不太一样。

call 是把参数按顺序传递进去，而 apply 则是把参数放在 数组 里面。

var array1 = [12,'foo',{name:'Joe'},-2458]; var array2 = ['Doe' , 555 , 100]; Array.prototype.push.call(array1, array2); // 这里用 call 第二个参数不会把 array2 当成一个数组,而是一个元素 // 等价于 array1.push("'Doe' , 555 , 100"); // array1.length=5; Array.prototype.push.apply(array1, array2); // 这里用 apply 第二个参数是一个数组 // 等价于:  array1.push('Doe' , 555 , 100); // array1.length=7;
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

    

类（伪）数组使用数组方法

var divElements = document.getElementsByTagName('div'); // 虽然 divElements 有 length 属性，但是他是一个伪数组，不能使用数组里面的方法 Array.isArray(divElements);// false var domNodes = Array.prototype.slice.call(document.getElementsByTagName('div')); // 将数组对象 Array 里的 this 指向伪数组 document.getElementsByTagName('div')，  // slice() 方法可从已有的数组中返回选定的元素，不传参数是，返回整个数组  Array.isArray(domNodes);// true
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

    

验证一个对象的类型可以用

Object.prototype.toString.call(obj)
    


        

            1
        

    

bind() 方法

bind() 方法会创建一个 新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind() 方法的第一个参数 作为 this，传入 bind() 方法的 第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

注意：bind()方法创建的函数不会立即调用，在下面的例子中，最后 func（） 才调用了函数，这是它与 call和apply的区别。

var bar = function(){ console.log(this.x);
} var foo = {
    x:3 }
bar(); // undefined var func = bar.bind(foo); //此时this已经指向了foo，但是用bind（）方法并不会立即执行，而是创建一个新函数，如果要直接调用的话 可以bar.bind(foo)（） func(); // 3
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

    

在 Javascript 中，多次 bind() 是无效的。更深层次的原因， bind() 的实现，相当于使用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

var bar = function(){ console.log(this.x);
} var foo = {
  x:3 } var sed = {
  x:4 } var func = bar.bind(foo).bind(sed);
func(); //3 var fiv = {
  x:5 } var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //3

以下是阮一峰老师关于Flex的博客  。在此感谢他让我get一项新技能！

Flex实战篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

1、色子数：1

思路：让圆点（即子元素）在横轴上居中在竖轴上居中，分别用justify-content和align-items

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 200px;  height: 200px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 25px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  justify-content: center;  align-items:center;  }  .main >div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
</div>
</body>
</html>

思路：竖列布局且在主轴方向采用justify-content的两端对齐布局，这样两个圆点会在左边呈现，然后采用align-items让其居中

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 200px;  height: 200px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 25px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  flex-direction: column;  justify-content: space-between;  align-items:center;  }  .main >div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

思路：用到align-self属性让第二个和第三个圆点有自己的属性设置，分别在纵轴方向上居中和低端对齐

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 180px;  height: 180px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 25px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  }  .main >div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  .item:nth-child(2){  align-self:center;  }  .item:nth-child(3){  align-self:flex-end;  }  </style>
</head>
<body>
<div class="main">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
</html>

思路：先竖着放两行圆点，每行圆点里横着放两个圆点，所以最外层父元素设置align，里面的父元素设置justify-content

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 180px;  height: 180px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 25px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  flex-wrap:wrap;  align-content:space-between;  }  .column >div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  .column{  flex-basis:100%;  display:flex;  justify-content: space-between;  }  </style>
</head>
<body>
<div class="main">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
</body>
</html>

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 180px;  height: 180px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 25px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  flex-wrap:wrap;  align-content:space-between;  }  .column > div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  .column{  flex-basis:100%;  display:flex;  justify-content: space-between;  }  .column:nth-child(2){  justify-content: center;  }  </style>
</head>
<body>
<div class="main">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
    <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
</body>
</html>

思路：跟四点的一样，先竖放三行在每行横放两个圆点

实现代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style> *{  margin:0;  padding:0;  }  body{  background:#000;  }  .main {  width: 180px;  height: 180px;  background: #fff;  border-radius: 20px;  margin: 100px auto;  padding: 15px;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  display: flex;  align-content:space-between;  flex-wrap:wrap;  }  .column > div{  width:40px;  height:40px;  background:#000;  border-radius:40px;  }  .column{  flex-basis:100%;  display:flex;  justify-content: space-between;  }  </style>
</head>
<body>
<div class="main">
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="column">
        <div class="item"></div>
        <div class="item"></div>
    </div>

</div>
</body>
</html>

Facebook是一个连接全球数十亿人的社交工具。 面对这一视觉系统，设计师遇到了前所未有的挑战

虽然每个工具都能很好地履行其预期的功能，但它们并没有提供令人满意的整体经验。设计的UI模式，使用颜色和图像每个产品都是不同的。整体看起来不仅过时，而且与Facebook的这些专业人士在个人生活中使用也脱离联系。

我们希望制作出一致，令人满意的用户体验，值得我们的商业产品为公司和人们喜欢。我们还希望通过改进他们所依赖的工具来展示我们对这些业务的承诺。