真题实战汇总

7/13

1. 下列布局在页面上的宽度比是多少？

// css
.flex {
   
    display: flex;
    width: 200px;
    height: 100px;
}
.left {
   
    flex: 3 2 50px;
    background: red;
}
.right {
   
    flex: 2 1 200px;
    background: blue;
}
// html
<div class="flex">
    <div class="left"></div>
    <div class="right"></div>
 </div>

解析：1:5
因为是缩进，先计算width x flex-shrink
50 x 2 = 100
200 x 1= 200
求和
100 + 200 = 300
求占比后，计算需要腾出的空间
(100/300) * 50 = 50/3
(200/300) * 50 = 100/3
得出缩进后的宽度
50 - 50/3 = 100/3
200 - 100/3 = 500/3
所以缩进后的宽度比为 1:5
涉及flex的宽度计算问题：
参考文章【Flex中宽度计算】

2. 关于以下代码，说法正确的有哪些？
   function Person() { }
   var person = new Person();
   A. 每一个原型都有一个constructor属性指向关联的构造函数。
   B. 每一个对象都有一个prototype属性
   C. Object.getPrototypeOf(person) === Person.prototype
   D. person.constructor === Person

解析：ACD
只有函数对象才有prototype 属性，普通对象没有
person.prototype // undefined
person.proto === Person.prototype // true
Object.getPrototypeOf(person) === Person.prototype // true

3. 关于同源策略和跨域的问题，以下说法正确的有？
   A. http://store.company.com/dir/page.html 和 http://store.company.com/dir/other.html 不同源。
   B. node设置res.header(“Access-Control-Allow-Origin”, “*”) 去解决跨域问题，会有安全问题。
   C. JSONP的原理是利用引入script不限制源的特点，把处理函数名作为参数传入，然后返回执行语句。
   D. document.domain的原理是将两个页面的document.domain设置成一致，只能解决主域相同的跨域问题。

解析： BCD
同源策略见学习随笔中浏览器同源策略一篇

7/14

1. 以下这种写法不规范，但是不会报错，其在浏览器中的表现形式是
   < p>1< p>2< /p>< /p>
   A. < p>1< p>2< /p>< /p>
   B. < p>1< /p>< p>2< /p>
   C. < p>12< /p>
   D. < p>1< /p>< p>2< /p>< p>< /p>

解析： B

7/15

1. 以下前端代码的运行结果是（）

<div id="box1">
  <div id="box2">
    content
  </div>
</div>
<script>
const $ = document.querySelector.bind(document);
const box1 = $('#box1');
const box2 = $('#box2');
box1.addEventListener