JS部分笔记整理

JavaScript笔记

1. JS变量

1.1 数据类型及其判定

number、string、boolean、null、undefined

object、function

注意：null、数组、对象无法用typeof检查。他们返回的均是"object"。

注意，使用 == 判定null和undefined，是true，用===判定才是false。

• 判定null

var tmp = null
if(!tmp && typeof(tmp) != "undefined" && tmp != 0) {
	console.log("null")
}
/*
解释： 
!tmp为true，说明tmp可能为undefined、数字0、null。排除了其他所有情况。
typeof(tmp) != "undefined"，说明tmp不是undefined。排除了undefined
tmp != 0，排除0的情况。
那么就只剩null了。
*/

• 判定undefined

var tmp = undefined
if(typeof(tmp) == "undefined") {
    console.log("undefined")
}

• 判定NaN

var tmp = 0/0
if(isNaN(tmp)) {
	console.log("NaN")
}

NaN与任何值（包括其自身）相比得到结果均为false，所以不能用或=。

• 判定undefined和null

var tmp = undefined
if(tmp == undefined) {
	console.log("null or undefined")
}

if(tmp == null) {
    console.log("null or undefined")
}

注意： null == undefined为true。null === undefined为false

• 判定null或undefined或NaN

var tmp = null
if(!tmp) {
	console.log("null or undefined or NaN")
}

• 判定数组和对象

使用instanceof

var obj = {name: 'lee'}
var arr = ['red', 'blue']
console.log(obj instanceof Object)	// true
console.log(arr instanceof Array)	// true
console.log(obj instanceof Array)	// false

注意：数组也是对象。

现在有了方法

var arr = ['red', 'blue']
var res = Array.isArray(arr)	// true

1.2 从var到let、const

var	let&const
没有块级作用域	有块级作用域
都是可变量	let变量，const常量
可以重复声明	不可重复声明

//...
var a = 5

//******************************************

//...
let a = 5

对于上面的情况：

var有变量提升，创建和初始化都被提升，赋值为undefined。在该行代码之前访问a会得到undefined。

let的创建被提升，初始化没有。从初始代码到定义的这一行代码之间，为”暂时性死区“，直到第一次赋值才初始化，在改行代码之前访问a会报错。

此外，const常量并不是不可变。它只是保证了指针不变。但指针所指向内容的东西，是可以变化的！

1.2.1 执行上下文（变量提升、函数提升）

2. JS函数

2.1 函数使用与this

• call和apply和bind

这些函数是干什么的？

强行改变this指向（强行用其他对象来调用一个函数）

相似之处：都是用来改变this的指向的，第一个参数都是this要指向的对象（如果是null或undefined就默认指向window），可以利用后续参数传参。

区别：

apply和call会让当前函数立即执行，而bind会返回一个函数，后续需要的时候再调用执行。

apply接受两个参数，第一个参数是绑定给this的值，第二个参数是一个参数数组。

call第一个参数是绑定给this的值，后面是一个参数列表。

bind方法不会立即执行，返回一个函数可供调用。

call和apply都属于Function.prototype的方法，每个对象实例都有这两个属性。它们的作用一样，只是使用方式不同（参数列表不同）。

foo.call(this, arg1, arg2, arg3)

等价于 foo.apply(this, arguments)

等价于 this.foo(arg1, arg2, arg3)

修改当前this作用对象。

函数中的this，指向的是调用该函数的对象。任何函数本质上都是通过对象来调用的，没显式指定的话，那就是window来调用的。

箭头函数中的this是捕获别人的，捕获的是它声明时所处作用域的this，且是静态的，一经捕获不再改变。

注意，函数只要是被直接调用，那么this就是window。即便函数是内部函数，也不妨碍它直接调用。

2.2 回调函数

我们定义的、我们没有调用、它最终执行了。满足这三个条件，就是回调函数。

例子：

• 定时器回调函数setTimeout等

• DOM事件回调函数

• ajax请求回调函数

• 生命周期回调函数

2.3 ES6新增函数filter、map、reduce、forEach

待整理

2.4 JS闭包

一个嵌套的内部函数 引用了 嵌套的外部函数的变量（或函数）时，就产生了闭包。

function f1(){
	// 此时闭包就已经产生。因为函数提升，内部函数的对象已经创建
	var a = 1
	function f2(){
		console.log(a)
	}
	f2()
}
f1() // 外部函数必须调用了才行

外部函数必须调用。内部函数可用可不用。通过浏览器可以看到细微区别，除了local和global域之外，新增了一个域closure就是闭包中的a。

闭包的作用：使得函数内部的局部变量在函数执行完毕后，仍然存活在内存中。让函数外部可以通过给定接口操作内部的数据。

如何让一个闭包死亡？

让包含闭包的函数对象成为垃圾对象，闭包自然死亡。即赋值一个null。

2.5 ES6箭头函数

(arg1, arg2) => {/* 函数体 */}

// 当只有一个参数、一行代码时的简洁写法：
arg => console.log(arg)

this的区别。

3. JS面向对象

3.1 构造函数

3.2 原型链

3.2.1 显式原型与隐式原型

所有构造函数都有一个显式原型对象，由prototype属性得到。

所有对象都有一个隐式原型，由属性__proto__得到。

万物之终极——Object.prototype，它的隐式原型对象是null。

3.2.2 原型链分析

一切函数都是Function来"new"出来的，包括Function自己，他们的__proto__都指向了Function.prototype。

一切实例对象的_proto_ 指向他们构造函数的prototype。（Object实例对象也不例外，指向构造函数Object()的prototype即Object.prototype）——

而这些构造函数的prototype的__proto__指向Function.prototype。

Function.prototype的__proto__指向Object.prototype。

3.2.3 instanceof探究

A instanceof B

实现方式：

函数B的显式原型对象 在 A的隐式原型链上，即判定为true，否则为false

3.3 继承

function Person(name, age, height){
    this.name = name
    this.age = age
    this.height = height
}

Person.prototype.sayHello = function(){
    console.log("hello")
}

function Student(name, age, height, score){
    Person.call(this, name, age, height)
    this.score = score
}

Student.prototype = new Person()
Student.prototype.constructor = Student

3.4 ES6的新写法

ES6引入了新的关键字，使得javascript变得更像java，继承和实例化也不必像原先那样按照原型链来。

class Person{
    constructor(name, age, height){
        this.name = name
        this.age = age
        this.height = height
    }
    
    sayHello: function(){
        console.log("hello")
    }
}

class Student extends Person{
    constructor(name, age, height, score){
        super(name, age, height)
        this.score = score
    }
    
    showScore(){
        console.log('score' + this.score)
    }
}

4. 异步处理

4.1 ES6的promise

Promise的出现及作用：

为了解决“回调地狱”。它使得异步代码写得更清楚，更优雅。

new Promise((resolve, reject) => {
	// 异步代码
	resolve();	// 调用成功函数，执行then

}).then(res => {
	// 执行成功回调
}).catch(err => {
	// 执行失败回调
})

5. 进程和事件机制

5.1 概述

浏览器内核：

主线程：

js引擎模块：负责js程序的解释与运行

html、css文档解析模块：负责页面文本的解析

DOM/CSS模块：负责DOM/CSS在内存中的相关处理（内存中是一个DOM对象树）

布局和渲染模块：负责页面的布局和效果的绘制（内存中对象）

---

……

---

分线程：

定时器模块：负责定时器管理

DOM事件响应模块：负责事件管理

网络请求模块：负责ajax请求

---

解释：

比如：页面如何显式？

文档解析模块：一个html文档，经过解析，获得解析后的文本。

DOM/CSS模块，在内存中将解析了的文本处理成对象（包括位置、大小等信息）

布局和渲染模块：把对象渲染并显示。

5.2 事件对象及冒泡

在IE8中，响应函数被触发时，浏览器不会传递事件对象。无法直接访问event

在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的。

需要window.event。

所以有这样的兼容性处理写法：

event = event || window.event
// ||找的是true，返回的是原值。
// 如果第一个是true，直接返回event，否则就window.event

bubble。所谓的冒泡就是事件的向上传导，当后代元素上的事件被触发，其祖先元素的相同事件也会触发。

一路冒泡冒到document。

比如p，及其父元素div，及其父元素body都有一个onclick事件。我们在p上一点，会依次触发三个元素的事件处理函数。

大多数时候冒泡都是有意义的。

当我们不希望事件冒泡，可以通过事件对象来取消冒泡。event。

var s1 = document.getElementById("s1")
s1.onclick = function(event) {
    console.log("s1的click事件")
    event.cancelBubble = true
    // 在该层级取消冒泡,即可取消冒泡，它就不会往上传了。
    // 本身是ie的属性，现在所有浏览器都可以用。
}

事件委派：

将事件统一绑定给元素的共同祖先元素，这样后代元素的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理。

它利用了冒泡，减少了事件绑定的次数。

事件对象有一个target属性，它表示触发事件的对象。谁触发的事件，就返回谁。

事件传播：

W3C综合了微软和网景的方案，将事件传播分成了3个阶段。

（只适用于iE9及以上）

1. 捕获阶段。在捕获阶段，从最外层的祖先元素，向目标元素进行事件的的捕获，但默认此时不会进行事件触发。
2. 目标阶段。事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
3. 冒泡阶段。事件从目标元素向它祖先元素传递，依次触发祖先元素上的事件。

从2开始才执行。

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置位true。一般情况下不会希望在捕获阶段触发事件，所以这个参数一般都是false。

6. JS引擎执行代码流程

6.1 初始代码和回调代码

代码可以分为两类。

初始代码。

回调代码。

js引擎执行代码的基本流程：初始代码会被率先执行，待到执行完毕后才会在某个时刻执行回调代码。

初始代码除了普通的代码外，还有：定时器设置、ajax请求发送、绑定监听。至于这些代码的回调处理，则属于回调代码。

7. 事件循环模型

先执行初始代码。

每次事件发生，事件管理模块就会把回调函数放入回调队列。比如setTimeout为被定时后准确放入队列；而DOM操作就会把回调函数直接扔进队列。

初始化代码执行完毕后，才会发生事件轮询(event loop)去逐个执行回调队列中的函数。