携程——前端笔试

这里我将会总结在携程笔试过程中遇到的选择题。

1：

for(var i =1;i<=3;i++){
           setTimeout(function(a){
              console.log(a);  
           }(i),0)
       };
   // 1
   // 2
   // 3

解析：

基础知识

setTimeout(func,s) 用于在指定的毫秒数后调用函数或计算表达式,停止该方法可使用 clearTimeout 方法。
setTimeout() 只执行一次func，如果要多次调用，可用 setInterval() 方法

setInterval和setTimeout

setInterval() 可按照指定的周期（以毫秒计）来调用函数或计算表达式，停止该方法可使用 clearInterval() 方法。

// 每隔50毫秒就会执行一次 clock() 方法，即文本框中的数字每隔50毫秒改变一次
  <button onclick="window.clearInterval(int)">停止 interval</button>
     <input type="text" id="clock" size="50" />
   <script>

        var int = self.setInterval("clock()", 50);  
        function clock() {
            var t = new Date();
            document.getElementById("clock").value = t;
        }
    </script>

单线程的JavaScript & 异步的 setTimeout()

1.JavaScript是浏览器用来与用户进行交互、进行DOM操作的，这也使得它必须有单线程这一特性。

2.在JavaScript中任务有两种，一种是同步任务，一种是异步任务。

(1).同步任务：各个任务按照文档定义的顺序一一推入执行栈中，当前一个任务执行完毕，才会开始执行下一个任务。

(2).异步任务：各个任务推入任务队列中，只有在当前的所有同步任务执行完毕，才会将队列中的任务”出队”执行。（注：这里的异步任务并不一定是按照文档定义的顺序推入队列中）

(3).任务队列(event loop)：理解为用于存放事件的队列，当执行一个异步任务时，就相当于执行任务的回调函数。一般异步操作包括 io（ajax获取服务器数据)、用户/浏览器自执行事件（onclick、onload、onkeyup等）以及定时器（setTimeout、setInterval）

console.log("1");

setTimeout(function(){
    console.log("2");
},1000);

console.log("3");

setTimeout(function(){
    console.log("4");
},0);

 // 输出结果: 1->3->4->2.。

解析：

两个console.log()都是同步，按照文档的顺序将它们推入”执行栈”中。
执行栈中的同步任务执行完毕。
将两个异步任务（定时器）按照第二个参数（延迟执行的时间）顺序推入”任务队列”中。
执行异步任务

转自： https://www.zhihu.com/question/21475411/answer/188678456

2：

      var x = 0;
      function foo() {
            x++;
            this.x = x;
            return foo;
        }
        var bar = new new foo;
        console.log(bar.x); // undefined

解析：

new new foo = new (new foo)，实际执行效果是为 foo 创建一个新的对象，这个新的对象的返回值是foo 即又 new (new foo) 变成 new foo ，new foo 为 foo 创建一个新的对象。
根据 this 绑定规则，我们会把这个创建的对象（bar）绑定到 foo () 中的 this 上，因为没有传递参数，bar.x 为 undefined （这里我不确定undefined是 x没有声明还是没有赋值的情况）
判断以个变量是否声明：
var a ;
console.log(a===undefined); // true
console.log(c===undefined); // Uncaught ReferenceError: c is not defined

http://www.jb51.net/article/79461.htm

3： CSS样式覆盖

<style>
     h1{

        color: blue;
     }
     .h1{

        color: red !important;
     }
     #h1{
        color: purple;
     }
   </style>
<body>
   <h1 class="h1" id="h1" style="color:orange;">文本标题</h1>
</body>
//  文本标题的颜色是红色

解析：

层叠样式优先级

内联定义 > 内部CSS > 外部CSS

样式表内部选择器

类选择器 < 类派生选择器 < ID选择器 < ID派生选择器

样式表的元素选择器选择越精确，则其中的样式优先级越高。
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
对于相同类型选择器指定的样式，在样式表文件中，越靠后的优先级越高。
一个元素同时应用多个class，后定义的优先(即近者优先)
如果要让某个样式的优先级变高，可以使用!important来指定。

4：

    <script>
          var c = 1;
          function c(c){
              console.log(c);
              var c = 3;
          }
          console.log(typeof(c)); // number
          console.log(c); // 1 
          c(2); // TypeError: c is not a function      
   </script>

解析：

函数声明比变量声明更置顶
变量和赋值语句一起书写，在js引擎解析时，会将其拆成声明和赋值2部分，声明置顶，赋值保留在原来位置
声明过的变量不会重复声明
根据规则，以上的代码等同于：

          var c  = function(c){
              console.log(c);
              var c = 3;
          }
          c = 1;

5：变量声明的提前

  var a = 2;
   function fn(){
       console.log(a);
       var a  =3;
   }
   fn();  // undefined

解析：

函数外的变量 a 的声明会提前，fn() 内的变量 a 也会提前到 console 语句之前（当然函数 fn 的声明也会提前），所以在 console 语句执行的时候，赋值语句还没有执行，所以输出是 undefined

// fn() 部分等同于：
        function fn(){
            var a;
            console.log(a);
            a = 3; 
        }

6：函数作用域

    <script>
        var a = 1;
        function b() {
            var a = 2;
            return function c() {
                console.log(a);
            }
        }
        var d = b();
        a = 3;
        d(a);  // 2
    </script>

解析：

var d = b(); 把 b() 执行返回的结果赋给 d ，即 var d = function(){….}
a = 3；对全局变量 a 的又一次赋值
d(a); 因为 c() 是在b() 中调用的，this指向b，所以此时因为 a 指向的是 b函数中的 a 变量，所以输出是 2

7：以下代码是哪种设计模式的简单实现

public class A(){
    private static A instance;
    private A(){

    }

    public static A getInstance(){
        if(instance == null)
          instance = new A();
          return instance;
    }
}

js中的设计模式：

工厂模式、单体模式、模块模式、代理模式、职责链模式

工厂模式

工厂模式是为了解决多个类似对象声明的问题; 也就是为了解决实列化对象产生重复的问题

 function CreatePerson(name) {
            var obj = new Object();
            obj.name = name;
            obj.sayName = function () {
                return this.name;
            }
            return obj;
        }
        var p1 = new CreatePerson("longen");
        var p2 = new CreatePerson("tugenhua");
        console.log(p1.name); // longen      
        console.log(p1.sayName()); // longen

        console.log(p2.name); // tugenhua
        console.log(p2.sayName()); // tugenhua

        // 返回都是object 无法识别对象的类型 不知道他们是哪个对象的实列
        console.log(typeof p1); // object
        console.log(typeof p2); // object
        console.log(p1 instanceof Object); // true

单体模式

单体模式是一个用来划分命名空间并将一批属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次

        var Singleton = function (name) {
            this.name = name;
            this.instance = null;
        };
        Singleton.prototype.getName = function () {
            return this.name;
        }
        // 获取实例对象
        function getInstance(name) {
            if (!this.instance) {
                this.instance = new Singleton(name);
            }
            return this.instance;
        }
        // 测试单体模式的实例
        var a = getInstance("aa");
        var b = getInstance("bb");

        console.log(a); // Object { name: "aa", instance: null }
        console.log(b); // Object { name: "aa", instance: null }

模块模式
代理模式
职责链模式

https://www.cnblogs.com/tugenhua0707/p/5198407.html

携程——前端笔试

猜你喜欢