1. call
和apply
的异同
①
call
和apply
都属于Function.prototype
的一个方法,故每个方法都有call、apply
属性。
②call
和apply
第一个参数都是传入给当前对象的对象。
③call
第二个以后的参数都是传入的参数列表,而apply
的第二个参数则是参数数组,即将多个参数组合成一个数组传入。
④
//② ③
function add(...a){
console.log(this);
console.log(a)
}
let obj = {name:"zhang"};
add.call(obj,1,2,3,4);//{name:"zhang"} [1,2,3,4]
add.apply(obj,[1,2])//{name:"zhang"} [1,2]
2. 0xff^33
的结果。
^
为异或操作,0x代表16进制,即16进制的ff和十进制的33做异或操作。- 1111 1111 ^ 0010 0001 = 1101 1110(222)
3. 下面代码运行结果
<script>
var bb =1;
function aa(bb){
bb=2;//将参数bb的值覆盖为2,并不影响外面的bb值
alert(bb);
}
aa(bb);//2
alert(bb);//1
</script>
var bb =1;
function aa(cc){
bb=2;//将外部bb值覆盖
alert(bb);
}
aa(bb);//2
alert(bb);//2
4. 假设output
是一个函数,输出一行文本。下面的语句输出结果:hello world! undefined
先执行自执行函数输出hello world! ,再输出typeof undefined的结果undefined
output(typeof (function (){output("hello world!")})())
5. 下面代码中,getColor = test.getColor
只是将函数体赋值给getColor
,故当调用getColor
时,this
代表window
,而非test
,故第一次输出green
var color = 'green';
var test = {
color:'blue',
getColor:function(){
var color ='red';
alert(this.color);
}
}
var getColor = test.getColor;
getColor();//green
test.getColor()'//blue
6. Number(null)
:0
[]
、null
、"0"
通过Number
转化后结果都为0undefined
通过Number
转化后结果为NAN
- 如果
Number(data)
,data为一个数组,且数组中只有一个元素,故结果为该元素的数值。如果多余一个元素,则会返回NAN
7. 异步任务分为宏任务和微任务。当程序中出现了宏任务和微任务时,先执行微任务再执行宏任务
//输出结果:
// 1
//2
//3
//before timeout
// also before timeout
//4
setTimeout(_ => console.log(4))
new Promise(resolve => {
resolve()
console.log(1)
}).then(_ => {
console.log(3)
Promise.resolve().then(_ => {
console.log('before timeout')
}).then(_ => {
Promise.resolve().then(_ => {
console.log('also before timeout')
})
})
})
console.log(2)
8. display:block
和display:inline-block
的区别:
① 给块级元素设置上下
margin
时会选取最大,而给行内块级元素设置上下margin
时不会重叠(行内块+块级,行内块+行内块)
② 块级元素不能放置一行,行内块级元素可以放置一行
9. display:inline-block
的元素与其他元素中间有间隙的原因和解决?
原因:由于元素在
html
中是竖直排放的,故当将两个元素转换成行内块样式或者一个元素为行内块一个元素为行内样式时,在父元素font-size
不为0
时会保留空白元素(即因换行符出现的空白元素)
解决方法:
① 将父元素的font-size
设为0。缺点:增加代码量
② 将之间有空白的两个元素横排放置。缺点:代码可读性差
③ 给元素设置float:left
,缺点高度塌陷,要清楚浮动。
④ 设置父元素word-spacing:-1em;
。缺点:word-spacing
用来增加或减少单词间的空白(即字间隔,只有在两个单词间才有效,字与字之前无效),如果想要写单词会出现单词重叠。
10. 让元素水平垂直居中的几种方式
① flex
布局。缺点:兼容性不好,在使用时需要加前缀
display:flex;
justify-content:center;
align-item:center
② 给元素设置绝对定位,其top
、left
值都为父元素的一半,且其margin-left
和margin-top
分别为该元素宽、高的一半的负值。缺点:兼容性好,但是必须提前知道元素的宽高
不能给
margin
设置50%
来让其水平居中/垂直居中,是因为其百分比是按照其父元素的宽作为参考的。无论是margin-left、margin-right、margin-top、margin-bottom
都是按照父元素的宽作为参考的。设置上下外边距时不用父元素的高作为参考是因为:会造成循环。父元素的height的百分数,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加,如此循环。
position:absolute;
top:50%;
left:50%;
margin-top:-100px;//100px为该元素的高的一半
margin-left:-100px;//100px为该元素宽的一半
③ 给元素设置绝对定位,top
、bottom
、left
、right
都为0,margin:auto
。缺点:兼容性较好,但不支持IE7以下的浏览器
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
④ 给元素设置绝对定位。其top
、left
值都为父元素的一半,即50%
。在给该元素设置transform:translate(-50%,-50%);
。缺点:兼容性不好,只支持IE9+的浏览器
translate
当使用百分之设置向上向下移动时是根据自己的宽高作为参考的
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
11. let
和var
的区别
① es5
中没有块级作用域的概念,只有函数作用域和全局作用域。
{
var a = 5;
}
console.log(a);//5
function b(){
var a = 8;
}
console.log(a);//a is not defined
console.log(c);//undefined
var c=3;
② var
可以变量提升,而let
没有变量提升
console.log(c);//undefined
var c=3;
console.log(d);//Cannot access 'd' before initialization
let d=3;
③ var
能够重复声明,而let
不允许在同一作用域内重复声明同一个变量(var和let分别声明也不行)
let b=4;
var b = 0;
console.log(b)//Identifier 'b' has already been declared
var b=4;
var b = 0;
console.log(b)//0
④ 未用var
声明的变量或者用var
声明的全局变量都可通过window
对象获取到,而用let
声明的变量不能通过window
对象获取到。
//①
let b=4;
console.log(window.b)//undefined
//②
var b=4;
console.log(window.b)//4
⑤ let
有暂时性死区:只要块级作用域存在let命令,它所声明的变量就绑定到这个区域,不再受外部的影响。
- 暂时性死区使得typeof操作不一定安全,所以在let声明之前,使用typeof操作符会报错。而在let出现之前,typeof是百分之百安全的,永远不会被报错,即使变量没有被声明,typeof也会返回undefined。
- 暂时性死区的本质:只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
12. HTML5使用meta标签自适应
13. 可被继承属性
颜色、字体、行高、行间距、可见性、字间距、对齐方式以及列表的样式
字体系列属性 | 文本系列属性 | 元素可见性 | 列表布局属性 |
---|---|---|---|
font-size |
color |
visibility |
list-style |
font-family |
text-indent |
list-image |
|
font-weight |
text-align |
list-style-type |
|
font-style |
line-height |
list-style-position |
|
word-spacing |
|||
letter-spacing |
14. em
、rem
、px
、pd
、rpx
- 小程序的
rpx
是通过不同设备的不同分辨率(分辨率的单位是物理像素)进行计算的- 物理像素:指设备能控制显示的最小物理单位,意指显示器上一个个的点。从屏幕在工厂生产出的那天起,它上面设备像素点就固定不变了。每个设备的物理像素不一定相同。
css
中的px
概念是逻辑像素,dpr = 物理像素/逻辑像素
(dpr = 分辨率/视口大小
),dpr
越大,显示的内容会越大。css像素和物理像素并不是1:1的关系- 当设置相同的
css px
大小在不同设备看起来却大小不同是因为设备的分辨率不同。更准确地来说是因为dpr
不同,dpr
越大,就代表一个css
像素对应更多的物理像素,这样一个css
像素就越大。
14. h5和c3新特性
15. BOM
和DOM
以下的图来源于DOM与BOM
① BOM
:
Browser Object Mode
:浏览器对象模型。
包括:
Window
对象:浏览器中打开的窗口,顶层对象Navigator
对象:浏览器的相关西悉尼Screen
对象:客户端显示屏幕的信息History
对象:用户在浏览器窗口中访问过的URL
Location
对象:当前URL的相关信息
window
对象中包含对BOM
中其他对象的只读引用以及Document
对象的只读引用
Window
对象的思维导图
② DOM
:
Document Object Mode
:文本对象模型- HTML文档可以说由节点构成的集合,DOM节点有:
① 元素节点:标签结点
② 文本节点:向用户展示的内容文本。
③ 属性节点:元素属性,如a标签的链接属性href。
包括
Document
对象,每个被载入浏览器的HTML文档都会成为Document
对象;是Window
对象的一部分,可以通过window.document
属性对其进行访问。Document
是DOM的根结点Element
对象:结点(元素结点(标签节点)、文本结点、注释结点)Attribute
对象:HTML
属性Event
对象:事件对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>DOM</title>
</head>
<body>
<h2><a href="http://www.baidu.com">javascript DOM</a></h2>
<p>对HTML元素进行操作,可添加、改变或移除css样式等</p>
<ul>
<li>Javascript</li>
<li>DOM</li>
<li>CSS</li>
</ul>
</body>
</html>
上述代码的DOM树
DOM
思维导图
③ BOM
和DOM
的关系
BOM
中的Window
对象包含了DOM
中的根结点Document
对象,而访问DOM
中的其他结点都需要Document
对象,故BOM
包含了DOM
。- 浏览器提供出来给予访问的是
BOM
对象,从BOM
对象再访问到DOM
对象,从而js可以操作浏览器以及浏览器读取到的文档(html
)- DOM描述了处理网页内容的方法和接口,BOM描述了与浏览器进行交互的方法和接口。