1、运算符
- 1/0 = infinity（正无穷，number类型），-1/0 = -infinity，0/0 = NaN（Not a Number，number类型），0%0 = NaN
- 比较运算符比较字符串，以ascii（8位二进制数）来比较
2、函数和作用域
- 高内聚，弱耦合，使用函数封装
- 函数定义的三种方式：申明式，显示命令式，匿名命令式（匿名函数表达式，命名函数表达式）->函数表达式
- 函数名.length: 形参长度， arguments.length: 实参长度。
- 实参与形参相等时，两者之间有映射关系，但是他们是不同的变量
- 无返回值函数，默认会添加return语句，终止函数的执行
- js三部曲：语法分析，预编译（函数声明整体提升，变量 —申明提升），解释执行
- 预编译：暗示全局变量（没有申明就赋值，此变量就为全局对象所有；一切声明的全局变量，全是window的属性）
- window就是全局作用域，属于Globle Object
- 四部曲：1、创建AO（Activation Object， 执行期上下文）对象；2、找形参和变量声明，将变量声明和形参名作为AO属性名，值为undefined；3、将实参值和形参统一；4、在函数体里面找函数声明、值赋予函数体
- [[scope]]:每个JavaScript函数都是一个对象，对象中有些属性我们可以访问，但是有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中一个，指的是我们所说的作用域，其中存储了运行期上下文的集合。
- 作用域链：[[scope]]中所存储的执行器上下文对象的集合，这个集合呈链式链接，我们把这种链式链接就做作用域链
- 立即执行函数：
3、类型转换
- 变量没有声明就使用，js报错，如果是对象的属性没有声明就是使用，则返回undefined
- 基本数据类型：Number，string，boolean，null，undefined，引用类型：Object，Function
- typeof返回6中数据类型：number， string， boolean，undefined，object，function
- '=='发生类型转换，'==='不发生类型转换，true： infinity == infinity, undefined == undefined, undefined == null; false: NaN == NaN
- 逻辑运算符（&&）：先看第一表达式转换成布尔值结果，如果结果为真，那么她会看第二个表达式转换为布尔值的结果，然后如果只有两个表达式，只看到第二个表达式，就可以返回该表达式的值了
- undefined, null, NaN, "", 0, false转换为布尔值都为false
- typeof(null): Object, typeof(NaN): number, typeof(typeof(a)): string
- toString（进制数），将数据转换成目标进制，null和undefined不能使用该方法
- parseInt（参数，进制数），将数据以目标进制为基底，转换成10进制
- Number（undefined）->NaN, true->1,false->0,null->0, '123abc'->NaN, 'true'->NaN, 'null'->NaN
- Number（mix），parseInt（string， radix），parseFloat（string），toString（radix），String（mix），Boolean（）
- isNaN（参数），-->隐式调用Number(参数)进行转换，然后与NaN进行比较
- 当且仅当 typeof 变量未定义时使用不报错，返回undefined
4、闭包：
- 当内部函数被保存在外部时，将会形成闭包。闭包会导致原有作用域链不可释放，造成内存泄漏
- 作用
-
- 实现公有变量：函数累加器
- 可以做缓存（存储结构）
- 可以实现封装，属性私有化
- 模块化开发，防止污染全局变量
5、对象的创建方法：
- 对象字面量 plainObject
- 构造函数（系统自带的构造函数） new Object（）、Array（）、Number（），也可以自定义构造函数（函数首字母大写，使用new关键字生成对象）
6、构造函数内部原理：
- 在函数体前面隐式的加上this={}
- 执行this.xxx = xxx;
- 隐式的返回this
7、包装类
- Number， String， Boolean
- 包装类可以直接当对象使用
- 原始值没有属性和方法，当使用属性和方法时，隐式转换成包装类并删除防止系统出错
8、原型
- 原型（prototype）是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。
- 使用场景：可以提取共有属性
- 对象查看原型： 隐式属性__proto__
- 对象查看对象的构造函数： constructor
- 绝大多数对象的最终都会继承自Object.prototype
- Object.create(原型), Object.create(null)没有继承原型
- null，undefined没有toString（）方法，123.toString（）会报错，优先识别成浮点型
- call/apply，改变this指向，两者传参列表不同。call 需要把实参按照形参的个数传进去， apply 需要传一个arguments
9、继承
- 传统形式——>原型链，过多的继承了没用的属性
- 借用构造函数，不能继承借用构造函数的原型，每次构造函数都要多走一个函数
- 共享原型，不能随便改动自己的原型
- 圣杯模式——>原型链与共享模式的结合，使用一个中间层做一个共享原型，然后使用原型链继承中间层，建议使用闭包私有化变量编写圣杯模式
function inherit(Target, Origin) {
- function F() {};
- F.prototype = Origin.prototype;
- Target.prototype = new F();
- Target.prototype.constructior = Target;
- }
10、小知识：
- for in：遍历对象，使用obj[property]访问属性值
- hasOwnProperty ，判断对象是否拥有自己的属性，不包括原型属性
- in： 判断对象是否可以访问到某个属性，包括继承的原型属性
- instanceof：A instanceof B 看A对象的原型链上有没有B的原型
- 区别对象和数组的三种方法：instanceof，constructor， obj.prototype.tostring.call([])
11、数组
- 改变原数组：push，pop， shift， unshift，sort， reverse， splice
- 不改变原数组：concat， join， slice，split
12、类数组
- 函数里面的arguments属于类数组，只有length方法可以使用
- 类数组定义：属性要为索引（数字）属性，必须要有length属性，最好加上push方法（'push': Array.prototype.push），如果加上splice方法('splice': Array.prototype.splice)，就长得跟数组一样了,其实本质上还是object对象
- 具备数组和对象的双重属性
- DOM生成的数组就是使用了类数组
13、try catch
- error.name的六种值对应的信息
-
- EvalError：eval（）的使用与定义不一致
- RangeError：数组越界
- ReferenceError：非法或不能识别的引用值
- SyntaxError: 发生语法解析错误
- TypeError: 操作数类型错误
- URIError: URI处理函数使用不当
14、es5严格模式
- “user strict”
-
- 不兼容es3的一些不规则语法，使用全新的es5规范
- 两种用法：全局严格模式， 局部函数内严格模式
- 就是一行字符串，不会对不兼容严格模式的浏览器产生影响
- 不支持with（）{}——>改变作用域链，arguments.callee，func.caller; 变量赋值前必须申明，局部this必须被赋值（Person.call(null/undefined)）赋值什么就是什么，拒绝重复属性和参数
15、DOM
- document代表整个文档，html标签代表顶级标签
- getElementById('id')-->单个节点, getElementsByTagName('div')-->类数组对象，getElementsByName('name'), getElementsByClassName('class')
- querySelector('')-->css选择器， querySelectorAll, 开发中基本不使用，不具有实时性，获取到的是DOM节点的副本，是静态的
- 节点类型：元素节点（1）， 属性节点（2）， 文本节点（3）， 注释节点（8）， document（9）， DocumentFragment（11）
- 节点方法：parentNode(父节点)， childNodes(孩子节点)，nextSibling(下一个节点)，previous(上一个节点) ，lastChild，firstChild
- 元素方法：parentElement(父元素， IE不兼容)，Children(子元素)， firstElementChild（第一个元素节点，IE不兼容），lastElementChild（最后一个元素节点，IE不兼容）， nextElementSibling/previousElementSibling（IE不兼容）
- 节点属性：
-
- nodeName，元素的标签名，以大写形式表示，只读
- nodeValue， Text节点或者Comment节点的文本内容，可读可写
- nodeType， 该节点的类型，只读
- attributes，Element节点的属性集合
16、DOM结构树
- document -->HTMLDocument.prototype --> Document.prototype
- 增
-
- document.createElement();
- document.createTextNode();
- document.createComment();
- document.createDocumentFragment();
- 插
-
- parentNode.appendChild();
- parentNode.insertBefore(a,b);
- 删
-
- parent.removeChild();
- child.remove();
- 替换
-
- parent.replaceChild(new, origin);
- DOM中Element节点属性
-
- innerHTML 指代标签内容
- innerText 只获取文本内容（火狐浏览器不支持）/textContent(IE不兼容)
- setAttribute（'key', 'value'）
- getAttribute('key')
17、定时器
- setTimeout（），setInterval（），clearTimeout（），clearInterval（），全局作用域window上的方法，内部函数this指向window
18、DOM基本操作
- 查看滚动条的滚动距离
-
- window.pageXOffset/pageYOffset: IE8及IE8以下不兼容
- document.body/documentElement.scrollLeft/scrollTop: 兼容性比较混乱，用时取两个值相加，因为不可能存在同时有值
- 查看视口的尺寸
-
- window.innerWidth/innerHeight: IE8及IE8以下不兼容
- document.documentElement.clientWidth/clientHeight: 标准模式下，任何浏览器都兼容
- document.body.clientWidth/clientHeight: 适用于怪异模式下的浏览器
- 查看元素的几何尺寸
-
- domEle.getBoundingClientRect();
- 兼容性很好，该方法返回一个对象，对象里面有left、top、right、bottom等属性。left和top代表该元素左上角的x和y坐标，right和bottom代表元素右下角的x和y坐标
- 老版本IE并未实现height和width属性
- 返回的结果并不是“实时的”
- 查看元素尺寸的另一个方法
-
- domEle.offsetWidth, domELe.offsetHeight
- 查看元素的位置:相对于父级元素的位置
-
- dom.offsetLeft, dom.offsetTop
- 对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的反诉返回相对于最近的有定位的父级的坐标
- dom.offsetParent返回最近的有定位的父级元素
- 让滚动条滚动
-
- window.scroll(), window.scrollTo()滚动到某个位置，传入x， y两个参数
- window.scrollBy()传入两个参数x， y、定位到某个位置
- scrollBy()会在之前的数据基础之上做累加
19、CSS脚本化
- 查询计算样式: window.getComputedStyle(ele, null)返回一个CSSStyleDeclaration对象
-
- window.getComputedStyle(ele, null)[prop]
- 计算样式只读，返回的计算样式的值都是绝对值，没有相对单位
- IE8及IE8以下不兼容
- div.currentStyle[prop](IE专用方法)
20、事件
- div.onclick = function () {}
-
- 同一个元素的同一个事件的处理函数只能绑定一个
- 基本等同于写在html行间上
- 程序this指向是dom元素本身
- obj.addEventListener(type, fn, false) =>div.addEventListener('click', function(){}, false)
-
- IE9以下不兼容, 可以为一个事件绑定多个处理函数
- 事件监听机制
- 程序this指向是dom元素本身
- obj.attachEvent('on'+type, fn) => div.attachEvent('onClick', function(){ })
-
- IE独有，一个事件同样可以绑定多个处理程序
- 程序this指向window
- 解除事件绑定
-
- ele.onclick = false/''/null
- ele.removeEventListener(type, fn, false);
- ele.detachEvent('on'+type, fn);
- 若绑定匿名函数，则无法解除
21、事件处理模型——事件冒泡、捕获
- 事件冒泡
-
- 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
- 事件捕获
-
- div.addEventListener(type, fn, true)执行事件捕获
- 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
- 与事件冒泡不能同时存在
- IE不支持
- 触发顺序，先捕获，后冒泡
- focus，blur，change，submit，reset，select等事件不冒泡
- 取消冒泡
-
- W3C标准event.stopPropagation();但不支持IE9以下版本
- IE独有event.cancelBubble = true;现在都能支持
- 阻止默认事件
-
- 默认事件——表单提交，a标签跳转， 右键菜单等
- 1、return false；以对象属性的方式注册的事件生效
- 2、event.preventDefault();W3C标准，IE9以下不兼容
- 3、event.returnValue = false; 兼容IE
22、事件对象
- event || window.event 用于获取事件对象
- 事件源对象
-
- event.target 火狐只有这个
- event.srcElement IE只有这个
- 兼容方式 event.target || event.srcElement
- 事件委托
-
- 利用事件冒泡，和事件源对象进行处理
- 优点：
-
-
- 1、性能：不需要循环所有的元素一个个绑定事件
- 2、灵活，当有新的子元素时不需要重新绑定事件
-
23、事件分类
- 鼠标事件
-
- click, mousedown, mousemove, mouseup, contextmenu,mouseover,mouseout,mouseenter,mouseleave
- 用事件的button属性来区分鼠标的按键，0（左键）/1（中间滚动轮）/2（右键），mousedown, mouseup事件才有，click事件只能监听左键不能监听右键
- 键盘事件
-
- keydown, keyup, keypress
- keydown > keypress > keyup
- keydown 和 keypress的区别
-
-
- keydown可以响应任意键盘按键事件， keypress只能响应字符类键盘按键
- keypress返回ASCII码，可以转换成相应字符
-
- 文本事件
-
- oninput 文字有变化就触发
- onchange 输入框获取焦点和失去焦点时，前后状态不一样触发
- onfoucs 获取到焦点时触发
- onblur 失去焦点时触发
- onscroll 滚动条滚动式触发
24、异步加载JS
- derfer异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写到内部
- async异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里面，执行时也不阻塞页面
- 创建script，插入到DOM中，加载完毕后callback，动态创建script标签，赋予src属性异步下载文件，通过onload
25、JS加载时间线
- 1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。 这个阶段document.readyState = 'loading'。
- 2、遇到link外部css，创建线程加载，并继续解析文档。
- 3、遇到script外部js， 并且没有设置async，defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析
- 4、遇到外部js，并且设置有async或defer，浏览器创建线程加载，并继续解析文档。对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）
- 5、遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。
- 6、当文档解析完成，document.readyState = 'interactive'。
- 7、文档解析完后，所有设置有defer的脚本会按照顺序执行。
- 8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化成事件驱动阶段。
- 9、当所有async的脚本加载完成并执行之后，img等加载完成后，document.readyState = 'complete' , window对象触发onload事件
- 10、从此，以异步响应方式处理用户输入、网络事件。
扫一扫
4509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
