JS初级笔记

JS基础知识

JS解释性语言 看一行翻译一行 引擎单线程（同步）
C语言和C++（编译型语言）不能跨平台使用
编译语言：c c++
优点：快
不足：移植性不好（不跨平台）
解释语言 ：python php js
优点：跨平台
不足：稍微慢
java既不是编译 也不是解释语言
轮转时间片：类似吃饭
js三大部分：ECMAScript(语言标准，js是基于这个标准实现的脚本语言) DOM(文档对象模型) BOM(浏览器对象模型)

不可以改变的原始值：stack 栈
栈内存之间是拷贝
number string boolen undefined null
引用值：heap 堆
array（数组）object function等

显示类型转换
Number(mix)转换成数字
parseInt(string,radix)砍断原则 返回整数
parseFloat(string) 返回浮点数
String(mix)转换成字符串
Boolean()转换成布尔值
***.toString(radix),***变成字符串了，null和undefined不可以用
parseInt 目标进制到十进制过程
toString 十进制到目标进制过程

隐式类型转换
isNaN()会把里面的东西用Number转换，然后再转换是不是NaN
undefined==null 他俩谁都不等
NaN!=NaN 任何都不等

不发生类型转换
=== !==

偶合就是重复的意思，高内聚 低耦合 。命名规则第一个单词字母小写别的单词首字母大写
1.命名函数表达式
var test=function abc(){
document.write(‘a’);
}
2.匿名函数表达式------函数表达式(常用)
var demo=function(){
document.write(‘b’);
}
不限制类型而且数量也可以不同。
输入 var num=window.prompt(‘input’);

递归：找规律 找出口

imply global暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局对象所有
一切声明的全局变量 全是window的属性
window就是全局的域
GO==window
全局GO(global object)
函数内部AO(active object)活动对象

预编译

首先看一个例子
var a = 10
console.log(a); //输出为10

console.log(a) //输出为undefined
var a = 10
出现这种情况的原因是：js解释型语言 ，也就是解释一行执行一行，第一种情况是正常输出，第二种之所以会输出undefined 而不是报错就是归功于预编译

js代码执行分为三步：
1，语法分析
2，预编译
3，解释执行
语法分析就是通篇检查你的代码有没有低级错误
预编译发生在代码执行的前一刻
解释执行就是执行你的代码

预编译的前奏
1，imply global 暗示全局变量 ： 也就是任何没有经过声明的变量 此变量归全局（window）所有
b=123 //相当于 window.b = 123 暗示全局变量

2,一切声明的全局变量 归window所有
var a =123 //相当于 window.a = 123
预编译的粗浅理解（这种理解可以用来解决简单的预编译问题）：
函数声明整体提升 和 变量声明提升
当问题变得复杂，只有更透彻的理解才能理清头绪

预编译精装：
预编译四部曲：
1，创建GO/AO对象 GO：global object AO：avtive object
2，找形参和变量声明，将变量和形参名作为AO的属性名 值为undefined
3，将实参和形参相统一（也就是吧AO对象中的形参属性的值变成实参的值）
4，在函数体找函数声明 赋值给函数体
全局预编译 生成GO === window
在全局预编译完成后进行全局的代码解释执行 只有在遇到函数调用的时候才会触发函数局部的预编译

局部预编译生成AO
function f(a){
console.log(a) //function(){}
var a = 123
console.log(a) //123
function a(){}
var b = function(){} //function(){}
function d(){}
}
f(1)
在这个函数中进行预编译：
1，创建AO对象 AO={ }
2；找形参和变量声明 将变量和形参名作为AO的属性名 值为undefined
AO={
a:undefined,
b:undefined
}
3,将实参和形参相统一
AO={
a:1,
b:undefined
}
4,在函数体找函数声明 赋值给函数体
AO = {
a:function(){}
b:undifined
d:function(){}
}

if里不能声明function
typeof(null)为object

查找变量：从作用域链的顶端依次向下查找

闭包

但凡内部函数被return在外部，则一定生成闭包
当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄漏。
闭包的作用：
1 实现公有变量
2 可以做缓存（存储机构）
3 可以实现封装，属性私有化
4 模块化开发，防止污染全局变量
立即执行函数，(function(){}());
在方法后面做加个（），用完立刻销毁，剩下和普通没有任何区别
只有表达式才能被执行符号执行

大驼峰式命名规则 每个单词首字母大写（构造函数）
对象的创建方法
1.var obj={} plainObject 对面字面量/对象直接量
2.构造函数
（1）系统自带的构建函数 new Object() Array() Number()
（2）自定义
小写和大写不是一回事

构造内部函数原理
1.在函数体最前面隐式的加上this={}
2.执行this.xxx=xxx;
3.隐式的返回this

原始值不可能有属性和方法的 为什么能调用经历了一个过程叫包装类
包装类
new Sting();
new Boolean();
new Number();

原型：
1.定义是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。
通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象
2.利用原型特点和概念，可以提取共有属性
3.对象如何查看原型->隐式属性__proto__（指向原型的东西）（尽量别修改，但可以修改）
4.对象如何查看对象的构造函数->constructor

Person.prototype --------原型
Person.prototype ={} 是祖先
通过对象想改原型的东西是不可能的，除非Person.prototype.lastName这么改
写原型祖先可以简写为
Person.prototype={
height:1400,
lang:4900,
carName:“BMW”
}
绝大多数对象的最终都会继承自Object.prototype
特例就是Object.create()

Math.ceil(123.234) ==124 向上取整
Math.floor(123.999) ===123 向下取整
Math.random() 0-1之间的开区间随机数

call/apply
作用：改变this指向
区别：传参列表不同

call 需要把实参按照形参的个数传进去
apply 需要传一个arguments
wheel.apply(this,[wheelSize,style]);
Sitcall(this,c,sitColor);
加括号就完事

init 出口初始化的意思
for(var prop in obj){
}//prop这个词可以换，in obj是固定的
对象的枚举
for in
1.hasOwnProperty判断属性是不是自己的还是原型上的
2.in // ‘height’ in obj ''不能忘 不过in用的频率很小
3.instanceof //最重要 看A对象的原型链上 有没有 B的原型

typeof 可以返回类型有六个
number string boolean undefined function object

this
函数预编译过程 this->window
全局作用域 this->window
call/apply 可以改变函数运行时this指向
obj.func(); func()里面的this执行obj

定义数组
1.var arr=[];
2.var arr=new Array();
数组的读和写
不可以溢出读 结果是undefined
可以溢出写
数组几乎不会报错

改变原数组(7个)
push数组最后一位增加
pop把数组最后一位剪切出去（不能传参）只能一位
unshift在前面加
shift在前面减
reverse逆转顺序
splice(从第几位开始，截取多少长度，在切口处添加新的数据)
sort
1.必须写俩形参
2.看返回值 1）当返回值为负数时 那么前面的数放在前面
2）为正数， 那么放后面的数在前
3）为0 ， 不动
直接return a+b;升序 a-b
降序；

不改变原数组
concat连接两个数组
join 不传按逗号来连

深度克隆 for(var prop in obj)
1.判断是不是原始值 typeof() object
2.判断是数组还是对象 toString
3.建立相应的数组或对象
4.递归

类数组（对象）属性要为索引（数字）属性，必须有length属性，最好加上push
好处：

1. 可以利用属性名模拟数组的特性
2. 可以动态的增长length的属性
3. 如果强行让类数组调用push，方法则会根据length属性值的位置进行属性的补充。

封装type
数组去重 要求在原型链上变成编程(hash)
array.prototype.unique=function(){
}

一旦经历了var的操作，所得出的属性，window，这种属性叫做不可配置的属性，不可配置属性delete不掉、

try{
}catch(e){ //error error.message error.name只有这两个
}
在try里面的错误 不会执行错误后的try里面的代码

DOM(文档对象模型) Document Object Model
让js操作html

setInterval(function(){},100)
定时器 //例子每隔100毫秒进行一次这个function 但是他不准
doucument.onkeydown=function(e){
switch(e.which)
 {
 }
}

鼠标和键盘控制

DOM基本操作

1.对节点的增删改查

查看元素节点 选出的都是一组

document单独写 表示单独的整个文档
document.getElementById() //元素id
.getElementsByTagName() //标签名
.getElementByName() //并不是所有标签都好使（表单及元素，img,ifname）
.getElementByClassName() // 类名
.querySelector() //css选择器 选出来的是一个 不过这两个不是实时的
.querySelectorAll() //css选择器 选出来的是一组

节点的四个属性

nodeName 元素的标签名 以大写形式表示 只读
nodeValue Text点或Comment节点的文本内容 可读写（文本节点 和 注释节点）
nodeType 该节点的类型 只读 （重点）
attributes Element节点的属性结合
节点的一个方法 Node.hasChildNodes();

W3CSchool 字典

date()日期对象

setInterval(function(){},100); 一旦写得接收返回值 var time=setInterval(function(){},100);
定时器 //例子每隔100毫秒进行一次这个function 但是他不准 得去取消
clearInterval 清空定时器
setTimeout 多少毫秒之后永久暂停
clearTimeout 清空计时器

脚本化CSS

事件

如何绑定事件处理函数

ele.onxxx=function(event){}
兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序，基本等同于写在HTML行间上
程序this指向dom元素本身
obj.addEventListener(type,fn,false);
IE9以下不兼容，可以为一个事件绑定多个处理程序
程序this指向dom元素本身
obj.attachEvent(‘on’+type,fn);
IE独有 一个事件同样可以绑定多个处理程序
事件出现在循环里边考虑是不是产生了闭包
程序this指向window

解除事件

ele.οnclick=false/‘’/null;
ele.removeEventListener(type,fn,false);
else.detachEvent(‘on’+type,fn);
注：若绑定匿名函数，则无法解除

事件处理模型——事件冒泡，捕获

事件冒泡：
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
事件捕获：
结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素(事件源元素)。（自顶向下）只有谷歌可以用
IE没有捕获事件
触发顺序，先捕获，后冒泡
focus,blur,change,submit,reset,select等事件不冒泡

取消冒泡：

W3C标准 event.stopPropagation();但不支持ie9以下版本
event.cancelBubble=true;
封装取消冒泡的函数stopBubble(event)
阻止默认事件：
默认事件–表单提交，a标签跳转，右键菜单等
1.return false;姨对象属性的方式注册的事件才生效
2.event.preventDefault();W3C，IE9以下不兼容
3.event.returnValue=false;兼容IE
封装阻止默认事件的函数 cancelHandler(event);

事件委托

利用事件冒泡 和事件源对象进行处理
优点：
1.性能 不需要循环所有的元素一个个绑定事件
2.灵活 当有新的子元素时不需要重新绑定事件

鼠标事件

click mousedown mousemove mouseup contextmenu mouseover mouseout mouseenter mouseleave
用button来区分鼠标的按键 0/1/2
DOM3标准规定：click事件只能监听左键 只能通过mousedown和mouseup来判断鼠标键

键盘事件

keydown keyup keypress
keydown>keypress>keyup
keydown和keypress的区别
keydown可以响应任意键盘按键 keypress只能响应字符类键盘按键
keypress返回ASCII码，可以转换成相应字符

json

JSON是一种传输数据的格式（属性名必须加双引号）
以对象为样板，本质上就是对象，但用途有区别，对象就是本地用的，json
是用来传输的
JSON.parse(); string->json
JSON.stringify(); json->string

异步加载js

1.defer 异步加载，但要等到dom文档全部解析完才会被执行、只有IE能用，也可以将代码写到内部
2.async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里
1.2执行时也不阻塞页面
3.创建script，插入到DOM中，加载完毕后callBack（通杀）

js加载时间线

10步

正则表达式

正则表达式的作用：匹配特殊字符或有特殊搭配原则的字符的最佳选择
两种创建方式：
直接量 var reg=/abc/;
new RegExp(); var reg=new RegExp(“abc”,“m”);
个人推荐用直接量