2016阿里实习生第一次电话面试总结

　　　　2016年3月7日，晚上接到了人生中第一次电话面试-阿里实习生招聘电话面试。打来电话的是一个姐姐，下面是一些问题。

1.angular数据双向绑定的原理，以及与检测对象改变的实现双向绑定有什么不同

当时答得不太好。后面上网查了资料，发现这篇文章讲得比较详细http://sentsin.com/web/779.html.简言之，从模型到ui的更新，通过$digest循环遍历该作用域注册的所有watch，对比模型值是否改变，如果出现新值就把变化更新到视图上。从UI更新到模型，核心是$apply函数，如果是使用angular扩展的事件，那么angular就是自动调用$apply函数然后启动watch检测，将数据变化更新到模型。

2.angular依赖注入

在angular有下面三种方式:

• 通过数组标注在方法的参数中声明依赖（优先考虑）

• 定义在控制器构造方法的$inject属性中

• 通过方法参数名隐式的添加(有些注意事项)

1. 数组标注

   myModule.controller('myController',['$scope','myService',function($scope,myService){
   //your code.            
   }]);
   

   在第二个数组类型的参数中声明了两个依赖$scope,myService.后面的function中的参数$scope,myService与前面生命的依赖一一对应，可以改成符合js命名规范的任意标示符，比如：

   myModule.controller('myController',['$scope','myService',function(myScope,aService){
   //your code.            
   }]);
   

   这样myScope便对应$scope服务，aService对应myService。

1. $inject属性

   var myController=function($scope,myService){
   //your code.            
   }];
    myController.$inject=['$scope','myService'];
    myModule.controller('myController',myController);
   

2. 隐式声明依赖

   myModule.controller('myController',function($scope,myService){
          //your code.            
          });
   

   将构造函数的参数设为需要依赖的服务名，这样注入器就会自动查找需要依赖的服务

3.闭包及其优缺点

闭包定义：javascript允许使用内部函数，内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

• 优点：
  • 不增加额外的全局变量。
  • 执行过程中所有变量都是在匿名函数内部。
  • 加强封装性
• 缺点
  • 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
  • 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

4.ajax优缺点

ajax：AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它使用：

• 使用XHTML+CSS来标准化呈现；
• 使用XML和XSLT进行数据交换及相关操作；
• 使用XMLHttpRequest对象与Web服务器进行异步数据通信；
• 使用Javascript操作Document Object Model进行动态显示及交互；

• 使用JavaScript绑定和处理所有数据。

  • 优点：
    • 无刷新更新数据
    • 异步与服务器通信
    • 前端和后端负载平衡
    • 基于标准被广泛支持
    • 界面与应用分离
  • 缺点
    • 无法使用Back和History功能
    • 安全问题 AJAX暴露了与服务器交互的细节
    • 对搜索引擎的支持比较弱
    • 破坏了程序的异常机制
    • 违背URL和资源定位的初衷
    • 客户端过肥，太多客户端代码造成开发上的成本

5.javascript中的this理解

this是Javascript语言的一个关键字它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用，随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

1. 作为对象方法调用
   如果函数作为某个对象的方法调用，那么this绑定到这个对象上。

   function myFunc() {
      console.log(this.x);
   }
   var myObject = {};
   myObject.x = "stone";
   myObject.myFunc = myFunc;
   myObject.myFunc();//输出为‘stone’
   

2. 作为函数调用
   如果函数直接作为函数调用，那么this绑定到全局对象，浏览器中也就是window。

   var x = 'stone';
   function myFunc() {
            this.x = "water";
            console.log(this.x);
   }
   myFunc();//输出为‘water’
   

3. 作为构造函数调用
   作为构造函数，this指向生成的对象。

   function Stone() {
            this.name = "stone";
   }
   myStone = new Stone();
   console.log(myStone.name);//输出‘stone’
   

4. 通过apply/call调用
   apply/call可以改变函数的调用对象，他们的第一个参数代表改变后调用这个函数的对象

   name = 'Global';
   var Stone = {
       name: 'Stone'
   };
   function showName() {
       console.log(this.name);
   }
   showName.apply();//输出为‘Global’,未改变this指向
   showName.apply(Stone);//输出为‘Stone’，this指向为Stone对象
   

5. 自执行函数
   自行函数this指向全局对象，浏览器中是window

   name='Global';
   var Stone={
      name:'stone',
      showName:function(){
          console.log(this.name);
          (function(){
              console.log(this.name);
          })();
      }
   };
   Stone.showName();//输出stone Global
   

6.js事件代理（委托）

事件阶段：事件捕获->目标->事件冒泡

1. 事件捕获阶段

   事件的第一个阶段是捕获阶段。事件从文档的根节点出发，随着DOM树的结构向事件的目标节点流去。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达时间的目标节点。捕获阶段的主要任务是遍历传播路径，在冒泡阶段，时间会通过这个路径回溯到文档根节点。在实际应用中，我们并没有太多使用捕获阶段监听的用例，但是通过在捕获阶段对事件的处理，我们可以阻止类似click事件在某个特定元素上被触发。

2. 目标阶段

   当事件到达目标节点时，事件就进入了目标阶段。事件在目标节点上被触发，然后逆向回流，知道传播到最外层的文档节点。

3. 冒泡阶段

   事件在目标事件上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，直到到达最外层的根节点。也就是说，同一事件会一次在目标节点的父节点，父节点的父节点…直到最外层的节点上触发。

   事件代理：把事件处理器添加到一个父级元素上。默认情况下，由于事件在目标元素上面触发后，还会一次冒泡到DOM树最上层，所以事件代理得以实现。这样我们可以在上层元素通过判断事件的目标，来对目标元素采取相应的操作。

7.position几种属性

8.display属性

• inline(行内元素)

  • 和其他元素都在一行上
  • 元素的高度、宽度、行高及顶部和底部边距不可设置
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变

• block(块元素)

  • 每个块级元素都从新的一行开始，并且其后的元素也另起一行
  • 元素的高度、宽度、行高以及顶和底边距都可设置
  • 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度

• inline-block

  inline-block既具有block的宽高特性又具有inline的同行元素特性。

9.BFC(Block formatting context)块级格式化上下文

它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

• BFC布局规则：

  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算

• 产生BFC的元素

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

10.OSI七层模型

11 http

HTTP是Hyper Text Transfer Protocol（超文本传输协议）的缩写

1. 工作流程

   • 首先客户机与服务器需要建立连接。只要单击某个超级链接，HTTP的工作开始
   • 建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符（URL）、协议版本号，后边是MIME信息包括请求修饰符、客户机信息和可能的内容。
   • 服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能的内容。
   • 客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客户机与服务器断开连接。

2. 常用状态吗