题目01

如下代码在 Chome 的表现方式：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>21 天碎片化学习题目</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14. <span>京城</span>
  15. <span>一灯</span>
  16. </body>
  17. </html>
  • A：（间隔）京城一灯
  • B：京城（间隔）一灯
  • C：京城一灯
  • D：（间隔）京城（间隔）一灯

答案：B
解析：书写代码换行导致出现空格。
消除该空格的方法：

  • 将 span 写在同一行
  • 包裹 div 设置 font-size:0px; 设置内部 span -> font-size:16px;

题目02

如下代码在 Chome 的表现方式：

  1. var big = "志佳老师";
  2. var obj = {
  3.    big:"一灯",
  4.    showBig: function(){
  5.        return this.big;
  6.    }
  7. };
  8. obj.showBig.call(big);
  • A：志佳老师
  • B：一灯
  • C：underfined
  • D：function big() {}

答案：D
解析：

  • obj.showBig.call(big); this 被指向全局 big
  • big 上去找 big 变量发现没有就去找全局 big 的 _proto_
  • big 是字符串所以 big 的 _proto_是 String
  • String 上有 big 函数（big() 方法用于把字符串显示为大号字体）
  • 所以结果为 big 的函数体

题目03

如下代码在 Chome 的执行结果：

  1. <p>京城<div>一灯</div></p>
  • A：<p>京城<div>一灯</div></p>
  • B：<div>一灯</div>``<p>京城</p>
  • C：<p>京城</p>``<div>一灯</div>
  • D：<div>``<p>京城一灯</p>``</div>

答案：D
解析：<p></p>不能包含块级元素

题目04

请写出以下代码执行结果：

  1. Object.prototype.a = 1;
  2. Function.prototype.a = 2;
  3. function yideng() {};
  4. var ins = new yideng();
  5. console.log(ins.a);
  • A：2
  • B：1
  • C：0
  • D：undefined

答案：D
解析：ins 是一个 Object 而不是 Function，ins.__proto__.__proto__ == Object.prototype

题目05

请写出以下代码执行结果：

  1. var a = "yideng";
  2. function test() {
  3.     var a = "yideng2";
  4.     var init = new Function("console.warn(a)");
  5.     init();
  6. }
  7. test();
  • A：yideng
  • B：yideng2
  • C：undefined
  • D：a is not defined

答案：A
解析：new Function() 这段代码的词法作用域指向全局的词法作用域，所以 a 是 yideng。

题目06

请写出以下代码执行结果：

  1. function yideng(a,b,c) {
  2.     console.log(this.length);
  3.     console.log(this.callee.length);
  4. }
  6. function fn(d) {
  7.     arguments[0](10, 20, 30, 40, 50);
  8. }
  10. fn(yideng, 10, 20, 30);
  • A：3，1
  • B：4，4
  • C：5，4
  • D：4，1

答案：D
解析：第一个输出结果：因为 this 当前指向的是 arguments。arguments 是一个伪数组具备 length 属性。arguments 又是保存函数的实参。fn 调用的时候传入 4 个实参。所以 arguments 长度为 4。这个时候 arguments[0] 等同于 arguments.yideng 调用这个函数。所以 this 指向的是 arguments 这个伪数组也是(对象)。

第二个输出结果：callee 是 arguments 的一个属性,主要返回当前 arguments 直属的函数体。所以 this.callee 是返回 fn 。每一个函数有一个 length 属性主要用来返回函数的形参的所以就是1。

题目07

请写出以下代码执行结果：

  1. const pro = new Promise((resolve, reject) => {
  2.    setTimeout(() => {
  3.        resolve(1);
  4.    })
  5.     resolve(2);
  6.     console.log("yideng");
  7. });
  8. pro.then(res => console.log(res));
  9. console.log("end");
  • A：end yideng 2 1
  • B：end yideng 1 2
  • C：yideng end 2 1
  • D：yideng end 2

答案：D
解析：Promise 属于microtask，但是声明的阶段属于同步。所以先输出 yideng 然后接下来是同步执行栈的 end
接下来运行异步队列的 2 setTimeout 属于 macrotask。此时 Promise 的状态已经改变故再 resolve 无效。所以运行结果是 yideng end 2。

题目08

请写出以下代码执行结果：

  1. console.log({} +[]);
  2. {} + [];
  • A：[object Array][object Object]，[object Object][object Array]
  • B：0[object Object]，[object Object]0
  • C：[object Object]，0
  • D：[object Object]，[object Object]

答案：C
解析：{}+[] ：根据语句优先原则。{} 被理解成为复合语句块，因此相当于 {};+[]，[] 为空所以结果是 0。
console.log({}+[])：js 把 () 中的语句当做是一个表达式，因此 {} 不能被理解为语句块而被理解成 ”[object Object]“ + ” “结果打印为 [object Object]
其实上面两个结果相同，原理也是一样的。只不过 {} 作为右值出现被理解为对象直接量。

题目09

请写出以下代码执行结果：

  1. var f = function yideng(a) {
  2.     yideng = a;
  3.     console.log(typeof yideng);
  4.     return 23;
  5. };
  6. f("京城一灯");
  7. console.log(typeof yideng);
  • A：string，number
  • B：function，number
  • C：string，function
  • D：function，undefined

答案：D
解析：这是一个名字是 yideng 的 function expression，然后又被赋值给了变量 f。调用函数 f，变量替换了 yideng 函数成为字符串。这时理应得到的结果是 string。但是是 function， 因为函数名 yideng 是只读的。所以还是函数。函数名 yideng 只能在函数体内部被使用，试图在函数外部使用 yideng 会报错的。所以是 undefined。

题目10

请写出以下代码执行结果：

  1. function fn() {
  2.   console.log(this.length);
  3. }
  4. var yideng = {
  5.   length: 2,
  6.   method: function() {
  7.     fn("京城一灯");
  8.     arguments[0]();
  9.   }
  10. }
  11. yideng.method(fn, 1);
  • A：undefined，undefined
  • B：undefined，2
  • C：5，undefined
  • D：0，2

答案：D
解析：fn("京程一灯"); 此时 this 指向 window.fn 读取 window.length=0。为什么呢？因为 window.length 代表页面 iframe 数量。arguments[0] 此时代表 fn 内的 this 代表 arguments，arguments 代表 yideng.method 实参。所以结果等于 2。

题目11

请写出以下代码执行结果：

  1. function yideng() {}
  2. yideng.__proto__.__proto__.constructor.constructor.constructor
  • A：Function
  • B：Object
  • C：null
  • D：yideng
  • E：undefined

答案：A
解析：yideng.__proto__ = Function.prototype Function.prototype.__proto__ = Object.prototype Object.prototype.constructor = Object Object.constructor 从 Function.prototype 去找结果是 Function 最后 Function.constructor 最特殊因为他的 ___proro___ 指向自己的 prototype 所以还是 Function 自己
也就是无论再有多少个 constructor 也都是 Function。

题目12

请写出以下代码执行结果：

  1. var o = {
  2.   foo:function(){
  3.     console.log("京城")
  4.   },
  5.   bar(){
  6.     console.log("一灯城")
  7.   }
  8. };
  • A：京城一灯
  • B：f is not constructor,p is not a constructor
  • C：p is not a constructor,一灯
  • D：京城，p is not a constructor

答案：A
解析：Hard-bound，普通的 function 声明，可以 new 实例化。但是 Hard-bound 在 ES6 的简洁声明上是不能用。Hard-bound （硬绑定是指使用 bind 写死要绑定的对象，可避免函式执行时期得到的 this 指向错乱）。

题目13

请写出以下代码执行结果：

  1. let a = 0;
  2. let yideng = async() => {
  3.   a = a + await 10;
  4.   console.log(a);
  5. }
  6. yideng();
  7. console.log(a++);
  • A：0，10
  • B：1，11
  • C：10，10
  • D：0，11

答案：A
解析：首先函数 yideng 执行，在执行到 await 10 之前变量 a 还是0。因为 await 内部实现了 generator,generator 会保留堆栈中的东西，所以这个时候 a=0 被保存了下来。await 是异步操作，后来的表达式不返回 Promise 的话，会被包装成 Promise.reslove 然后去执行函数外的代码。同步代码执行完毕之后执行异步代码，所以外部 a++ 先执行，因为是 ++ 在后所以是 0。然后异步执行 将保存下来的啊的值拿来直接用。所以 a = 0+10。

题目14

请选择在 textarea中显示的内容：

  1. <textarea id="js-yideng" maxlength="1"></textarea>
  2. <script>
  3.   document.getElementById("js-yideng").value = "4".padStart(2,0);
  4. </script>
  • A：24
  • B：0
  • C：4
  • D：04

答案：A
解析：maxlength 只能控制用户的输入 并不能阻止 JavaScript。padStart 一共接受2个参数，第一个是用来指定字符串的最小长度，第二个参数是用来补全长度的字符串。

题目15

请选择以下代码执行结果：

  1. "1 2 3".replace(/\d/g, parseInt);
  • A：NaN NaN NaN
  • B：1 NaN 3
  • C：NaN NaN 3
  • D：1 NaN NaN
  • E：1 2 3

答案：B
解析：
replace() 回调函数的四个参数：

  • 匹配项
  • 与模式中的子表达式匹配的字符串
  • 出现的位置
  • stringObject 本身

如果没有与子表达式匹配的项，第二参数为出现的位置。所以第一个参数是匹配项，第二个参数是位置。
parseInt('1', 0) parseInt('2', 2) //2进制中不可能有2 parseInt('3', 4)

题目 16

纯代码题 - 图1

答案：

  1. true
  2. false
  3. "number"
  4. "function"
  5. "object"
  6. ”a1“
  7. NaN

题目 17

请选择以下代码执行结果：

  1. 'use strict';
  2. var name = 'Jay';
  3. var person = {
  4.   name: 'Wang',
  5.   pro: {
  6.     name: 'Michael',
  7.     getName: function () {
  8.       return this;
  9.     },
  10.   },
  11. };
  12. console.log(person.pro.getName());
  13. var pepole = person.pro.getName;
  14. console.log(pepole());

答案：TypeError: Cannot read property ‘name’ of undefined
解析：**严格模式下不允许指向window，console.log(pepole()) 执行时this指向undefined

题目 18

请选择以下代码执行结果：

  1. function Foo() {
  2.     getName = function() {
  3.         console.log(1);
  4.     }
  5.     return this;
  6. };
  7. Foo.getName = function() {
  8.     console.log(2);
  9. };
  10. Foo.prototype.getName = function() {
  11.     console.log(3);
  12. };
  13. var getName = function() {
  14.     console.log(4);
  15. };
  16. function getName() {
  17.     console.log(5);
  18. };
  19. Foo.getName();
  20. getName();
  21. Foo().getName();
  22. getName();
  23. new Foo.getName();
  24. new Foo().getName();
  25. new new Foo().getName();

答案：image.png
解析：

题目 19

请选择以下代码执行结果：

  1. function A() {
  2.     console.log(1);
  3. };
  4. function Func() {
  5.     A = function () {
  6.         console.log(2);
  7.     };
  8.     return this;
  9. };
  10. Func.prototype = {
  11.     A: () => {
  12.         console.log(3);
  13.     }
  14. }
  15. A();
  16. Func.A();
  17. Func().A();
  18. new Func.A();
  19. new Func().A();
  20. new new Func().A();

答案：image.png
解析：**