1、JS的组成
ECMAScript、DOM、BOM
2、JS基本数据类型和复杂数据类型
基本数据类型
- string
- number
- boolean
- null
- undefined
复杂数据类型 - object
区别
- 存储方式不同
- 基本数据类型的变量在栈区中直接保存变量的值
- 复杂数据类型的变量在栈区中保存地址，该地址指示其“真身”在堆区中的位置
- 操作方式不同
- 基本数据类型的变量名操作变量的值
- 复杂数据类型的变量名操作变量的地址
3、JS数据类型的获取和判断
1.获取数据类型
typeof 变量
- 判断数据类型
- 使用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、创建方式
- 声明函数
该形式可用于类的创建
function 函数名称 (形参列表)
{
函数体
}
- 函数表达式
// 匿名函数(常用)
var func01 = function () {
}
// 命名的函数表达式(不常用)
var func02 = function func () {
}
- 使用构造函数创建函数对象
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、函数使用技巧
- 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
- length属性和name属性
- length属性返回形参的个数
- name属性返回函数名
function func(name, age) {}
console.log(func.length); // 2
console.log(func.name); // func
- 函数重载
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、函数的几种叫法
- 命名函数、匿名函数
- 闭包
- 函数内部还有函数
- 内部函数引用外部函数的变量
- 静态方法、实例方法
6、JS的作用域
- js中的作用域
- script标签构成的全局作用域
- 在js中函数是唯一一个可以创建局部作用域的对象
注：js中一对{}内部不算一个局部作用域
- 作用域链
函数内部还可以声明函数，形成作用域链
<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变量和函数提升
执行顺序
- 把变量的声明提升到当前作用域的最前面
- 把函数声明提升到当前作用域前面
- 执行赋值、运算
- 最后执行回调函数，如定时器、监听
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操作
增删改查
- 增加
var newDiv = document.createElement('div');
父结点.appendChild(newDiv); // 添加到最后
父结点.insertBefore(要插入的结点, 哪个结点的前面)
- 删除
结点.remove()
父结点.removeChild(子结点)
- 改
结点.innerHTML = ...
结点.style = ...
结点.setAttribute(指定属性, 指定值)
- 查
document.getElementById();
document.getElementByClass();
document.getElementByTagName();
document.getElementByName();
10、BOM操作
- 全局作用域
全局作用域中的变量或者函数都会变成window的属性或者方法 - 改变窗口位置
moveTo
moveBy
- 改变窗口大小
resizeTo
resizeBy
- 间歇调用和超时调用
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.jianshu.com/p/fffa7a8efb22
https://www.cnblogs.com/zhipeng007/p/10614651.html
11、创建对象的方式
- 字面量的方式创建对象
var p1 = {
name: '张三',
age: 20,
gender: '男',
run: function() {
console.log(this.name + '会跑');
}
}
- 内置构造函数的方式创建对象
var p1 = new Object()
p1.name = '张三';
p1.age = 20;
p1.gender = '男'；
p1.run = function() {
console.log(this.name + '会跑');
}
- 简单工厂函数的方式类创建对象
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); // 不是同一个对象
- 自定义构造函数创建对象
这是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、对象的改进
- 使用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: '男'});
- 使用函数的原型
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); // 相同方法共享同一片内存空间
- 使用函数的原型进一步封装
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); // 相同方法共享同一片内存空间
