JavaScript基础知识复习

数据类型

基本类型

1. String—字符串
2. Boolean—布尔类型
3. Number—数字类型
4. Null
5. undefined
6. ES6新增：Symbol—用于创建一个独一无二的值
7. ES10新增：BigInt—表示比较大的数值

复杂类型

Object(无序键对值)：包括Array，Function，Date3种常用的引用类型

存储类型

• 基本类型存储在栈中，占据空间小，大小固定，频繁使用
• 复杂类型存储同时存储在堆和栈中，值存储在堆中，指针存储在栈中，指针存储着值在堆的地址，赋值给其他对象时复制的是指针，指向同一个内存地址，占据空间大，大小不固定，可修改长度

null和undefined的异同

• 区别：Null和Undefined都只用一个值，就是null和undefined，null表示空值，不占存储空间，undefined表示未定义的值，存储在栈中
• 数据类型判别

判断类型的方法

typeof

1. 判断Null时会是object，其他都正常
   

2. 判断Function会是function，其他都是object
   

instanceof

instanceof可以精准判断引用类型，主要原理是判断构造函数的prototype属性是否在该实例的原型链上

constructor

主要用于判断函数，当一个函数被定义时，会创建一个prototype属性，在该属性下会添加一个consturctor属性，指向构造函数
结构类型

• fn
  • prototype
    • constructor

判断结果

注意

• null和undefined是无效对象，不存在constructor属性
• peototype属性很容易被改写，故constructor属性很容易丢失，丢失后会指向Object(Object是所以引用类型的父类)

function F(){}
F.prototype = {}
let f = new F()
f.constructor === F // false
console.log(f.constructor) //function Object(){..}

apply或call

apply和call的功能是改变this指向

apply使用方法类似

let、var和const的区别

• 变量提升：var存在变量提升，在声明前可使用，值为undefined；let和const不存在变量提升，在声明前不可使用
• 块作用域：var只有全局作用域和函数作用域，无块作用域，let和const是块作用域，只在块作用域中可操作
• 是否可修改：const是常量，不允许修改
• 暂时死区：let和const存在暂时性死区，声明前不可使用，var不存在暂时性死区
• 不可重复声明：let和const不可重复声明，var可重复声明
  

作用域和作用域链

作用域

变量的可操作范围

作用域链

当查找某变量时，会先查找他的定义范围，若在当前作用域内，直接返回，若不在，则向父作用域链查找，若父作用域链不存在，则向全局作用域查找。这种作用域嵌套机制称为作用域链

this指向

主要分为new绑定、隐式绑定、显式绑定、默认绑定

• new绑定：this在new中使用，this指向new的实例
• 显式绑定：通过bind、apply、call改变this指向
• 隐式绑定：this在某个上下文对象中使用，this指向该对象
• 特殊情况：this指向undefined或null，默认指向全局
• 箭头函数：箭头函数没有this，该this指向上一个作用域
• 默认绑定：以上皆不是，则是默认绑定，一般指向window

for…of…(ES6)

可迭代类型有Array，Map，Set，String，arguments，具有iterator属性，可遍历数组，不可遍历对象

for…in…(ES5)

可遍历对象下标，不能直接遍历属性值，可以中断循环

原型链

let arr=new Array()

arr中存在一个_proto_属性，存储arr的属性和方法，指向Array的prototype属性，存储Array的属性和方法。arr存在一个constructor属性，指向Array
该原型链为：arr–>Array–>Object–>null

自定义原型方法

事件

事件模型

1. DOM0级模型：无事件流概念，直接在网页中监听事件，兼容所有浏览器
2. IE模型：一共分为事件处理阶段、事件冒泡阶段两过程，通过 attachEvent 来添加监听函数
3. DOM02级模型：一共分为事件捕获阶段、事件处理阶段、事件冒泡阶段三过程，事件绑定的函数是 addEventListener

事件委托

指一个元素把事件委托给另外一个元素，一般是委托给外层元素，当事件响应在绑定元素上时，事件会冒泡给外层元素，外层元素执行事件

事件传播

1. 捕获阶段：window到目标元素
2. 目标阶段：目标元素执行
3. 事件冒泡：目标元素到window

事件捕获

事件发生在DOM元素上，一直执行到目标元素，顺序为：window-->document-->html-->body-->目标元素

事件冒泡与事件捕获相反

阻止事件冒泡

W3C：e.stopPropagation()
IE：window.event.cancelBubble=true

window.event?window.event.cancelBubble=true:e.stopPropagation

阻止默认事件

W3C：e.preventDefault()
IE：e.returnValue=false

window.event?window.event.returnValue=false:e.preventDefault()

js延迟加载方法

js会阻碍dom元素的解析，故等dom元素加载完成后在加载js

1. 将script标签放在最底部
2. 动态加载script标签，等dom加载完之后在创建script标签
3. script中定义defer属性
4. script定义async属性

模块化开发

提高代码的复用率，向外暴露特定的函数和属性

实现方案

1. CommonJs：通过require导入文件，使用module.export输出变量
2. ES6：import和require输入输出

v-model和v-bind的区别

1. v-model：主要用于表单数值绑定，如input绑定，可以绑定基本类型和数组
2. v-bind：可用于所有元素属性的绑定，一般简写成:，后面跟绑定的属性名，如:class，:key，:obj，:array，:src等，几乎可以支持所有类型

Object.is()，==和===的区别

1. ==：等同，先进行类型转换再比较，值相等，就返回true

• 数字和字符串比较，会先将字符串转换成数字，然后比较结果
• null==undefined，返回true
• 其他类型和布尔值比较，布尔值会转换成数字，然后进行其他规则的比较
• NaN和所有值比较，包括NaN本身，都返回false

2. ===：相等，直接比较不进行类型转换，类型不同，值相同，返回false
3. Object.is()：ES6新增，与===使用规则基本一致。主要区别为：
   

apply、call和bind

1. apply：apply(this,arr)
2. call：call(this,…args)
3. bind：apply(this,…args)

const dog = {
    name: '狗',
    action(...args){
        console.log(this.name)
        console.log('this==>', this)
        console.log('args==>', args)
    }
}

const cat={
    name:'猫',
    action(...args){
        console.log(this.name)
        console.log('this==>',this)
        console.log('args==>',args)
    }
}

console.log('-----apply------')
cat.action.apply(dog,['111111','222222'])
console.log('------call-------')
cat.action.call(dog,'aaaaa','bbbbb')
console.log('-------bind-------')
let bind=cat.action.bind(dog,'00000','444444')
bind('99999')
console.log('-----old-this-----')
cat.action()

结果