JavaScript
2020-12-13 04:46
标签:理解 job bind 参数 特定 splice 实例 时间 独立 一、什么是Javascript 二、数据类型 1.简单数据类型:Number、String、Boolean、Undefined、Null 2.复杂数据类型:Object 三、流程控制 1.if 语句 2.switch 语句 3.while 语句 4.do...while 语句 5.for 语句 6.continue 和 break 四、函数 1.什么是函数 2.函数的定义 3.函数的调用 4.函数的返回值 5.apply、call、bind方法 6.高阶函数 7.闭包 7.1 什么是闭包: 闭包简单理解:定义在一个函数内部的函数; 7.2 闭包的用途: 作用一:可以在函数外部读取函数内部成员; 作用二:让函数内成员始终存活在内存中; 8.递归 8.1 什么是递归 在函数中直接或间接的调用自己; 五、预解析 1.什么是预解析 六、对象 1.对象的创建方式 2.内置对象 2.1 Math 对象 2.2 Data 对象 2.3 Array 对象 2.4 String 对象 3.构造函数 4.原型和原型链 4.1 什么是原型和原型链 原型:__proto__和 prototype,都是原型对象; 原型链:是一种关系,实例对象和原型对象之间的关系,关系是通过原型( __proto__ )来联系的; 4.2 原型的作用 作用一:共享数据,节省内存空间; 作用二:为了实现继承 * 构造函数可以实例化对象 5.继承 5.1 什么是继承 继承:继承是一种关系,类(class)与类之间的关系;JS中没有类,但是可以通过构造函数模拟类,然后通过原型实现继承;继承也是为了数据共享; 5.2 原型链继承 核心:改变儿子的 prototype 属性为父亲的实例; 缺点一:这种继承存在问题,就是引用类型属性共享; 缺点二:无法向父类传参 5.3 借助构造函数 在这里,我们借用call函数可以改变函数作用域的特性,在子类中用 call 方法调用父类构造函数,复制父类的属性。此时没调用一次子类,复制一次。此时,每个实例都有自己的属性,不共享。同时我们可以通过call函数给父类传递参数。 好处一:解决应用类型共享问题 好处二:解决传参数问题 缺点:上述方法也存在一个问题,共享的方法都在构造函数中定义,无法达到函数复用的效果。 5.4 组合继承 根据上述两种方式,我们可以扬长避短,将需要共享的属性使用原型链继承的方法继承,将实例特有的属性,用借用构造函数的方式继承。 5.5 拷贝继承 6.函数中 this 的指向 七、正则表达式 1.JavaScript中创建正则表达式的方式 2.重要的正则表达式 八、JavaScript的垃圾回收机制 九、JavaScript的运行机制 JavaScript 标签:理解 job bind 参数 特定 splice 实例 时间 独立 原文地址:https://www.cnblogs.com/lize520/p/10951371.html1 undefined表示一个声明了没有赋值的变量,变量只声明的时候值默认是undefined;
2 null表示一个空,变量的值如果想为null,必须手动设置;
1 语法结构:
2 if (/* 条件表达式 */){
3 // 成立执行语句
4 } else {
5 // 否则执行语句
6 }
7
8 三元运算:对if……else语句的一种简化写法
9 条件表达式 ? 成立执行表达式 : 不成立执行表达式
1 语法结构:
2 while (循环条件) {
3 //循环体
4 }
语法结构:
// for循环的表达式之间用的是;号分隔的,千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}
break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号);
continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)
1 把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用;
2 函数的作用就是封装一段代码,将来可以重复使用;
1.函数声明:
function 函数名(){
// 函数体
}
2.函数表达式:
var fn = function() {
// 函数体
}
返回值详解:
如果函数没有显示的使用 return 语句 ,那么函数有默认的返回值:undefined
如果函数使用 return 语句,那么跟再 return 后面的值,就成了函数的返回值
如果函数使用 return 语句,但是 return 后面没有任何值,那么函数的返回值也是:undefined
函数使用 return 语句后,这个函数会在执行完 return 语句之后停止并立即退出,也就是说 return 后面的所有其他代码都不会再执行。
apply 和 call 是调用的时候改变 this 指向;
bind 方法,是赋值一份的时候,改变了 this 的指向;
JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程
预解析过程:
1. 把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。
2. 把函数的声明提升到当前作用域的最前面,只会提升声明,不会提升调用。
3. 先提升var,在提升function
第一种:对象字面量
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‘);
JavaScript中的对象分为3种:内置对象、浏览器对象、自定义对象;
JavaScript 提供多个内置对象:Math/Array/Number/String/Boolean...
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() // 求指数次幂/求平方根
创建 Data 实例用来处理日期和时间。Date 对象基于1970年1月1日(世界标准时间)起的毫秒数。
数组的常用方法:
// 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()
字符串的常用方法:
// 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码转换成字符串
* 构造函数可以实例化对象
* 构造函数中有一个属性叫prototype,是构造函数的原型对象
* 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
* 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
* 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的
原型链:
如果一个对象的原型对象(__proto__),是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的原型对象,如此循环,就行成了原型链。
实例对象中有个属性,__proto__,也是对象,叫原型,不是标准的属性,浏览器使用的;
构造函数中有一个属性,prototype,也是对象,叫原型,是标准属性,程序员使用;
总结:
* 构造函数中有一个属性叫prototype,是构造函数的原型对象
* 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
* 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
* 构造函数的原型对象(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"]
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
* 普通函数中的this是谁?-----window
* 对象.方法中的this是谁?----当前的实例对象
* 定时器方法中的this是谁?----window
* 构造函数中的this是谁?-----实例对象
* 原型对象方法中的this是谁?---实例对象
1.通过构造函数创建对象
//对象创建完毕---
var reg=new RegExp(/\d{5}/);
//调用方法验证字符串是否匹配
var flag=reg.test("我的电话是10086");
console.log(flag);
2.字面量的方式创建对象
var reg=/\d{1,5}/;
var flag=reg.test("小苏的幸运数字:888");
console.log(flag);
重要的正则表达式:
邮箱:
[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}
中文:
\u4e00-\u9fa5
/^[\u4e00-\u9fa5]{2,6}$/ 表示2到6个中文