目录

前言

引入：html中嵌入javascript有三种方式

0. 变量（var、let）

1. 函数

1.1 普通函数 和 箭头函数

1.1.2 普通函数中的this

1.1.3 箭头函数没有自己的this

1.1.4 普通函数有arguments方法，箭头函数没有

1.1.5 箭头函数没有new.target

1.1.6 箭头函数没有变量提升

1.1.7 箭头函数不能作为构造函数使用

2、函数高级

2.1原型与原型链

2.1.1原型（prototype）

2.1.2显示原型与隐式原型

2.1.3原型链

2.1.4原型链属性问题

2.1.5 探索instanceof

2.1.6 原型面试题

2.2 闭包

2.2.1 理解闭包

2.2.2 常见的闭包

2.2.3 闭包的作用

2.2.4 闭包的生命周期

2.2.6 闭包的缺点及解决

2.3 Promise（异步）

Promise基础语法

Promise进阶语法

Promise.all的用法

3. 数据类型

3.0 基本类型、引用类型

3.1 String（简要）

3.2 Object（简要）

3.3 null、NaN和undefined 的区别

4. JS事件

4.1 常用事件

4.2 注册事件方式

4.3 设置节点的属性

4.4 捕捉回车键

4.5 JS的控制语句

5. DOM

5.1 文本框value

5.2 inner HTML和innerText属性

5.3 获取日期/日期 Date

6. BOM

6.1 open与close

6.2 弹出确认框

6.3 历史记录

6.4 设置地址栏的url

7. 有哪些方法可以通过浏览器往服务器发请求

前言

Java运行在JVM当中，JavaScript运行在浏览器的脚本语言在内存当中，完整的javascript由语言基础,BOM,DOM组成

JavaScript包括三大块：

• ECMAScript：JS的核心语法（ES规范 / ECMA-262标准）
• DOM：（Document Object Model）（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当做一棵DOM树来看待。
• BOM：（Browser Object Model）（浏览器对象模型），比如：打开一个新的浏览器窗口、关闭浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。

引入：html中嵌入javascript有三种方式

第一种方式：事件句柄="js代码"

//window可以省略

第二种方式：javascript脚本块 

完整代码

第三种方式：外部引入js文件

2.1.2显示原型与隐式原型

1.每个函数function都有一个prototype，即显示原型（属性）
2.每个实例对象都有一个__proto__,可称为隐式原型（属性）
3.对象的隐式原型的值为其对应构造函数的显示原型的值
4.总结：

• 函数的prototype属性：在定义函数时自动添加的，默认值是一个空Object对象
• 对象的__proto__属性：创建对象时自动添加的，默认值为构造函数的prototype属性值
• 能直接操作显示原型，但不能直接操作隐式原型（ES6之前）

图解

2.1.3原型链

原型链（别名：隐式原型链）
访问一个对象属性时，
先在自身属性中查找，找到返回
如果没有，再沿着__proto__这条链向上查找，找到返回
如果最终没有找到，则返回undefined

作用：
1.查找对象的属性（方法）
2.构造函数/原型/实体对象的关系（图解）
3.构造函数/原型/实体对象的关系2（图解）

图解

2.1.4原型链属性问题

1.读取对象的属性值时，会自动到原型链中查找
2.设置对象的属性值时，不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值
3.方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

2.1.5 探索instanceof

1.instanceof是如何判断的？
表达式：A instanceof B
如果B函数的显示原型对象在A对象的原型链上，返回true，否则返回false

2.Function是通过new自己产生的实例

2.1.6 原型面试题

图解

2.2 闭包

2.2.1 理解闭包

1.如何产生闭包？
当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包。

2.闭包到底是什么？
理解一：闭包是嵌套的内部函数
理解二：包含被引用变量（函数）的对象
注：闭包存在于嵌套的内部函数中

3.产生闭包的条件？
函数嵌套
内部函数引用了外部函数的数据（变量/函数）

function fn1(){var a = 2;function fn2(){     //执行函数定义就会产生闭包（不用调用内部函数）console.log(a);}fn2();
}
fn1();

2.2.2 常见的闭包

1.将函数作为另一个函数的返回值
2.将函数作为实参传递给另一个函数调用

/***********************************************/
//普通函数
//计数：函数内部需要调用函数外的变量（非闭包）
let a = 10
function base(){ a++;console.log(a); 
}
base()
base()
a = 1000
base()/***********************************************/
//闭包写法
//计数：函数嵌套
function count(){ console.log('out');  let num = 10; //内部函数function inner(){ num++;console.log(num); } return inner; 
}const closure = count(); // 执行外部函数:输出out ，返回内部函数（闭包）
// 闭包的调用使得变量num 成为一个私有变量 
closure(); // 11
closure(); // 12       
num = 1000      
closure(); // 13                                                                                    

2.2.3 闭包的作用

闭包的作用

• 使用函数内部的变量在函数执行完后，仍然存活在内存中（延长了局部变量的生命周期）
• 让函数外部可以操作（读写）到函数内部的数据（变量/函数）

2.2.4 闭包的生命周期

• 产生：在嵌套内部函数定义执行完时就产生了（不是在调用）
• 死亡：在嵌套的内部函数成为垃圾对象时

2.2.6 闭包的缺点及解决

1.缺点：

• 函数执行完后，函数内的局部变量没有释放，占用内存时间会变长
• 容易造成内存泄漏

2.解决

• 能不用闭包就不用
• 及时释放

2.3 Promise（异步）

Promise 是一种异步编程的解决方案。

• 简单来说，Promise是一个容器，里面包含着一个异步操作的结果
• 从语法上来说，promise(小写的p)是一个对象，从它可以获取异步操作的最终状态
• 而Promise是一个构造函数，自己身上由reject resolve all方法，原型上有then catch方法

Promise有三种状态，pending 初始态，fulfilled 成功状态，rejected失败状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态。Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected

Promise主要解决的问题

• 回调地狱：第一个回调的结果，被内层的第二个回调所需要
• promise可以支持多个并发的请求，获取并发请求中的数据
• 这个promise可以解决异步的问题，本身不能说promise是异步的

Promise基础语法

/*Promise的语法+ Promise 是 ES6 内置的构造函数+ 语法：new Promise(function(){你要执行的异步的事情 })=> 实例化的时候，这个函数接收两个参数=> resolve,reject+ 语法：=>实例化对象身上由两个方法1. then()-> promise对象.then(function(){})2. catch()-> promise对象.catch(function(){})=> then方法的函数传递给了实例化的 resolve=> catch方法的函数传递给了实例化的 reject
*/const p = new Promise(function (resolve, reject) {// resolve是成功的回调函数 当你书写resolve()的时候,实际上是在调用then里面的函数// reject是失败的回调函数 当你书写reject()的时候，实际上是在调用catch里面的函数ajax({url: './server/a.php',dataType: 'json',success(res) {resolve(res)},error(err) {reject(err)}})
})// 在 new Promise里面做一些回调的事情
// 将回调的结果转移到外面 then catch中
// 在 promise中做一件异步的事情，把结果放在外部的函数中去执行
p.then(function (res) { console.log('我执行了', res) })
p.catch(function (err) { console.log('我失败了', err) })

Promise进阶语法

/*Promise的进阶语法+ 当你在一个 promise对象的 then里面返回一个新的 promise对象+ 你可以在这个 then的后面继续来一个 then接收第一个 then里面 promise对象的结果
*/new Promise(function (resolve, reject) {ajax({ur1: './server/a.php',dataType: 'json',success(res) {resolve(res)}})
})
.then(function (res) {console.log('需求1:', res)return new Promise(function (resolve, reject) {ajax({ur1: './server/b.php',data: res,dataType: 'json',success(res) {resolve(res)}})})
})
.then(function (res) {console.log('需求2:', res)return new Promise(function (resolve, reject) {ajax({url: './server/b.php',data: res,dataType: 'json',success(res) {resolve(res)}})})
})
.then(function (res) {

Promise.all的用法

const p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('结果1')}, 1000);
})
const p2 = new Promise((resolve, reject) => {setTimeout(() => {resolve('结果2')}, 1000);
})
const p3 = new Promise((resolve, reject) => {setTimeout(() => {resolve('结果3')}, 1000);
})// 三个都成功则成功，只要有一个失败就失败
// 成功时则会返回一个数组
Promise.all([p1, p2, p3]).then(res => {console.log(res);
})

3. 数据类型

3.0 基本类型、引用类型

数据类型有： 基本类型、引用类型

基本类型：

• String: 任意字符串
• Number: 任意的数字
• boolean: true/false
• undefined: 未定义
• null: 空

引用类型：

• Object:任意对象
• Function：一种特别的对象（可以执行）
• Array：一种特别的对象（数值下标，内部数据是有序的）

var i;
alert(typeof i); // "undefined"var k = 10;
alert(typeof k); // "number"var f = "abc";
alert(typeof f); // "string"var d = null;
alert(typeof d); // "object"  null属于Null类型,但是typeof运算符的结果是"object"var flag = false;
alert(typeof flag); // "boolean"var obj = new Object();
alert(typeof obj); // "object"function sayHello(){}
alert(typeof sayHello); // "function"

typeof：可以判断：undefined、数值、字符串、布尔值，不能判断: null与object object与array

instanceof：可以判断对象的具体类型

===：可以判断undefined、null

var d = null;
alert(typeof d); // "object"  null属于Null类型,但是typeof运算符的结果是"object"

typeof运算符的语法格式：typeof 变量名function sum(a, b){if(typeof a == "number" && typeof b == "number"){return a + b;}alert(a + "," + b + "必须都为数字！");
}

3.1 String（简要）

在JS当中字符串可以使用单引号，也可以使用双引号，String是一个内置的类，可以直接用，String的父类是Object。

var s = 'a234234';

常用函数

alert("http://www.baidu.com".indexOf("http")); // 0
alert("http://www.baidu.com".indexOf("https")); // -1// 判断一个字符串中是否包含某个子字符串？
alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含"); // 不包含// replace (注意：只替换了第一个)
alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value// 继续调用replace方法,就会替换第“二”个.
// 想全部替换需要使用正则表达式.
alert("name=value%name=value%name=value".replace("%","&").replace("%", "&")); // name=value&name=value&name=value

substr和substring的区别？

// substr(startIndex, length)
alert("abcdefxyz".substr(2,4)); //cdef，（下标，长度）
// substring(startIndex, endIndex) 注意:不包含endIndex
alert("abcdefxyz".substring(2,4)); //cd，【开始下标，结束下标）

3.2 Object（简要）

Object类型是所有类型的超类，自定义的任何类型，默认继承Object

实例

/* 
//定义函数的第一种方式
function User(a, b, c){ // a b c是形参,属于局部变量.// 声明属性 (this表示当前对象)// User类中有三个属性:sno/sname/sagethis.sno = a;this.sname = b;this.sage = c;
}// 创建对象
var u2 = new User(222, "jackson", 55);
alert(u2.sno);
alert(u2.sname);
alert(u2.sage);// 访问一个对象的属性,还可以使用这种语法
alert(u2["sno"]);
alert(u2["sname"]);
alert(u2["sage"]);
*///定义函数的第二种方式
Product = function(price){// 属性this.price = price;// 函数this.getPrice = function(){return this.price;}
}var xigua = new Product(4.0);
var pri = xigua.getPrice();
alert(pri);

动态扩展属性

属性有：prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。

// 可以通过prototype这个属性来给类动态扩展属性以及函数
Product.prototype.getPname = function(){return this.pname;
}// 调用后期扩展的getPname()函数
var pname = xigua.getPname();
alert(pname)// 给String扩展一个函数
String.prototype.suiyi = function(){alert("这是给String类型扩展的一个函数，叫做suiyi");
}"abc".suiyi();

JS语言怎么定义类，怎么创建对象？（弱类型）

User = function(username,password){this.username = username;this.password = password;
}
var u = new User();
var u = new User("zhangsan");
var u = new User("zhangsan","123");	

3.3 null、NaN和undefined 的区别

• 数据类型不一致
• ==(等同运算符：只判断值是否相等)
  ===(全等运算符：既判断值是否相等，又判断数据类型是否相等)

// null NaN undefined 数据类型不一致.
alert(typeof null); // "object"
alert(typeof NaN); // "number"
alert(typeof undefined); // "undefined"// null和undefined可以等同.
alert(null == NaN); // false
alert(null == undefined); // true
alert(undefined == NaN); // false// 在JS当中有两个比较特殊的运算符
alert(null === NaN); // false
alert(null === undefined); // false
alert(undefined === NaN); // false

4. JS事件

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on

4.1 常用事件

blur失去焦点 、focus获得焦点
（所谓焦点是光标的获得与失去）

click鼠标单击、dblclick鼠标双击

keydown键盘按下、keyup键盘弹起

mousedown鼠标按下、mouseover鼠标经过
mousemove鼠标移动、mouseout鼠标离开
mouseup鼠标弹起

reset表单重置、submit表单提交

change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）
 

4.2 注册事件方式

• 第一种注册方式：直接在标签中使用事件句柄

• 第二种注册方式：使用js代码完成事件注册

4.3 设置节点的属性

通过点击一个按钮框，将其变为复选框

4.4 捕捉回车键

回车键的键值是13、ESC键的键值是27
按钮键是onclick，而回车键onkeydown

usernameElt.onkeydown = function(event){if(event.keyCode === 13){alert("正在进行验证....");}
}

4.5 JS的控制语句

var arr = [false,true,1,2,"abc",3.14]; 
for(var i = 0; i < arr.length; i++){alert(arr[i]);
}

for in结构

for(var i in arr){alert(arr[i]);
}

for in结构还可以遍历对象属性

// for..in语句可以遍历对象的属性
User = function(username,password){this.username = username;this.password = password;
}var u = new User("张三", "444");for(var item in u){alert(u[item]);//不用加双引号
}

with结构

with(u){alert(username + "," + password);
}

5. DOM

DOM：Document Object Model（文档对象模型）HTML文档被当做一棵DOM树来看待。

var domObj = document.getElementById("id");

DOM和BOM的区别：

• BOM的顶级对象是：window
• DOM的顶级对象是：document
• 实际上BOM是包括DOM的！

5.1 文本框value

1.通过点击按钮框获取value值

2.失去焦点对象获取value值，通过this指针

5.2 inner HTML和innerText属性

innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。
innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待

5.3 获取日期/日期 Date

// 当以上格式不是自己想要的,可以通过日期获取年月日等信息,自定制日期格式.
var t = new Date();
var year = t.getFullYear(); // 返回年信息,以全格式返回.
var month = t.getMonth(); // 月份是:0-11
// var dayOfWeek = t.getDay(); // 获取的一周的第几天(0-6)
var day = t.getDate(); // 获取日信息.
document.write(year + "年" + (month+1) + "月" + day + "日");

6. BOM

BOM编程中，window对象是顶级对象，代表浏览器窗口

6.1 open与close

打开window.open();
关闭window.close();

将当前窗口设置为顶级窗口 代码演示

if(window.top != window.self){window.top.location = window.self.location;
}

6.2 弹出确认框

• 消息框window.alert('消息框');
• 确认框window.confirm('确认框');

6.3 历史记录

历史纪录的后退window.history().back();​​​​​​或window.history().go(-1);
历史纪录的前进window.open();

6.4 设置地址栏的url

var xx = window.location;
xx.href = "http://网址";
//或者window.location.href = "http://网址";
//或者window.location = "http://网址";
//或者document.location.href = "http://网址";同理href可以省略

7. 有哪些方法可以通过浏览器往服务器发请求

1. 表单form的提交。
2. 超链接。用户只能点击这个超链接
3. document.location
4. window.location
5. window.open(“url”)
6. 直接在浏览器地址栏上输入URL，然后回车。（这个也可以手动输入，提交数据也可以成为动态的。）

以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的