JavaScript基础知识总结

内容简介：
1）DOM和BOM
2）数据类型（基本数据类型、引用类型）
3）原型
4）执行环境及作用域
5）事件
6）宏任务和微任务

image.png

一、DOM和BOM
1.BOM（浏览器对象模型）
BOM 的核心对象是window，它表示浏览器的一个实例。所有在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。

var age = 29;
function sayAge() {
    console.log(this.age);
}
console.log(window.age); //29
sayAge(); //29
window.sayAge(); //29

1） window对象
2） location 对象：包含有关当前 URL 的信息


image.png

3）navigator 对象：包含有关浏览器的信息
navigator.userAgent可用来判断pc端还是移动端。
4）screen 对象：包含有关客户端显示屏幕的信息
screen.width返回显示器屏幕的宽度。
5）history 对象：保存着用户上网的历史记录


image.png
  1. DOM（文档对象模型）
    DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>
image.png

常用的DOM操作：

//查找节点
document.getElementById("id");// 通过id查找，返回唯一的节点
document.getElementsByClassName("class");// 通过class查找，返回值为nodeList类型
document.getElementsByTagName("div");// 通过标签名查找，返回值为nodeList类型

//创建节点
document.createElement();//创建元素
 
//添加节点
var ele = document.getElementById("my_div");
var oldEle = document.createElement("p");
var newEle=document.createElement("div");
ele.appendChild(oldEle);

//删除节点
ele.removeChild(oldEle);

//替换节点
ele.replaceChild(newEle,oldEle);

//插入节点
ele.insertBefore(oldEle,newEle);//在newEle之前插入 oldEle节点

问题：什么是动态脚本？

二、数据类型
JavaScript有5种基本数据类型：String、Boolean、Number、Undefined和Null。还有1 种复杂数据类型Object。（PS:引用类型和基本数据类型有什么区别？）


image.png

typeof用于检测给定变量的数据类型：

var a = [1,2,3],
b = 34,
c = 'adsfas',
d = function(){console.log('我是函数')},
e = true,
f = null,
g = {user:'admin'}
h;
console.log(typeof(a));//object
console.log(typeof(b));//number
console.log(typeof(c));//string
console.log(typeof(d));//function
console.log(typeof(e));//boolean
console.log(typeof(f));//object
console.log(typeof(g));//object
console.log(typeof(h));//undefined

instanceof用于判断该对象是否是某个类的实例

var arr = []
arr instanceof Array // true
Array.isArray(arr) //true

1.String类型
由双引号或单引号包裹的的字符序列。
indexof()返回某个指定的字符串值在字符串中首次出现的位置
concat()连接两个或多个字符串
slice()截取字符串
toLowerCase()把字符串转换为小写

  1. Boolean类型


    image.png

  2. Number类型
    数值范围Number.MIN_VALUE ~ Number.MAX_VALUE
    parseFloat()将字符串转成浮点数
    parseInt()将字符串转成整数（十进制，二进制，八进制和十六进制）
    isInteger()判断传递的值是否为整数
    isNaN()判断传递的值是否为 NaN
    toFixed()返回指定小数位数的数值
    和Number相关的是，JavaScript对象中内置的Math对象，提供了很多数学常数和函数的属性和方法。

  3. Null和Undefined类型
    它们都是只有一个值的数据类型（null、undefined）
    null表示"没有对象"，即该处不应该有值。
    undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。

console.log(undefined==null) //true
console.log(undefined===null) //false

5.Object类型
JavaScript中的顶层类型，所有类的父类。创建 Object 实例的方式有两种：构造函数法和对象字面量。
Object.freeze(obj) 冻结对象
Object.assign(target,source1,source2,...) 合并对象
Object.defineProperties(obj,props) 在一个对象上定义新的属性或修改现有属性，并返回该对象
obj.hasOwnProperty('name') 判断对象是否具有指定的属性
Object.getOwnPropertyNames(obj) 返回所有自身属性组成的数组
Object.keys(obj)、Object.values(obj)
数组实例的方法：


image.png

三、原型
定义：我们创建的每个函数都有一个 prototype（原型）属性，这个属性是一个指针，指向一个对象，这个对象包含可以由特定类型的所有实例共享的属性和方法。


image.png
let arr=[1,2,3]
arr.push(4)
console.log(arr) //[1, 2, 3, 4]
console.log(arr.hasOwnProperty('length')) //true
console.log(Array.prototype)
image.png

原型作用之一：数据共享，节省内存空间
原型作用之二：实现继承

/*******************原型链写法************************/
function Animal(){ 
  this.species='动物'
}
Animal.prototype.shout=function(){
  console.log('shout')
}
function Cat(name,color){
  this.name=name
  this.color=color
}

Cat.prototype=new Animal() //如果Cat的原型指向一个Animal的实例，那么Cat的实例就能继承Animal
let cat=new Cat("大黄","黄色")
console.log(cat.name,cat.color)
cat.shout()

/*******************class写法************************/
class Animal{
  constructor(){
    this.species='动物'
  }
  shout(){
    console.log('shout')
  }
}
class Cat extends Animal{ //通过extends关键字实现继承
  constructor(name,color){
    super() // 子类的构造方法中必须先调用super方法
    this.name=name
    this.color=color
  }
}
let cat=new Cat("大黄","黄色")
console.log(cat.name,cat.color)
cat.shout()

四、执行环境及作用域
1）执行环境有全局执行环境（全局环境）和函数执行环境（局部环境）之分。
2）函数的局部环境不仅有权访问函数作用域中的变量，而且有权访问其父环境，乃至全局环境（即内部环境可以通过作用域链访问所有的外部环境）。
3）全局环境只能访问在全局环境中定义的变量和函数，而不能直接访问局部环境中的任何数据。

var color = 'red'
function changeColor () {
  var size = 'big'
  color = 'yellow'
}
changeColor()
console.log(color) //'yellow'
console.log(size) // 报错

4）闭包：函数嵌套函数，内部函数就是闭包
正常情况下，函数执行完成，内部变量会销毁（释放内存空间）
存在闭包时，内部函数没有执行完成，外部函数中的变量不会被销毁

function outerFun () {
  let a = 10
  function innerFun () { //innerFun就是闭包函数 
    console.log(a)
  }
  return innerFun
}
let fun = outerFun()
fun()

应用：闭包可以封装一段代码

var modules = (function () { //自执行函数
  var a = 1
  function add () {
    return ++a
  }
  return {
    add
  }
})()
console.log(modules.add())

五、事件
什么是事件？
事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器来监听事件，以便事件发生时执行相应的代码。
1.注册事件

<div id="div1" onclick="fn()">点击我调用方法</div>
<script>
    function fn() {
        alert('事件函数被调用')
    }
    var div1 = document.getElementById('div1');
    div1.onclick = fn;
    //div1.addEventListener('click', fn);
</script>

2.事件类型
1）UI事件：如load、resize、scroll事件

window.onload=function(){
  //页面加载完毕后执行
}

2）鼠标事件
3）键盘事件
4）焦点事件：当元素获得或失去焦点时触发

3.事件流
事件流描述的是从页面中接收事件的顺序。


image.png

image.png
  1. js阻止事件冒泡和默认事件(W3C标准)
    e.stopPropagation()
    e.preventDefault() //目标元素的默认行为，比如a标签会跳转链接，form会提交表单
    （PS：小程序的bindtap和catchtap）

六、宏任务和微任务
宏任务：script(整体同步代码)，setTimeout，setInterval
微任务：promise.then()


image.png
setTimeout(function () {
  console.log('1')
});

new Promise(function (resolve) {
  console.log('2');
  resolve();
}).then(function () {
  console.log('3')
});

console.log('4');
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容