什么是提升?什么是暂时性死区?var、let 及 const 区别?
- 当我们在一个作用域使用var声明一个变量的时候,会首先声明这个变量在当前作用域(undefined)的最上面,然后在进行赋值。
console.log(a) // undefined
var a = 1;
复制代码
- var 声明的变量会发生提升的情况,其实不仅变量会提升函数也会被提升。并且函数提升(声明加定义同时完成)优先于变量提升。
console.log(a) // ƒ a() {}
function a() {}
var a = 1
复制代码
- let 和 const 声明变量,变量并不会被挂载到 window 上。
var a = 1
let b = 1
const c = 1
console.log(window.b) // undefined
console.log(window. c) // undefined
function test(){
console.log(a) // 报错 a is not defined
let a
}
test()
复制代码
- 使用let、const声明变量的时候,会存在暂时性死区 也就是说声明之前是无法使用变量的 会报错。
原型如何实现继承?Class 如何实现继承?Class 本质是什么?
组合继承(call+原型继承)
子类会存在父类的公有属性和私有属性。
function Parent(value) {
this.val = value
}
Parent.prototype.getValue = function() {
console.log(this.val)
}
function Child(value) {
Parent.call(this, value)
}
Child.prototype = new Parent()
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true
复制代码
寄生组合式继承
父类的原型赋值给了子类,并且将构造函数设置为子类,这样既解决了无用的父类属性问题,还能正确的找到子类的构造函数
function Parent(value) {
this.val = value
}
Parent.prototype.getValue = function() {
console.log(this.val)
}
function Child(value) {
Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
constructor: {
value: Child,
enumerable: false,
writable: true,
configurable: true
}
})
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true
复制代码
class 继承(class的本质就是函数)
class 实现继承的核心在于使用 extends 表明继承自哪个父类,并且在子类构造函数中必须调用 super(super相当于调用父类的构造函数)
class Parent {
constructor(value) {
this.val = value
}
getValue() {
console.log(this.val)
}
}
class Child extends Parent {
constructor(value) {
super(value)
this.val = value
}
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true
复制代码
为什么要使用模块化?都有哪几种方式可以实现模块化,各有什么特点?
模块化的好处
- 解决命名冲突
- 提供复用性
- 提高代码可维护性
立即执行函数
(function(globalVariable){
globalVariable.test = function() {}
// ... 声明各种变量、函数都不会污染全局作用域
})(globalVariable)
复制代码
AMD(requireJs)和CMD(seaJs)
// AMD 依赖前置
define(['./a', './b'], function(a, b) {
// 加载模块完毕可以使用
a.do()
b.do()
})
// CMD 依赖就近
define(function(require, exports, module) {
// 加载模块
// 可以把 require 写在函数体的任意地方实现延迟加载
var a = require('./a')
a.doSomething()
})
复制代码
CommonJs(modele.exports require)
exports = module.exports ,并且require默认导出的是module.exports,所以对两者赋值要特别小心。
// a.js
module.exports = {
a:1
}
// b.js
let module = require('./a.js')
module.a // 1
复制代码
ES Module
- CommonJS 支持动态导入,也就是 require(${path}/xx.js),后者目前不支持,但是已有提案
- CommonJS 是同步导入,因为用于服务端,文件都在本地,同步导入即使卡住主线程影响也不大。而后者是异步导入,因为用于浏览器,需要下载文件,如果也采用同步导入会对渲染有很大影响
- CommonJS 在导出时都是值拷贝,就算导出的值变了,导入的值也不会改变,所以如果想更新值,必须重新导入一次。但是 ES Module 采用实时绑定的方式,导入导出的值都指向同一个内存地址,所以导入值会跟随导出值变化
- ES Module 会编译成 require/exports 来执行的
// 引入模块 API
import XXX from './a.js'
import { XXX } from './a.js'
// 导出模块 API
export function a() {}
export default function() {}
复制代码
Proxy 可以实现什么功能?(vue3.0实现响应式完全是采用了proxy,而不是原来的Object.defineProperty)
// target 代表需要添加代理的对象,handler 用来自定义对象中的操作
let p = new Proxy(target, handler)
复制代码
// Proxy 来实现一个数据响应式
let onWatch = (obj, setBind, getLogger) => {
let handler = {
get(target, property, receiver) {
getLogger(target, property)
return Reflect.get(target, property, receiver)
},
set(target, property, value, receiver) {
setBind(value, property)
return Reflect.set(target, property, value)
}
}
return new Proxy(obj, handler)
}
let obj = { a: 1 }
let p = onWatch(
obj,
(v, property) => {
console.log(`监听到属性${property}改变为${v}`)
},
(target, property) => {
console.log(`'${property}' = ${target[property]}`)
}
)
p.a = 2 // 监听到属性a改变
p.a // 'a' = 2
复制代码