1. this关键字的指向
在全局作用域中的函数中this指向全局对象 window
var x = 1; // var声明的变量会与 window 相映射,相当于 window.x === 1
function test(){
console.log(this.x);
}
test(); // 1
多数情况下,this 指向调用它所在方法的那个对象(this 的指向是在调用时决定的,而不是在书写时决定的。这点和闭包恰恰相反)
// 声明位置
var me = {
name: 'xiuyan',
hello: function() {
console.log(`你好,我是${this.name}`)
}
}
var you = {
name: 'xiaoming',
hello: me.hello
}
// 调用位置
me.hello() // xiuyan
you.hello() // xiaoming
在一个构造函数中,this 指向构造函数 new 出的实例对象
function Test(){
this.x = 1;
}
var obj = new Test();
console.log(obj.x); // 1
在箭头函数中,this指向父级上下文
var name = 'BigBear'
var me = {
name: 'xiuyan',
// 声明位置
hello: () => {
console.log(this.name)
}
}
// 调用位置
me.hello() // BigBear
通过 call,apply,bind 改变 this 指向
var x = 0;
function test(){
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply(); // 0 this指的是全局对象
obj.m.apply(obj); // 1 this指的是obj
2. 对象与面向对象
对象
属性和方法的集合叫做对象(万物皆对象)
面向对象
面向对象(Object Oriented Programming)是把事务分解成为一个个对象,然后由对象之间分工与合作。
面向对象是以对象功能来划分问题,而不是步骤
在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工
面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项目
面向对象的特性:
- 封装性
- 继承性
- 多态性
3. 事件模型:事件委托、代理?如何让事件先冒泡后捕获?
事件委托
又叫事件代理,利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
先冒泡后捕获
根据w3c标准,应先捕获再冒泡。若要实现先冒泡后捕获,给一个元素绑定两个addEventListener,其中一个第三个参数设置为false(即冒泡),另一个第三个参数设置为true(即捕获),调整它们的代码顺序,将设置为false的监听事件放在设置为true的监听事件前面即可。
4. window的onload事件和DOMContentLoaded
onload
等页面的内容全部加载完毕,包含页面的 DOM 元素、图片、css 等
DOMContentLoaded
等页面的DOM内容加载完毕,不包含 DOM 元素、图片、css 等
区别
-
onload事件是DOM事件,onDOMContentLoaded是HTML5事件。
-
onload事件会被样式表、图像和子框架阻塞,而onDOMContentLoaded不会。
5. for···in和for···of的区别
for…in
- 从遍历数组角度来说,for···in遍历出来的是key(即索引)
- 从遍历字符串的角度来说,同数组一样
- 从遍历对象的角度来说,for···in会遍历出来的为对象的key(即键名)
for…of
- 从遍历数组角度来说,for···in遍历出来的是value(即数组索引对应的值)
- for…of 遍历对象会直接报错,可以用 obj.keys() 遍历对象的键名
6. 函数柯里化(卡瑞化、加里化)?
柯里化是把接受 n 个参数的 1 个函数改造为只接受 1个参数的 n 个互相嵌套的函数的过程。
也就是 fn (a, b, c)会变成 fn (a)(b)©。
7. iframe的优缺点有哪些?
优点
-
iframe能够原封不动的把嵌入的网页展现出来;
-
如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
-
网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
-
如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
缺点
- 会产生很多页面不易管理;
- iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
- 代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。
- 很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。
- iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。
8. 查找数组重复项
首位索引法
var findRepect = function (arr = []) {
var result = [];
// 遍历数组
arr.forEach(item => {
// 如果 item 首次出现的位置和最后出现的位置的下标不同,则说明该 item 至少重复出现1次
if (arr.indexOf(item) !== arr.lastIndexOf(item) && !result.includes(item)) {
result.push(item)
}
})
return result
}
var arr = [1, 2, 45, 44, 45, 2, 89, 1, 1, 2, 1, 2, 44];
console.log(findRepect(arr)); // [1, 2, 45, 44]
该方法主要是利用了数组的两个方法 indexOf 和 lastIndexOf,indexOf 可以返回元素在数组中首次出现的位置对应的索引,lastIndexOf 可以返回元素在数组中最后出现的位置对应的索引,如果 item 首次出现的位置和最后出现的位置的下标不同,则说明该 item 至少重复出现1次。
9. 数组扁平化
递归法
var flatten_1 = function (arr = []) {
let result = []
// 遍历数组
arr.forEach(item => {
// 如果 item 是一个数组,则需要再次调用函数,执行递归
if (Array.isArray(item)) {
// 讲递归出来的结果与 result 相拼接
result = result.concat(flatten_1(item))
} else {
// 如果不是,之间 push 到 result 中
result.push(item)
}
})
// 返回结果
return result
}
var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(flatten_1(arr)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
该方法主要利用了递归的思想,通过遍历数组,然后利用 Array.isArray() 来判断 item 是否是一个数组,不是数组 push 到 result,是数组进行递归,将递归出来的结果与 result 拼接,最后的出结果
join & split
var flatten_2 = function (arr = []) {
let result = []
// 用 join 将数组分割成字符串,再用 split 将字符串拼接成数组
result = arr.join(",").split(',').map(item => {
// 将 item 转换为数字类型
return Number(item)
})
// 返回结果
return result
}
var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(flatten_1(arr)) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
该方法用 join 将数组分割成字符串,再用 split 将字符串拼接成数组,然后将 item 转换为数字类型
10. 垃圾回收机制
每隔一段时间,JS 的垃圾收集器就会对变量做 “巡检”。当它判断一个变量不再被需要之后,它就会把这个变量所占用的内存空间给释放掉,这个过程叫做垃圾回收。
在 JS 中,我们讨论的垃圾回收算法有两种 —— 引用计数法和标记清除法。