题目01
如下代码在 Chome 的表现方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21 天碎片化学习题目</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<span>京城</span>
<span>一灯</span>
</body>
</html>
- A:(间隔)京城一灯
- B:京城(间隔)一灯
- C:京城一灯
- D:(间隔)京城(间隔)一灯
答案:B
解析:书写代码换行导致出现空格。
消除该空格的方法:
- 将
span
写在同一行 - 包裹
div
设置font-size:0px;
设置内部span
->font-size:16px;
题目02
如下代码在 Chome 的表现方式:
var big = "志佳老师";
var obj = {
big:"一灯",
showBig: function(){
return this.big;
}
};
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 的执行结果:
<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
请写出以下代码执行结果:
Object.prototype.a = 1;
Function.prototype.a = 2;
function yideng() {};
var ins = new yideng();
console.log(ins.a);
- A:2
- B:1
- C:0
- D:undefined
答案:D
解析:ins 是一个 Object 而不是 Function,ins.__proto__.__proto__ == Object.prototype
题目05
请写出以下代码执行结果:
var a = "yideng";
function test() {
var a = "yideng2";
var init = new Function("console.warn(a)");
init();
}
test();
- A:yideng
- B:yideng2
- C:undefined
- D:a is not defined
答案:A
解析:new Function()
这段代码的词法作用域指向全局的词法作用域,所以 a 是 yideng。
题目06
请写出以下代码执行结果:
function yideng(a,b,c) {
console.log(this.length);
console.log(this.callee.length);
}
function fn(d) {
arguments[0](10, 20, 30, 40, 50);
}
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
请写出以下代码执行结果:
const pro = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1);
})
resolve(2);
console.log("yideng");
});
pro.then(res => console.log(res));
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
请写出以下代码执行结果:
console.log({} +[]);
{} + [];
- 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
请写出以下代码执行结果:
var f = function yideng(a) {
yideng = a;
console.log(typeof yideng);
return 23;
};
f("京城一灯");
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
请写出以下代码执行结果:
function fn() {
console.log(this.length);
}
var yideng = {
length: 2,
method: function() {
fn("京城一灯");
arguments[0]();
}
}
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
请写出以下代码执行结果:
function yideng() {}
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
请写出以下代码执行结果:
var o = {
foo:function(){
console.log("京城")
},
bar(){
console.log("一灯城")
}
};
- 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
请写出以下代码执行结果:
let a = 0;
let yideng = async() => {
a = a + await 10;
console.log(a);
}
yideng();
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中显示的内容:
<textarea id="js-yideng" maxlength="1"></textarea>
<script>
document.getElementById("js-yideng").value = "4".padStart(2,0);
</script>
- A:24
- B:0
- C:4
- D:04
答案:A
解析:maxlength 只能控制用户的输入 并不能阻止 JavaScript。padStart 一共接受2个参数,第一个是用来指定字符串的最小长度,第二个参数是用来补全长度的字符串。
题目15
请选择以下代码执行结果:
"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
答案:
true
false
"number"
"function"
"object"
”a1“
NaN
题目 17
请选择以下代码执行结果:
'use strict';
var name = 'Jay';
var person = {
name: 'Wang',
pro: {
name: 'Michael',
getName: function () {
return this;
},
},
};
console.log(person.pro.getName());
var pepole = person.pro.getName;
console.log(pepole());
答案:TypeError: Cannot read property ‘name’ of undefined
解析:**严格模式下不允许指向window,console.log(pepole()) 执行时this指向undefined
题目 18
请选择以下代码执行结果:
function Foo() {
getName = function() {
console.log(1);
}
return this;
};
Foo.getName = function() {
console.log(2);
};
Foo.prototype.getName = function() {
console.log(3);
};
var getName = function() {
console.log(4);
};
function getName() {
console.log(5);
};
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
题目 19
请选择以下代码执行结果:
function A() {
console.log(1);
};
function Func() {
A = function () {
console.log(2);
};
return this;
};
Func.prototype = {
A: () => {
console.log(3);
}
}
A();
Func.A();
Func().A();
new Func.A();
new Func().A();
new new Func().A();
答案:
解析:**