1,求以下代码在浏览器控制台的输出:
var foo=function(){
var secret='secret';
return{
getSecret:function(){
return secret;
},
newSecret:function(newval){
secret=newval;
}
}
}();
console.warn(foo.getSecret());
console.warn(foo.secret);
console.warn(foo.newSecret('newSecret'));
console.warn(foo.getSecret());
这里主要不理解的是第二个输出:undefined,一开始乍一看是个RHS,在作用域找不到变量是要报ReferenceError的,但是实际上输出了undefined,因为这里是对象属性的查找,不属于作用域查找,因此就算属性不存在也不会报错,即使在严格模式下也是如此。同理,console.log(window.a);和console.log(a)也是不一样的。
然后就是控制台的字符串的输出并没有引号。
如果foo后面不加()的话,会报TypeError的错误。
延伸问题:
《You don’t know JS》一书中有一段代码:
fun();
var a=true;
if(a){
function fun(){
console.log("1");
}
}else{
function fun(){
console.log("2");
}
}
按照书中的说法,这里会输出b,因为fun声明被提升到了所在作用域(作者的意思是全局作用域)的顶部;而实际上,浏览器输出的是TypeError.
这里是因为在if else语句里面的fun的“声明”其实是函数表达式,相当于var fun=function(){…};又因为var声明会提升到当前作用域顶部,因此相当于在全局作用域顶部有一句var fun=undefined;,因此在fun()这一句执行的时候,RHS在作用域找到了变量,但是这个变量是undefined,因此报错TypeError,跟书上的结果不一样。
2,关于const:
const g={b:3};
console.log(g.b);
g.b=12;
console.log(g.b);
const一旦声明必须同时初始化;
这里会正常输出,const创建一个值的只读引用,但是不意味着它所持有的值不可变,只是变量标识符不能重新分配。因此,如果const引用的是对象,则可以改变对象的内容(比如对象的属性值,但是不能重新赋值一个对象给常量)
3,
var name='world';
(function(){
if(typeof name==='undefined'){
var name='shawn';
console.log('goodbye '+name);
}else{
console.log('hello '+name);
}
})();
IIFE中的函数马上执行,当时name为undefined,因此答案是goodbye shawn
4,
function func(){
var a=b=1;
}
func();
console.log(a);
console.log(b);
这里的b是全局变量
5,
var array=[0,1,2];
var spliceArray=array.splice(0,1);
var sliceArray=array.slice(0,1);
var concatArray=array.concat("a");
console.log(array);
console.log(spliceArray);
console.log(sliceArray);
console.log(concatArray);
splice删除/添加会改变原数组长度,删除元素时返回值为删除元素组成的数组;添加元素则无返回值
slice和concat均不改变原数组,可实现数组的深拷贝;
关于深拷贝:
https://blog.csdn.net/fungleo/article/details/54931379
6,创建下拉列表
<select>
<option>aa</option>
</select>
7,CSS选择器优先级:
class=伪类
8,HTTP
9,async function的返回值是
async返回一个Promise对象,当一个async函数没有return时,则返回:Promise.resolve(undefined);
10,
function foo(x,y,a){
arguments[2]=0;
alert(a);
}
foo(1,2,3);
在严格模式下:
参数的值不会随arguments对象的值的改变而变化,arguments对象会保存函数被调用时的原始参数
在正常模式下:
对arg赋值的同时会赋值给arguments[i],反之亦然(除非没有参数或arguments[i]被删除)
因此输出为0
类似题目
function test(a,b,c){
var a=4;
console.log(a+b+c);
console.log(arguments[0]+arguments[1]+arguments[2]);
}
test(1,2,3);
输出9,9
如果加了‘use strict’
结果是:9,6
11,
if(!('a' in window)){
var a=1;
}
console.log(a)
这里出现了代码提升,var a=undefined
被提升到了全局作用域顶部,因此window里是有a这个属性的,只是值为undefined,if语句里面的内容就不会执行,因此a=undefined;
12,
function a(){
alert(this);
}
a.call(null,1);
a函数的this指向全局对象,call函数并没有什么luan用,全局对象隐式转换为字符串,调用内置的toString方法,因此输出为:[object Window]
13,哪些事件不会冒泡
abort、blur/focus、error、load/unload、mouseenter/mouseleave、resize
H5 还定义了一些新事件:
media相关事件,都不冒泡
drag相关事件 dragstart 、 drag 、 dragenter 、 dragexit 、 dragleave 、 dragover 、 drop 、 dragend均冒泡
History相关事件:popstate,hashchange冒泡,pagetransition不冒泡
Event Type Bubbling phase
abort ✗
beforeinput ✔
blur ✗
click ✔
compositionstart ✔
compositionupdate ✔
compositionend ✔
dblclick ✔
error ✗
focus ✗
focusin ✔
focusout ✔
input ✔
keydown ✔
keyup ✔
load ✗
mousedown ✔
mouseenter ✗
mouseleave ✗
mousemove ✔
mouseout ✔
mouseover ✔
mouseup ✔
resize ✗
scroll ✔
select ✔
unload ✗
wheel ✔
14,哪些css属性可以被继承
不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承:visibility和cursor。
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。
15,哪些是HTTP协议的请求头:
HTTP的头域包括通用头,请求头,响应头和实体头四个部分。
通用头域:请求和响应消息都支持的头域:
- 缓存头部Cache-Control、Pragma
- 信息性头部Connection、Date、Transfer-Encoding、Update、Via。
请求头域:Accept、Accept-Charset、Accept- Encoding、Accept-Language、Authorization、From、Host、If-Modified-Since、If-Match、If-None-Match、If-Range、If-Range、If-Unmodified-Since、Max-Forwards、Proxy-Authorization、Range、Referer、User-Agent。
响应头域:Age、Location、Proxy-Authenticate、Public、Retry- After、Server、Vary、Warning、WWW-Authenticate。
实体头域:关于实体的原信息包括:
- 信息性头部Allow、Location,
- 内容头部Content-Base、Content-Encoding、Content-Language、Content-Length、Content-Location、Content-MD5、Content-Range、Content-Type,
缓存头部Etag、Expires、Last-Modified、extension-header。
16,哪些操作会引起回流:
当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流:- 添加或者删除可见的DOM元素;
- 元素位置改变;
- 元素尺寸改变——边距、填充、边框、宽度和高度
- 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;
- 页面渲染初始化;
- 浏览器窗口尺寸改变——resize事件发生时;
如何减少回流、重绘
减少回流、重绘其实就是需要减少对render tree的操作(合并多次多DOM和样式的修改),并减少对一些style信息的请求,尽量利用好浏览器的优化策略。具体方法有:
- 直接改变className,如果动态改变样式,则使用cssText(考虑没有优化的浏览器)
- 让要操作的元素进行”离线处理”,处理完后一起更新
- 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
- 使用display:none技术,只引发两次回流和重绘;
- 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;
- 不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存
17,跨域
https://segmentfault.com/a/1190000013977060
18,哪些元素不能设置margin-top
html元素分为内联(行内)元素、块元素、置换(替换)元素、非置换元素
内联元素:不能设置宽高,有a,b,span,strong,label
块元素:能设置宽高,有div,p,ul,ol,h123456,dl
置换元素:指用作为其他内容占位符的一个元素,有select,img,input,textarea,object
非置换元素:指内容包含在文档中的元素
外边距可以应用到行内元素,规范中是允许的,不过由于在向一个行内非替换元素应用外边距,对行高(line-height)没有任何影响。因为外边距实际上是透明的。
在一个内联非替换元素下设置margin-top/margin-bottom没有视觉效果,其原因就在于行内非替换元素的外边距不会改变一个元素的行高。而对于行内非替换元素的左右边距则不是这样,是有影响的。
而为替换元素设置的外边距会影响行高,可能会使行高增加或减少,这取决于上下外边距的值。行内替换元素的左右边距与非替换元素的左右边距的作用一样。
19,
8瓶酒一瓶有毒,用人测试。每次测试结果8小时后才会得出,而你只有8个小时的时间。问最少需要()人测试?
本题的解题思路是二进制:
将毒酒编号为0~7,有三个人ABC根据每一个值转化的二进制:
十进制: 0 1 2 3 4 5 6 7
二进制:000 001 010 011 100 101 110 111
A和对应二进制从左往右数第一位为1的,B喝所有第二位为1的,C喝所有第三位为1的
根据ABC中毒情况还原二进制,此题得解。3人
20,
var a=1;
function f(){
var a=2;
eval('console.log(a)')
}
f()
eval()可以修改词法作用域,相当于在f()内有console.log(a)。当参数是一个变量声明时,相当于在f()内声明了该变量(在严格模式下失效)
21,javascript通过navigator.userAgent获取到的是
userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。
22,css的flex属性
以前都只了解css3的display:flex,这里介绍一下:
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
父元素必须为display:flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
默认值: 0 1 auto
flex-grow为0,则存在剩余空间也不放大
flex-shrink为1,则空间不足该项目缩小
flex-basis为auto,则该项目本来的大小
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
详细请看:https://blog.csdn.net/qq_26598303/article/details/52841087
23,左边固定右边自适应
1、父元素relative,左边absolute,右边marginleft。
2、父元素overflowhidden,左边floatleft,右边marginleft。
3、父元素display:flex,左边flex:0 0 100px;(等高布局,如果不想等高就align-items:flex-start)
4、父元素display:grid,grid-template-columns:100px auto;align-item:start,左边grid-column:1,右边grid-column:2
关于grid布局详细请看:
https://segmentfault.com/a/1190000008299555#articleHeader27
24,跨域
https://segmentfault.com/a/1190000013977060
25,sort()排序
arr.sort(function(){
return a-b;
});
26,实现核辐射警告标志(一个大圆里有6个60度角的扇形):canvas
//html
<div id="warning">
<canvas id="canvas" width="200" height="200"></canvas>
</div>
//css:
html,body {
width: 100%;
height: 100%;
}
#warning {
position: relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:200px;
height:200px;
}
#canvas {
position: absolute;
display:block;
}
//script
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function paint() {
ctx.beginPath();
ctx.fillStyle = '#FDCD01';
ctx.arc(100, 100, 100, 0, 2 * Math.PI, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(100, 100, 100,-1/6*2* Math.PI,0, false);
ctx.arc(100, 100, 0, 1.82 * Math.PI, .18 * Math.PI, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(100, 100, 100, 1/6*2* Math.PI, 1/3*2* Math.PI, false);
ctx.arc(100, 100, 0, 0.52 * Math.PI, .89 * Math.PI, false);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(100, 100, 100, Math.PI,-2/3 * Math.PI, false);
ctx.arc(100, 100, 0, 1.18 * Math.PI, 2/3 * Math.PI, false);
ctx.fill();
ctx.closePath();
}
paint();