2021-04-22
30道大概率会考到的题( 11-15题)
本章内容
- 11，箭头函数特点
- 12，CSS盒模型
- 13，Vue组件data为什么必须是函数
- 14，JS判断数组的方法
- 15，JS的宏任务、微任务
11，箭头函数特点
1，箭头函数是匿名函数，不能作为构造函数
let Person = () => {
// ...
}
let p1 = new Person() // Person is not a constructor
2,箭头函数不能使用arguments, 用rest取代
let foo = (...arr) => {
console.log(arr)
}
foo([1, 2, 3, 4, 5])
// [0, 1, 2, 3, 4, 5]
3, 箭头函数默认绑定外层this, 不能用call、bind、apply等修改this.
3.1, 对象中函数调用的this
let obj = {
name: 'Jerry',
sayHello: function() {
console.log(this.name)
}
}
obj.sayHello() // Jerry
obj.sayHello.call(obj) // Jerry
// this 指向 obj
以上代码，第1种调用方法是第2种调用方法的语法糖，第2种调用方法是最完整的调用方法。第二种调用方法可以修改this指向
let obj = {
name: 'Jerry',
sayHello: function() {
console.log(this.name)
}
}
let obj1 = {
name: 'Tom'
}
obj.sayHello.call(obj1) // Tom
// this 指向 obj1
3.2，构造函数中this
function Person(name) {
this.name = name
}
let p1 = new Person("Jerry") // this 指向 p1对象
3.3，window.setTimeout()/setInterval()函数中的this
let obj = {
name: 'Jerry',
sayHello: function() {
window.setTimeout(function() {
console.log(this) // window对象
})
}
}
obj.sayHello.call(obj)
3.4，箭头函数this
let obj = {
name: 'Jerry',
sayHello: () => {
console.log(this) // window
}
}
obj.sayHello()
let obj = {
name: 'Jerry',
sayHello: () => {
console.log(this)
}
}
obj.sayHello.call({
name: 'Tom'
})
let obj = {
name: 'Jerry',
sayHello: function() {
window.setTimeout(_ => {
console.log(this) // obj
})
}
}
obj.sayHello.call(obj)
// window.setTimeout()中函数里的this默认是window，可以通过箭头函数改变this指向
12，css盒模型
css盒模型：W3C(标准)盒模型、IE盒模型
标准盒模型: 总宽/高度 = 内容 + padding + border + margin
image
IE盒模型：总宽/高 = 内容(内容包含padding+border) + margin
image
IE盒模型和W3C盒模型区别是IE盒模型的内容包含了border和padding
13，Vue组件data为什么必须是函数
new Vue()实例中, data可以直接是一个对象，而在vue组件中, data必须是一个函数，因为组件是可以复用的,JS里对象是引用关系, 如果组件data是一个对象, 子组件中的data属性值会互相污染, 产生副作用。
所以组件中的data必须是一个函数, 每个实例可以维护一份被返回对象的独立拷贝。new Vue实例不会被复不存在以上问题。
14，js判断数组的方法
- Object.prototype.toString.call()
- instanceof
- Array.isArray()
Object.prototype.toString.call()
能准确的检测所有的数据类型
每一个继承Object的对象都有一个toString方法，如果toString方法没有被重写，会返回[Object type], type为对象的类型。
const arr = ["a", "b"]
arr.toString() // => "a, b"
Object.prototype.toString.call(arr) // => "[Object Array]"
instanceof
能检测array、function、object类型
instanceof用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上，即 A 是否为 B 的实例：A instanceof B
1 instanceof Number // false
'str' instanceof String // false
true instanceof Boolean // false
[1,2,3] instanceof Array // true
function () {} instanceof Function // true
{} instanceof Object // true
instanceof 的缺点：是否处于原型链上的判断方法不严谨
instanceof 方法判断的是是否处于原型链上，而不是是不是处于原型链最后一位，所以会出现以下情况：
var arr = [1, 2, 3]
arr instanceof Array // true
arr instanceof Object // true
function fn() {}
fn instanceof Function // true
fn instanceof Object // true
所有原型链的尽头都是Object
Array.isArray()
用于判断对象是否为数组
Array.isArray()是ES5推出的，IE8及以下不支持此API，使用时应考虑兼容
Array.isArray([1, 2, 3, 4]) // true
Array.isArray({a: 1}) // false
Array.isArray(new Array) // true
Array.isArray("string") // false
if(typeof Array.isArray != 'function') {
Array.isArray = function(obj){
return Object.prototype.toString.call(obj) == '[object Array]'
}
}
15，Js的宏任务、微任务
JS的执行机制：附图做参考(原文地址：https://www.jianshu.com/p/0d2d42fbe1dc)
JS执行机制
上图内容概括为：
- 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数
- 当指定的事情完成时，Event Table(事件表)会将这个函数移入Event Queue(事件队列)。
- 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
- 上述过程会不断重复，也就是常说的Event Loop(事件循环)。
JS的宏任务、微任务：
ES6规范中，宏任务由宿主发起，微任务由JS自身发起。
在ES5之后，JS引入了Promise，不需要浏览器，JS引擎自身也能发起异步任务了
image
微任务执行时机比宏任务要早
宏任务和微任务
理解JavaScript执行机制实例：
// 示例1
console.log(1)
setTimeout(() => {
console.log(2)
}, 0)
new Promise((resolve) => {
console.log(3)
resolve()
})
.then(() => {
console.log(4)
})
.then(() => {
console.log(5)
})
console.log(6)
以上代码输出：1 3 6 4 5 2
// 示例2
console.log(1)
async function async1() {
await async2()
console.log(2)
}
async function async2() {
console.log(3)
}
async1()
setTimeout(function() {
console.log(4)
}, 0)
new Promise(resolve => {
console.log(5)
resolve()
})
.then(function() {
console.log(6)
})
.then(function() {
console.log(7)
})
console.log(8)
以上代码输出：1 3 5 8 2 6 7 4
