1. 函数的定义和调用
1.1 函数的定义方式
1. 函数声明方式function关键字(命名函数)
2. 函数表达式(匿名函数)
3. new Function()
var fn=new Function('参数1', '参数2', '参数3'..., '函数体')
- Function 里面参数都必须是字符串格式
- 第三种方式执行效率低,也不方便书写,因此较少使用
- 所有函数都是Function 的实例(对象)
- 函数也属于对象
<body>
<script>
function fn(){};
var fun=function(){};
var f=new Function('a','b','console.log(a+b)');
f(1,2);
console.dir(f);
console.log(f instanceof Object);
</script>
</body>
1.2 函数的调用方式
1. 普通函数
2. 对象的方法
3. 构造函数
4. 绑定事件函数
5. 定时器函数
6. 立即执行函数
<body>
<script>
function fn(){
console.log('人生的巅峰!!!!!!!');
}
fn();
fn.call();
var o={
sayHi:function(){
console.log('人生的巅峰!!!!!');
}
}
o.sayHi();
function Star(){};
new Star();
btn.onclik=function(){};
setInterval(function(){},1000);
(function(){
console.log('人生的巅峰!!!!!');
})();
</script>
</body>
2. this
2.1 函数内 this 的指向
这些 this 的指向,是我们调用函数的时候确定的,调用方式的不同决定了this的指向不同。
一般指向我们的调用者。
调用方式 | this指向 |
---|
普通函数调用 | window |
构造函数调用 | 实例对象 原型对象里面的方法也指向实例对象 |
对象方法调用 | 该方法所属对象 |
事件绑定方法 | 绑定事件对象 |
定时器函数 | window |
立即执行函数 | window |
<body>
<button>点击</button>
<script>
function fn(){
console.log('普通函数的this'+this);
}
window.fn();
var o={
sayHi:function(){
console.log('对象方法的this:'+this);
}
}
o.sayHi();
function Star(){};
Star.prototype.sing=function(){
}
var ldh=new Star();
var btn=document.querySelector('button');
btn.onclick=function(){
console.log('绑定事件函数的this:'+this);
};
window.setTimeout(function(){
console.log('定时器的this:'+this);
},1000);
(function(){
console.log('立即执行函数的this:'+this);
})();
</script>
</body>
javascript 为我们专门提供了一些函数方法来帮助我们更优雅的处理函数内部this的指向问题,常有的有 bind(),
call(), apply()三种方法。
2.1.1 call() 方法
call() 方法调用一个对象。简单的理解为调用函数的方式,但是它可以改变函数的this指向。
fun.call(thisArg, arg1, arg2,...)
<body>
<script>
var o={
name:'andy'
}
function fn(a,b){
console.log(this);
console.log(a+b);
}
fn.call(o,1,2);
function Father(uname,age,sex){
this.uname=uname;
this.age=age;
this.sex=sex;
}
function Son(uname,age,sex){
Father.call(this,uname,age,sex);
}
var son=new Son('刘德华',18,'男');
console.log(son);
</script>
</body>
2.1.2 apply() 方法
apply() 方法调用一个函数。简单理解为调用函数的方式,但是他可以改变函数的this指向。
fun.apply(thisArg, [argsArray])
- thisArg:在fun函数运行时指定的this值
- argsArray:传递的值,必须包含在数组里面
- 返回值就是函数的返回值,因为它就是调用函数
<body>
<script>
var o={
name:'andy'
};
function fn(arr){
console.log(this);
console.log(arr);
};
fn.apply(o,['pink']);
var arr=[1,66,33,55,88];
var arr1=['red','blue'];
var max=Math.max.apply(Math,arr);
var min=Math.min.apply(Math,arr);
console.log(max,min);
</script>
</body>
2.1.3 bind() 方法
bind() 方法不会调用函数。但是能改变函数内部this指向。
fun.bind(thisArg, arg1, arg2,...)
- thisArg:在fun 函数运行时指定的this值
- arg1, arg2:传递的其他参数
- 返回由指定的this值和初始化参数改造的原函数拷贝
<body>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<script>
var o={
name:'andy'
};
function fn(a,b){
console.log(this);
console.log(a+b);
};
var f=fn.bind(o,1,2);
f();
var btns=document.querySelectorAll('button');
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
this.disabled=true;
setTimeout(function(){
this.disabled=false;
}.bind(this),2000);
}
}
</script>
</body>
call() apply() bind() 总结
相同点:
都可以改变函数内部的this指向
区别点:
1. call和apply 会调用函数,并且改变函数内部的this指向。
2. call 和 apply 传递的参数不一样,call 传递阐释arg1,arg2...形式,apply必须数组形式[arg]
3. bind 不会调用函数,可以改变函数内部this指向。
主要应用场景:
1. call 经常做继承。
2. apply 经常跟数组有关系。. 比如借助于数学对象实现数组最大值最小值
3. bind 不调用函数,但是可以翻遍this指向,比如改变定时器内部的this指向。
3. 严格模式
3.1 什么是严格模式
javascript 除了提供正常的模式外,还提供了严格模式(stict mode)。ES5的严格模式是采用具有限制性
javascript 变体的一种方式,即在严格的条件下运行JS代码。
严格模式在IE10 以上版本的浏览器才会被支持,旧版浏览器中会被忽略。
严格模式对正常的javascript语义做了一些更改:
1. 消除了javascript语法的一些不合理,不严谨之处,减少了一些怪异行为。
2. 消除代码运行的一些不安全之处,保证代码的安全。
3. 提高编译器效率,增加运行速度。
4. 禁用了在ECMAScript 的未来版本中可能会定义的一些语法,为未来新版本的javascript做好铺垫。
比如说一些保留字如:class, enum, export, extends, import, super 不能做变量名
3.2 开启严格模式
严格模式可以应用到整个脚本或个别函数中,因此在使用时,我们可以将严格模式分为 为脚本开启严格模式和 为函数开启严格模式 两种情况。
3.2.1 为脚本开启严格模式
为整个脚本开启严格模式,需要在所有语句之前放一个特定语句 ”use strict“;(或 'use strict')。
<script>
"use strict";
console.log("这是严格模式。");
</script>
因为"use strict"加了引号,所以老版本的浏览器会把他当成一行普通字符串而忽略。
<body>
<!--为整个脚本(Script标签)开启严格模式-->
<script>
'use strict';
</script>
<script>
(function(){
'use strict';
})();
</script>
</body>
3.2.2 为函数开启严格模式
要给某个函数开启严格模式,需要把”use strict“;(或'use strict';)声明放在函数体所有语句之前。
<body>
<!--为某个函数开启严格模式-->
<script>
function fn(){
'use strict';
}
function fun(){
}
</script>
</body>
3.4 严格模式中的变化
严格模式对javascript的语法和行为,都做了一些变化。
3.4.1 变量规定
1. 在正常模式下,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,
变量都必须先用var命令声明,然后再使用。
2. 严禁删除已经声明的变量。例如:delete x; 语法是错误的。
<body>
<script>
'use strict';
var num = 10;
console.log(num);
delete num;
</script>
</body>
3.4.2 严格模式下的this指向问题
1. 以前在全局作用域函数中的this指向window对象。
2. 严格模式下全局作用域中函数中的this是undefined。
3. 以前构造函数时不加new也可以调用,当普通函数,this指向全局对象。
4. 严格模式下,如果构造函数不加new调用,this会报错。
5. new实例化的构造函数指向创建的对象实例。
6. 定时器this还是指向window。
7. 事件,对象还是指向调用者。
<body>
<script>
'use strict';
function fn(){
console.log(this);
}
fn();
function Star(){
this.sex='男';
}
var ldh=new Star();
console.log(ldh.sex);
setTimeout(function(){
console.log(this);
},2000);
</script>
</body>
3.4.3 函数变化
1. 函数不能有重名的参数。
2. 函数必须声明在顶层新版本的javascript会引入”块级作用域“(ES6中已引入)。为了与新版本接轨,
不允许在非函数的代码块中声明函数。
更多严格模式要求参考 :https://developwe.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
4. 高阶函数
高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出。
<script>
function fn(callback){
callback&&callback();
}
fn(function(){alert('hi')});
</script>
<script>
function fn(){
return function(){}
}
fn();
</script>
此时fn就是一个高阶函数
函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用,最典型的就是作为回调函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div></div>
<script>
function fn(a,b,callback){
console.log(a+b);
callback && callback();
}
fn(1,2,function(){
console.log('我是最后调用的');
});
$("div").animate({
left:500
},function(){
$("div").css("backgroundColor","purple");
})
</script>
</body>
</html>
5. 闭包
5.1 变量作用域
变量根据作用域的不同可以分为两种:全局变量和局部变量
1. 函数内部可以使用全局变量
2. 函数外部不可以使用局部变量
3. 当函数执行完毕,本作用域内的局部变量会销毁
5.2 什么是闭包
闭包(closure) 指有权访问另一个函数作用域中的变量的函数,-----javascript 高级程序设计
简单理解就是,一个作用域可以访问另一个函数内部的局部变量。
<body>
<script>
function fn(){
var num=10;
return function(){
console.log(num);
}
}
var f=fn();
f();
</script>
</body>
5.5 闭包案例
1. 循环点击事件。
2. 循环中的setTimeout()。
3. 计算打车案例。
循环点击事件
<body>
<ul class="nav">
<li>榴莲</li>
<li>臭豆腐</li>
<li>大猪蹄子</li>
</ul>
<script>
var lis=document.querySelectorAll('li');
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].onclick=function(){
console.log('++++'+i);
console.log(this.index);
}
}
for(var i=0;i<lis.length;i++){
(function(i){
console.log('---'+i);
lis[i].onclick=function(){
console.log(i);
}
})(i);
}
</script>
</body>
循环中的setTimeout()
<body>
<ul class="nav">
<li>榴莲</li>
<li>臭豆腐</li>
<li>大猪蹄子</li>
</ul>
<script>
var lis=document.querySelector('.nav').querySelectorAll('li');
for(var i=0;i<lis.length;i++){
(function(i){
setTimeout(function(){
console.log(lis[i].innerHTML);
},3000)
})(i);
}
</script>
</body>
计算打车价格
<body>
<script>
var car=(function(){
var start=13;
var total=0;
return {
price: function(n){
if(n<=3){
total=start;
}else{
total=start+(n-3)*5;
}
return total
},
yd:function(flag){
return flag?total+10:total;
}
}
})();
console.log(car.price(5));
console.log(car.yd(true));
console.log(car.yd(false));
</script>
</body>
思考
<body>
<script>
var name="The Window";
var object={
name:"My Object",
getNameFunc:function(){
return function(){
return this.name;
};
}
};
console.log(object.getNameFunc()());
var name="The Window";
var object={
name:"My Object",
getNameFunc:function(){
var that=this;
return function(){
return that.name;
};
}
};
console.log(object.getNameFunc()());
</script>
</body>
5.6 闭包总结
1. 闭包是什么?
闭包是一个函数(一个作用域可以访问另外一个函数的局部变量)
2. 闭包的作用是什么?
延伸变量的作用范围
6. 递归
6.1 什么是递归?
如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。
简单理解:函数内部自己调用自己,这个函数就是递归函数。
<body>
<script>
var num=1;
function fn(){
console.log('我要打印六句话');
if(num==6){
return;
}
num++;
fn();
}
fn();
</script>
</body>
6.2 利用递归求数学题
1. 求1*2*3*4*...*n 阶乘。
2. 求斐波那契数列。
<body>
<script>
var i=1,num=1,num1=1,num2=1,n=21;
function sum(){
i++;
console.log(num);
if(num==n){
return i;
};
num=num1+num2;
num1=num2;
num2=num;
sum();
}
sum();
</script>
</body>
6.3 利用递归求:根据id返回对应的数据对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var data=[{
id:1,
name:'家电',
goods:[{
id:11,
gname:'冰箱',
goods:[{
id:111,
gname:'海尔',
},{
id:112,
gname:'美的'
}]
},{
id:12,
gname:'洗衣机'
}]
}];
function getID(json,id){
var o={};
json.forEach(function(item){
console.log(item);
if(item.id==id){
console.log(item);
o=item;
return item;
}else if(item.goods && item.goods.length>0){
o=getID(item.goods,id);
}
});
return o;
}
console.log(getID(data,112));
</script>
</body>
</html>
6.4 浅拷贝和深拷贝
1. 浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用。
2. 深拷贝拷贝多层,每一级别的数据都会拷贝。
3. Object.assign(target,...sources) es6新增方法可以浅拷贝。
6.4.1 浅拷贝
<script>
var obj={
id:1,
name:'andy',
msg:{
age:18
}
};
var o={};
console.log('---------------');
Object.assign(o,obj);
console.log(o);
o.msg.age=20;
console.log(obj);
</script>
</body>
6.4.2 深拷贝
<body>
<script>
var obj={
id:1,
name:'andy',
msg:{
age:18
},
color:['pink','red']
};
var o={};
function deepCopy(newobj,oldobj){
for(var k in oldobj){
var item=oldobj[k];
if(item instanceof Array){
newobj[k]=[];
deepCopy(newobj[k],item);
}else if(item instanceof Object){
newobj[k]=[];
deepCopy(newobj[k],item);
}else{
newobj[k]=item;
}
}
}
deepCopy(o,obj);
console.log(o);
var arr=[];
console.log(arr instanceof Object);
o.msg.age=20;
console.log(obj);
</script>
</body>
7. 正则表达式
1. 正则表达式概述
1.1 什么是正则表达式
正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也
是对象。
正则表达式通常被用来检索,替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能通过输入英文字
母,数字或者下划线,昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤页面内容中的一
些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。
其他语言也会使用正则表达式,本阶段我们主要是利用JavaScript正则表达式完成表单验证。
1.2 正则表达式的特点
1. 灵活性,逻辑性和功能性非常的强。
2. 可以迅速的用极简单的方式达到字符串的复杂控制。
3. 对于刚接触的人来说,比较晦涩难懂。比如:
4. 实际开发,一般都是直接复制写好的正则表达式,但是要求会使用正则表达式并且根据实际情况修改正则表达式。比如用户名:/^[a-z0-9_-]{3,16}$/
2. 正则表达式在JavaScript中的使用
2.1 创建正则表达式
在JavaScript中,可以通过两种方式创建一个正则表达式。
1. 通过调用RegExp对象的构造函数创建
var 变量名 = new RegExp(/表达式/);
2. 通过字面量创建
var 变量名 = /表达式/;
// 注释中间放表达式就是正则字面量
<body>
<script>
var regexp = new RegExp(/123/);
console.log(regexp);
var rg=/123/;
console.log(rg);
</script>
</body>
2.2 测试正则表达式 test
test() 正则对象方法,用于检测字符串是否符合该规则,该对象会返回true或false, 其参数是测试字符串。
regexObj.test(str)
1. regexObj 是写的正则表达式
2. str 我们要测试的文本
3. 就是检测str文本是否符合我们写的正则表示规范。
<body>
<script>
var regexp = new RegExp(/123/);
console.log(regexp);
var rg=/123/;
console.log(rg.test(123));
console.log(rg.test('abc'));
</script>
</body>
3. 正则表达式中的特殊字符
3.1 正则表达式的组成
一个正则表达式可以由简单的字符构成。比如/abc/,也可以是简单和特殊字符的组合,比如/ab*c/。其中
特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号,如:^, $, +等。
特殊字符非常多,可以参考:
- MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
- jQuery手册:正则表达式部分
- 正则测试工具:http://tool.oschina.net/regex
3.2 边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符。
边界符 | 说明 |
---|
^ | 表示匹配行首的文本(以谁开始) |
$ | 表示匹配行尾的文本(以谁结束) |
如果^和$在一起,表示必须精确匹配。
<body>
<script>
var rg = /abc/;
console.log(rg.test('abc'));
console.log(rg.test('aabcd'));
console.log('-------------------------');
var reg=/^abc/;
console.log(reg.test('abc'));
console.log(reg.test('abcd'));
console.log(reg.test('aabcc'));
console.log('-------------------------');
var reg1=/^abc$/;
console.log(reg1.test('abc'));
console.log(reg1.test('abcd'));
console.log(reg1.test('aabcd'));
console.log(reg1.test('abcabc'));
</script>
</body>
3.3 字符类
字符类表示有一系列字符可供选择,只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。
3.3.1 [-] 方括号内部范围符-
<body>
<script>
var rg=/[abc]/;
console.log(rg.test('andy'));
console.log(rg.test('bady'));
console.log(rg.test('color'));
console.log(rg.test('red'));
console.log('-------------');
var re1=/^[abc]$/;
console.log(re1.test('aa'));
console.log(re1.test('a'));
console.log(re1.test('b'));
console.log(re1.test('c'));
console.log(re1.test('abc'));
console.log('--------------------');
var reg=/^[a-z]$/;
console.log(reg.test('a'));
console.log(reg.test('z'));
console.log(reg.test('1'));
console.log(reg.test('A'));
</script>
</body>
3.3.2 字符组合
/^[a-z0-9]$/.test('a') // true
<body>
<script>
var reg1=/^[a-zA-Z0-9_-]$/;
console.log(reg1.test('a'));
console.log(reg1.test('B'));
console.log(reg1.test('8'));
console.log(reg1.test('-'));
console.log(reg1.test('_'));
console.log(reg1.test('!'));
</script>
</body>
3.3.3 [^] 方括号内部取反符 ^
/^[^abc]$/.test('a') // false
<body>
<script>
var reg1=/^[^a-zA-Z0-9_-]$/;
console.log(reg1.test('a'));
console.log(reg1.test('B'));
console.log(reg1.test('8'));
console.log(reg1.test('-'));
console.log(reg1.test('_'));
console.log(reg1.test('!'));
</script>
</body>
3.4 量词符
量词符用来设定某个模式出现的次数。
量词 | 说明 |
---|
* | 重复零次或更多次 |
+ | 重复一次或更多次 |
? | 重复零次或一次 |
{n} | 重复n次 |
{n,} | 重复n次或更多次 |
{n,m} | 重复n次到m次 |
<body>
<script>
var reg=/^a*$/;
console.log(reg.test(''));
console.log(reg.test('a'));
console.log(reg.test('aaa'));
console.log("-------------------------");
var reg1=/^a+$/;
console.log(reg1.test(''));
console.log(reg1.test('a'));
console.log(reg1.test('aaa'));
console.log("-------------------------");
var reg1=/^a?$/;
console.log(reg1.test(''));
console.log(reg1.test('a'));
console.log(reg1.test('aaa'));
console.log("-------------------------");
var reg1=/^a{3}$/;
console.log(reg1.test(''));
console.log(reg1.test('a'));
console.log(reg1.test('aaa'));
console.log("-------------------------");
var reg1=/^a{3,}$/;
console.log(reg1.test(''));
console.log(reg1.test('aaa'));
console.log(reg1.test('aaaa'));
console.log("-------------------------");
var reg1=/^a{3,5}$/;
console.log(reg1.test(''));
console.log(reg1.test('aa'));
console.log(reg1.test('aaaaa'));
console.log("-------------------------");
var reg2=/^[a-zA-Z0-9_-]{6,16}$/;
console.log(reg2.test('a'));
console.log(reg2.test('8'));
console.log(reg2.test('18'));
console.log(reg2.test('aa'));
console.log('-----------------------');
console.log(reg2.test('andy_red'));
console.log(reg2.test('andy-red'));
console.log(reg2.test('andy007'));
console.log(reg2.test('andy!007'));
</script>
</body>
3.5 括号总结
1. 大括号 量词符,里面表示重复次数
2. 中括号 字符集合。匹配方括号中的任意字符。
3. 小括号 表示优先级
可以在线测试:https://c.runoob.com/
3.6 预定义类
预定义类指的是某些常见模式的简写方式。
预定类 | 说明 |
---|
\d | 匹配0-9之间的任一数字,相当于[0-9] |
\D | 匹配所有0-9以外的字符,相当于[^0-9] |
\w | 匹配任意的字母,数字,下划线,相当于[A-Za-z0-9_] |
\W | 除任意的字母,数字,下划线,相当于[^A-Za-z0-9_] |
\s | 匹配空格(包括换行符,制表符,空格符等),相当于[\t\r\n\v\f] |
\S | 匹配非空格的字符,相当于[^\t\r\n\v\f] |
<body>
<script>
var reg=/^\d{3}-\d{8}|\d{4}-\d{7}&/
</script>
</body>
4.1 replace 替换
replace() 方法可以实现替换字符串操作,用来替换的参数可以是一个字符串或是一个正则表达式。
stringObject.replace(regexp/substr,replacement)
1. 第一个参数:被替换的字符串或者正则表达式
2. 第二个参数:替换为的字符串
3. 返回值是一个替换完毕的新字符串
<body>
<script>
var text=document.querySelector('textarea');
var btn=document.querySelector('button');
var div=document.querySelector('div');
btn.onclick=function() {
div.innerHTML=text.value.replace(/激情/,'**');
}
</script>
</body>
4.2 正则表达式参数
/表达式/[switch]
switch(也称为修饰符)按照什么样的模式来匹配,有三种值:
1. g:全局匹配
2. i:忽略大小写
3. gi:全局匹配+忽略大小写
<body>
<script>
var text=document.querySelector('textarea');
var btn=document.querySelector('button');
var div=document.querySelector('div');
btn.onclick=function() {
div.innerHTML=text.value.replace(/激情|gay/g,'**');
}
</script>
</body>