1、JS的组成

ECMAScript、DOM、BOM

2、JS基本数据类型和复杂数据类型

基本数据类型

• string
• number
• boolean
• null
• undefined
  复杂数据类型
• object

区别

1. 存储方式不同

• 基本数据类型的变量在栈区中直接保存变量的值
• 复杂数据类型的变量在栈区中保存地址，该地址指示其“真身”在堆区中的位置

2. 操作方式不同

• 基本数据类型的变量名操作变量的值
• 复杂数据类型的变量名操作变量的地址

3、JS数据类型的获取和判断

1.获取数据类型

typeof 变量

2. 判断数据类型

• 使用typeof，复杂数据类型永远返回object

typeof 变量 == 数据类型
console.log(typeof undefined);  // undefined
console.log(typeof null);  // Object

• 使用instanceof，只要是其类或其父类均返回true

变量 instanceof 数据类型

4、JS的=和==和===

• = 赋值
• == 值比较(自动类型转换)
• === 值比较和对象类型比较

console.log(123 == '123');  // true
console.log(123 === '123');  // false

5、JS中的函数

5.1、创建方式

1. 声明函数
   该形式可用于类的创建

function 函数名称 (形参列表)
{
    函数体
}

2. 函数表达式

// 匿名函数(常用)
var func01 = function () {

}
// 命名的函数表达式(不常用)
var func02 = function func () {

} 

3. 使用构造函数创建函数对象
   Function是一个构造器，function是Function实例化的一个对象

var func02 = new Function("console.log('demo');");

在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。
https://blog.csdn.net/sinat_21742529/article/details/83659459

js 里面的 function 与 Function
https://www.jianshu.com/p/0480860f8987

js里Function 与 function 一样吗
https://zhidao.baidu.com/question/1498968439326505379.html

5.2、函数使用技巧

1. arguments

<script>
    function func(name, age) {
        for(var i=0; i<arguments.length; i++){
            console.log(arguments[i]);
        }
    }
    func('David');  // David
    func('David', 20);  // David 20
    func('David', 20, '男');  // David 20 男
</script>

突然想到foreach的知识点，记录一下

js中的foreach用法
https://blog.csdn.net/fanfan_h/article/details/91406310

2. length属性和name属性

• length属性返回形参的个数
• name属性返回函数名

function func(name, age) {}
console.log(func.length);  // 2
console.log(func.name);  // func

3. 函数重载
   js没有函数重载，同名函数后面的会覆盖前面的

function sum(a, b) {return a+b;}
function sum(a, b, c) {return a+b+c;}
console.log(sum(1, 2));  // NaN
console.log(sum(1, 2, 3));  // 6

但是可以通过arguments个数来模拟重载

<script>
    function sum() {
        if(arguments.length === 2){
            return arguments[0] + arguments[1];
        }else if(arguments.length === 3){
            return arguments[0] + arguments[1] + arguments[2];
        }else{
            return NaN;
        }
    }
    console.log(sum(1, 2));  // 3
    console.log(sum(1, 2, 3));  // 6
</script>

5.3、函数的几种叫法

1. 命名函数、匿名函数
2. 闭包

• 函数内部还有函数
• 内部函数引用外部函数的变量

3. 静态方法、实例方法

6、JS的作用域

1. js中的作用域

• script标签构成的全局作用域
• 在js中函数是唯一一个可以创建局部作用域的对象
  注：js中一对{}内部不算一个局部作用域

2. 作用域链
   函数内部还可以声明函数，形成作用域链

<script>
    function func1() {
        var a = 1;
        var b = 2;
        function func2() {
            var a = 100;
            console.log('a=' + a + ', b=' + b);
        }
        func2();
    }
    func1();  // a=100, b=2
</script>

7、JS变量和函数提升

执行顺序

1. 把变量的声明提升到当前作用域的最前面
2. 把函数声明提升到当前作用域前面
3. 执行赋值、运算
4. 最后执行回调函数，如定时器、监听

js执行顺序详解
https://blog.csdn.net/yournevermore/article/details/86436245

8、JS异常处理

抛出异常throw
捕捉异常try-catch-finally

<script>
    function divide(a, b) {
        if(b === 0)
            throw '分母不能为零';
        else
            console.log(a / b);
    }

    try{
        divide(10, 0)
    }catch (e) {
        console.log('执行了catch');
    }finally {
        console.log('执行了finally');
    }
    // 执行了catch
    // 执行了finally'

    divide(10, 0);  // 抛出自定义异常
    console.log('看看有没有执行到这里');  // 被前面的异常截止，没有执行这句话
</script>

9、DOM操作

增删改查

1. 增加

var newDiv = document.createElement('div');
父结点.appendChild(newDiv);  // 添加到最后
父结点.insertBefore(要插入的结点, 哪个结点的前面)

2. 删除

结点.remove()
父结点.removeChild(子结点)

3. 改

结点.innerHTML = ...
结点.style = ...
结点.setAttribute(指定属性, 指定值)

4. 查

document.getElementById();
document.getElementByClass();
document.getElementByTagName();
document.getElementByName();

10、BOM操作

1. 全局作用域
   全局作用域中的变量或者函数都会变成window的属性或者方法
2. 改变窗口位置

moveTo
moveBy

3. 改变窗口大小

resizeTo
resizeBy

4. 间歇调用和超时调用

setInterval
setTimeout

<script>
    var timeoutFunc = function () {
        console.log("setTimeout时间到");
    };
    var intervalFunc = function () {
        console.log("setInterval时间到")
    };

    var timer1 = setTimeout(timeoutFunc, 1000);
    var timer2 = setInterval(intervalFunc, 2000);

    window.clearTimeout(timer1);
    window.clearInterval(timer2);
</script>

js定时器的清除
https://www.cnblogs.com/Dream2hc/p/web23863.html

js各种位置相关属性
https://www.jianshu.com/p/fffa7a8efb22
https://www.cnblogs.com/zhipeng007/p/10614651.html

11、创建对象的方式

1. 字面量的方式创建对象

var p1 = {
    name: '张三',
    age: 20,
    gender: '男',
    run: function() {
        console.log(this.name + '会跑');
    }
}

2. 内置构造函数的方式创建对象

var p1 = new Object()
p1.name = '张三';
p1.age = 20;
p1.gender = '男'；
p1.run = function() {
    console.log(this.name + '会跑');
}

3. 简单工厂函数的方式类创建对象

function createPerson(name, age, gender) {
    var p = new Object();
    p.name = name;
    p.age = age;
    p.gender = gender;
    p.run = function() {
        console.log("this.name + '会跑'");
    }
    return p;
}
var UJ = createPerson("David", 20, "男");
var Jenny = createPerson("Jenny", 19, "女");
console.log(UJ === Jenny);  // 不是同一个对象

4. 自定义构造函数创建对象
   这是js中“类”的创建最常用的方式

function Person(name, age, gender) {
    var this = new Object();  // 自动执行，创建一个空对象，this指向新对象

    this.name = name;
    this.age = age;
    this.gender = gender;

    return this;  // 自动执行，向外界返回这个新对象
}
var p = new Person('David', 20, '男');

省去自动执行的代码，即

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}
var p = new Person('David', 20, '男');

12、对象的改进

1. 使用json传递参数

function Person(options) {
    this.name = options.name;
    this.age = options.age;
    this.gender = options.gender;

    this.eat = function(something) {
        console.log(this.name + '正在吃' + something);
    }
    this.runTo = function(somewhere) {
        console.log(this.name + '正跑去' + somewhere);
    }
}
var p = new Person({name: 'David', age: 18, gender: '男'});

2. 使用函数的原型

function Person(options) {
    this.name = options.name;
    this.age = options.age;
    this.gender = options.gender;
}

Person.prototype.eat = function(something) {
    console.log(this.name + '正在吃' + something);
};
Person.prototype.run = function(somewhere) {
    console.log(this.name + '正跑去' + somewhere);
};

var p1 = new Person({name: 'David', age: 20, gender: '男'});
var p2 = new Person({name: 'Jenny', age: 19, gender: '男'})；
console.log(p1.eat === p2.eat);  // 相同方法共享同一片内存空间

3. 使用函数的原型进一步封装

function Person(options) {
    this._init(options);
}

Person.prototype = {
    _init: function(options) {
        this.name = options.name;
        this.age = options.age;
        this.gender = options.gender;
    }
    eat: function(something) {
        console.log(this.name + '正在吃' + something);
    },
    run: function(somewhere) {
        console.log(this.name + '正跑去' + somewhere);
    }
}

var p1 = new Person({name: 'David', age: 20, gender: '男'});
var p2 = new Person({name: 'Jenny', age: 19, gender: '男'})；
console.log(p1.eat === p2.eat);  // 相同方法共享同一片内存空间