JavaScript

Posted 2022-03-09 lize520

一、什么是javascript

二、数据类型

　　1.简单数据类型：Number、String、Boolean、Undefined、Null

1 undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined；
2 null表示一个空，变量的值如果想为null，必须手动设置；

　　2.复杂数据类型：Object

三、流程控制

　　1.if 语句

1 语法结构：
2 if (/* 条件表达式 */)
3   // 成立执行语句
4  else 
5   // 否则执行语句
6 
7 
8 三元运算：对if……else语句的一种简化写法
9 　　条件表达式 ? 成立执行表达式 : 不成立执行表达式

　　2.switch 语句

　　3.while 语句

1 语法结构：
2 while (循环条件) 
3   //循环体
4 

　　4.do...while 语句

　　5.for 语句

语法结构：
// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) 
  // 循环体4

　　6.continue 和 break

break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）;
continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

四、函数

　　1.什么是函数

1 把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用；
2 函数的作用就是封装一段代码，将来可以重复使用；

　　2.函数的定义

1.函数声明：
function 函数名()
  // 函数体


2.函数表达式：
var fn = function() 
  // 函数体

　　3.函数的调用

　　4.函数的返回值

返回值详解：
    如果函数没有显示的使用 return 语句 ，那么函数有默认的返回值：undefined
    如果函数使用 return 语句，那么跟再 return 后面的值，就成了函数的返回值
    如果函数使用 return 语句，但是 return 后面没有任何值，那么函数的返回值也是：undefined
    函数使用 return 语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说 return 后面的所有其他代码都不会再执行。

　　5.apply、call、bind方法

apply 和 call 是调用的时候改变 this 指向；
bind 方法,是赋值一份的时候,改变了 this 的指向；

　　6.高阶函数

　　7.闭包

　　　7.1 什么是闭包：

　　　　　闭包简单理解：定义在一个函数内部的函数；

　　　7.2 闭包的用途：

　　　　　作用一：可以在函数外部读取函数内部成员；

　　　　　作用二：让函数内成员始终存活在内存中；

　　8.递归

　　　　8.1 什么是递归

　　　　　　在函数中直接或间接的调用自己；

 

五、预解析

　　1.什么是预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程

预解析过程：
1. 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
2. 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
3. 先提升var，在提升function

六、对象

　　1.对象的创建方式

第一种：对象字面量

var o = 
  name: ‘zs‘,
  age: 18,
  sex: true,
  sayHi: function () 
    console.log(this.name);
  
; 

第二种：new Object()创建对象

var person = new Object();
  person.name = ‘lisi‘;
  person.age = 35;
  person.job = ‘actor‘;
  person.sayHi = function()
  console.log(‘Hello,everyBody‘);


第三种：工厂函数创建对象
function createPerson(name, age, job) 
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function()
    console.log(‘Hello,everyBody‘);
  
  return person;

var p1 = createPerson(‘张三‘, 22, ‘actor‘);

第四种：自定义构造函数
function Person(name,age,job)
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function()
      console.log(‘Hello,everyBody‘);
  

var p1 = new Person(‘张三‘, 22, ‘actor‘);

　　2.内置对象

JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象；
JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean...

　　　　2.1 Math 对象　　　

Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供；

Math.PI                        // 圆周率
Math.random()                // 生成随机数
Math.floor()/Math.ceil()     // 向下取整/向上取整
Math.round()                // 取整，四舍五入
Math.abs()                    // 绝对值
Math.max()/Math.min()         // 求最大和最小值

Math.sin()/Math.cos()         // 正弦/余弦
Math.power()/Math.sqrt()     // 求指数次幂/求平方根

　　　　2.2 Data 对象

创建 Data 实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。

　　　　2.3 Array 对象

数组的常用方法：
// 1 栈操作(先进后出)
push()
pop()         //取出数组中的最后一项，修改length属性
// 2 队列操作(先进先出)
push()           
shift()        //取出数组中的第一个元素，修改length属性
unshift()     //在数组最前面插入项，返回数组的长度
// 3 排序方法
reverse()    //翻转数组
sort();     //即使是数组sort也是根据字符，从小到大排序
// 带参数的sort是如何实现的？
// 4 操作方法
concat()      //把参数拼接到当前数组
slice()     //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice()    //删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
// 5 位置方法
indexOf()、lastIndexOf()   //如果没找到返回-1
// 6 迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、some()
// 7 方法将数组的所有元素连接到一个字符串中。
join()                                                                        

　　　　2.4 String 对象

字符串的常用方法：
// 1 字符方法
charAt()        //获取指定位置处字符
charCodeAt()      //获取指定位置处字符的ASCII码
str[0]           //html5，IE8+支持 和charAt()等效
// 2 字符串操作方法
concat()           //拼接字符串，等效于+，+更常用
slice()            //从start位置开始，截取到end位置，end取不到
substring()     //从start位置开始，截取到end位置，end取不到
substr()           //从start位置开始，截取length个字符
// 3 位置方法
indexOf()       //返回指定内容在元字符串中的位置
lastIndexOf()     //从后往前找，只找第一个匹配的
// 4 去除空白   
trim()          //只能去除字符串前后的空白
// 5 大小写转换方法
to(Locale)UpperCase()     //转换大写
to(Locale)LowerCase()     //转换小写
// 6 其它
search()
replace()
split()
fromCharCode()
// String.fromCharCode(101, 102, 103);     //把ASCII码转换成字符串

　　3.构造函数

* 构造函数可以实例化对象
* 构造函数中有一个属性叫prototype,是构造函数的原型对象
* 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
* 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
* 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的          

　　4.原型和原型链

　　　　4.1 什么是原型和原型链

　　　　　　原型：__proto__和 prototype,都是原型对象；

　　　　　　原型链：是一种关系,实例对象和原型对象之间的关系,关系是通过原型( __proto__ )来联系的；

原型链：
如果一个对象的原型对象（__proto__），是另一个构造函数的实例，这个对象的原型对象就会指向另一个对象的原型对象，如此循环，就行成了原型链。

　　　　4.2 原型的作用

　　　　　　作用一：共享数据，节省内存空间；

　　　　　　作用二：为了实现继承

实例对象中有个属性,__proto__,也是对象,叫原型,不是标准的属性,浏览器使用的；
构造函数中有一个属性,prototype,也是对象,叫原型,是标准属性,程序员使用；

总结：

* 构造函数可以实例化对象
* 构造函数中有一个属性叫prototype,是构造函数的原型对象
* 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
* 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
* 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的

　　5.继承

　　　　5.1 什么是继承

　　　　继承：继承是一种关系，类（class）与类之间的关系；JS中没有类，但是可以通过构造函数模拟类，然后通过原型实现继承；继承也是为了数据共享；

　　　　5.2 原型链继承

　　　　　  核心：改变儿子的 prototype 属性为父亲的实例；　　　

 1     // 父亲类
 2     function Parent() 
 3         this.value = ‘value‘;
 4     
 5     Parent.prototype.sayHi = function() 
 6             console.log(‘Hi‘);
 7         
 8         // 儿子类
 9     function Child() 
10 
11     
12     // 改变儿子的prototype属性为父亲的实例
13     Child.prototype = new Parent();
14 
15     var child = new Child();
16     // 首先现在child实例上进行查找，未找到，
17     // 然后找到原型对象（Parent类的一个实例），在进行查找，未找到，
18     // 在根据__proto__进行找到原型，发现sayHi方法。
19 
20     // 实现了Child继承
21     child.sayHi();

　　　　　　缺点一：这种继承存在问题，就是引用类型属性共享；

 1 // 父亲类
 2     function Parent() 
 3         this.color = [‘pink‘, ‘red‘];
 4     
 5 
 6     // 儿子类
 7     function Child() 
 8 
 9     
10     Child.prototype = new Parent();
11 
12     var child1 = new Child();
13     var child2 = new Child();
14     // 先输出child1和child2种color的值
15     console.log(child1.color); // ["pink", "red"]
16     console.log(child2.color); // ["pink", "red"]
17 
18     // 在child1的color数组添加white
19     child1.color.push(‘white‘);
20     console.log(child1.color); // ["pink", "red", "white"]
21     // child1上的改动，child2也会受到影响
22     console.log(child2.color); // ["pink", "red", "white"]

　　　　　　　　缺点二：无法向父类传参　　

　　　　5.3 借助构造函数

　　　　　在这里，我们借用call函数可以改变函数作用域的特性，在子类中用 call 方法调用父类构造函数，复制父类的属性。此时没调用一次子类，复制一次。此时，每个实例都有自己的属性，不共享。同时我们可以通过call函数给父类传递参数。

　　　　　好处一：解决应用类型共享问题

 1     // 父亲类
 2     function Parent(name) 
 3         this.name = name;
 4         this.color = [‘pink‘, ‘red‘];
 5     
 6 
 7     // 儿子类
 8     function Child() 
 9         Parent.call(this);
10 
11         // 定义自己的属性
12         this.value = ‘test‘;
13     
14 
15 
16     var child1 = new Child();
17     var child2 = new Child();
18 
19     // 先输出child1和child2种color的值
20     console.log(child1.color); // ["pink", "red"]
21     console.log(child2.color); // ["pink", "red"]
22 
23     // 在child1的color数组添加white
24     child1.color.push(‘white‘);
25     console.log(child1.color); // ["pink", "red", "white"]
26     // child1上的改动，child2并没有受到影响
27     console.log(child2.color); // ["pink", "red"]

　　　　　好处二：解决传参数问题

 1     // 父亲类
 2     function Parent(name) 
 3         this.name = name;
 4         this.color = [‘pink‘, ‘red‘];
 5     
 6 
 7     // 儿子类
 8     function Child(name) 
 9         Parent.call(this, name);
10 
11         // 定义自己的属性
12         this.value = ‘test‘;
13     
14 
15     var child = new Child(‘qq‘);
16     // 将qq传递给Parent
17     console.log(child.name); // qq

　　　　缺点：上述方法也存在一个问题，共享的方法都在构造函数中定义，无法达到函数复用的效果。

　　　　5.4 组合继承

　　　　根据上述两种方式，我们可以扬长避短，将需要共享的属性使用原型链继承的方法继承，将实例特有的属性，用借用构造函数的方式继承。

　　　　5.5 拷贝继承

 

　　6.函数中 this 的指向

* 普通函数中的this是谁?-----window
* 对象.方法中的this是谁?----当前的实例对象
* 定时器方法中的this是谁?----window
* 构造函数中的this是谁?-----实例对象
* 原型对象方法中的this是谁?---实例对象

七、正则表达式

　　1.JavaScript中创建正则表达式的方式

1.通过构造函数创建对象
    //对象创建完毕---
    var reg=new RegExp(/\d5/);
    //调用方法验证字符串是否匹配
    var flag=reg.test("我的电话是10086");
    console.log(flag);

2.字面量的方式创建对象
    var reg=/\d1,5/;
    var flag=reg.test("小苏的幸运数字:888");
    console.log(flag);

　　2.重要的正则表达式

重要的正则表达式：
邮箱：
[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+)1,2
中文：
\u4e00-\u9fa5
/^[\u4e00-\u9fa5]2,6$/  表示2到6个中文

八、JavaScript的垃圾回收机制

九、JavaScript的运行机制