javascript的基础知识

1作用域

作用域分两种：全局作用域，作用域。

函数分：函数变量，函数表达式。

function fn() {}  //函数变量
var fn = function () {}  //函数表达式

2全局对象

为了避免全局污染我们可以使用立即执行函数

(function () {})()

3原型

function User(name) {   //构造函数
    this.name = name;
    this.sayhi = function () {}
}

var u1 = new User('wang'); //创建实例
console.log(u1.name); //实例属性
console.log(u1.sayhi() ); //实例方法

对象中hasOwnProperty的使用

Object.prototype.abc=2;
let obj = {a:1};
// hasOwnProperty判断这个属性是否是自身的属性
console.log(obj.hasOwnProperty('abc'));  //false
console.log(obj.hasOwnProperty('a'));  //true

4原型链 

如何创建一个干净的对象？

// 方法一
let obj = Object.create(null);
obj.a= 1;

// 方法二
let obj = {a:1};
Object.setPrototypeOf(obj,null);

5浏览器渲染

浏览器从网络或本地文件中获取到HTML源代码，然后从上到下解析源代码

若执行过程中，读取到CSS或JS，停止解析(阻塞)，转而解析CSS或执行JS

生成DOM树

生成DOM树是一边解析HTML一边生成DOM树，同时进行。

// DOM解析完成执行
document.addEventListener('DOMContentLoaded', function() {
    console.log('dom content loaded');
});

//页面中的所有资源全部加载完成 执行  （所有资源比如css js 图片 视频等）
// load事件可以针对单个外部资源使用 
window.addEventListener('load', function() {
    console.log('window loaded');
});

生成渲染树

浏览器一边生成DOM树，一边计算DOM树中每个节点的样式规则，最终形成渲染树，同时进行。

布局 layout / 重排 reflow

浏览器一边生成渲染树，一边计算每个元素最终的尺寸和位置。

下面JS操作会导致重排

• 获取元素的尺寸位置
• 直接或间接的改变元素的尺寸或位置

重绘 repaint

浏览器一边reflow，一边进行生成对应的图形绘制到页面，绘制的过程称为repaint。

所有会导致reflow的代码都会倒是repaint。

不影响排列，仅影响外观的都不会导致reflow，仅导致repaint。列如：

• 改变背景颜色、字体颜色，圆角边框等等...

为什么把css写在页面开头，js写在页面结尾？

css写在开头，是为了尽快让浏览器读取解析样式，避免用户看到没有样式渲染前的页面，避免页面闪烁

js写到最后，是为了浏览器尽快的呈现页面给用户，然后再执行js完成交互

6异常

异常类型

SyntaxError	语法错误
ReferenceError	引用错误，往往是使用未定义的变量或函数
TypeError	类型错误，往往是使用对象中未存在的成员

捕获异常

try {

} catch (error) {

} finally {
    
}

手动抛出异常

throw 异常对象;