javascript高手之路笔记4燕十八老师.docx
《javascript高手之路笔记4燕十八老师.docx》由会员分享，可在线阅读，更多相关《javascript高手之路笔记4燕十八老师.docx（13页珍藏版）》请在冰豆网上搜索。
javascript高手之路笔记4燕十八老师
正则表达式：
正则表达式的web开发中的常见场合
1.邮箱验证
2.用户名验证
3.替换字符串的某一部分
4.信息采集，用来分析有效的代码段
正则表达式：
规则表达式
“一种有规律的字符串的描述”
正则表达式是一门独立的知识，同样的一段描述，比如：
对于email的匹配表达式，
在不同语言是一样的，但是，调用的函数可能不一样
学习正则表达式
1.在js里，如果写一个正则表达式，”/正则表达式/”（不含双引号）
2.在js里，用正则表达式来验证字符串是否满足，可以用reg.test（string）
3.在js里，用正则表达式的exec（）函数，用来查找匹配的选项，并把查到的值取出
4.字符串应用正则：
string.mathc（reg）;正则查找字符串
string.search（reg）;正则查找位置
string.replace（reg,’newstr’）;正则替换
string.split（reg）;正则拆分
正则表达式3句话
1.要找什么字符
2.从哪找？
3.找几个？
1.要找什么字符？
1.1字面值’hi’，直接找’hi’
1.2字符集合来表示：
[abcd]，指匹配abcd中的任意一个
1.3用范围来表示字符[0-9][a-z][A-Z]
1.4字符“簇”（就系统为常用的字符集合创建的一个简写）
例：
[0-9]----------------------->\d
[0-9a-zA-Z_]------------->\w
[\t\v\f\r\n]-------------->\s空白符
1.5补集的形式表示字符集合
例：
[0-9---------------->[^0-9]
对于字符簇，只需把字母大写，即可表示补集
[\d]----------------->[\D],[\w]-------------->[\S]
1.6任意字符不包括换行符
2.从哪找，到哪结束
2.1\b----------->单词边界
\bhi从单词的开始边界开始匹配hi
2.2\B------------>单词的非边界，把单词的中间某一部分取出来
把中间含有hi的单词取出，即hi不能在两端
2.3^caret,从字符串的起始位置开始匹配
2.4$匹配到待匹配的字符串的结束位置
3.找多少
*：
0--------->N
+：
1--------->N
?
：
0或1次
a{n}:
字符a准确的出现n次
a{n,}:
字符a至少出现n次
a{n,m}:
字符a出现n----->m次
个数修饰符默认是贪婪模式，尽量多找
在上面的“个数”修饰符后面加？
，则为非贪婪模式，尽量少找
4.模式
以匹配为例，默认情况，match找到一次就结束
能否告诉匹配过程，一直找，在全文范围内一起找
g-------->全局模式globle
i--------->忽略大小写ignore
m------->多行模式
s--------->单行模式把整篇文章看成一行js不支持单行模式
在js里不支持单行模式的情况下，如何换行？
--什么样的模式能代表所有字符串？
--用[\d\D],[\s\S],[\w\W]代表所有字符
5.正向预查:
（?
=待查字符）字符后为‘待查字符’，则返回前面字符
6.负向预查（?
!
待查字符）找到的是单词为‘待查字符’的后面的部分
反向引用/兵向引用
子表达式：
Exec为例
匹配得到的数组，第0个单元代表“整个正则表达式的结果”
1
2
3
……
N，则代表第N个表达式的匹配结果
如何引用子表达式所匹配的结果？
$N来匹配第N个子表达式的匹配结果
JS中的事件
行为、样式与结构相分离
绑定事件的三种方式
1.直接写在html元素中声明
这个效果，等同于在点击div的时候，执行”t（）;”这一语句
在全局范围内执行
问：
在这种绑定方式中，如何达到点击后，把div的背景换成蓝色
2.第二种绑定方式
DOM对象.onclick=function（）{}
这种绑定是把一个DOM对象的onclick属性赋值一函数
在这种绑定方式中，只能给一个事件绑定一个处理函数
如何用函数来调用其他函数的形式
例：
onclick=function（）{fun1（）,fn2（）;}
那么此时，fn1,fn2中的this又指向window
如何绑定多个函数，并令this指向DOM对象？
3.第三种绑定事件的方法
DOMlev3的事件绑定标准
添加和去除监听事件
addEventListener（‘事件’,函数,）;
//第一个参数事件参数，没有前缀”on”w3c的标准，IE不支持
注意：
1.如果添加了多个事件处理函数，按添加时的先后顺序来执行
2.事件处理函数中的this指代DOM节点自身（w3c标准）
3.第一个事件参数，一很把事件名称的on去掉（w3c标准）
去除绑定
removeEventListener（‘事件’,函数）;
IE下绑定事件与解除事件的方法
attachEvent（‘on事件’,函数）;//事件要加on
detachEvent（‘on事件’,函数）;
总结：
W3caddEventListener（）与IE的attachEvent（）的不同
1.函数名不同
2.事件名不同，IE下要加on,w3c不加on
3.加事件后的执行顺序不同，w3c按绑定事件的顺序来执行，而IE6,7是后绑定的事件先发生
4.This的指向，w3c绑定函数中的this指向DOM对象，而IE6,7中，指向window对象
5.
事件的捕捉与冒泡模型
在w3c的模型中
addEventListener支持第3个参数来声明事件的模型为冒泡还是捕捉
如果声明为true，则为捕捉方式
如果声明为false，或者不声明，则为冒泡方式
注意：
IE的attchEvent没有第3个参数，不支持捕捉模型
事件对象的概念：
当事件对应的函数被触发时，函数会接收到一个参数//w3c标准
例：
xx.onclick=function（ev）{alert（er）}
点击后，ev参数就代表单击那一瞬间的“各个参数”，以一个对象的方式传过去
对于IE，当事件发生的瞬间，事件对象赋给
事件的中断
如何中断事件的传播？
？
？
？
在w3c事件.stopPropagation（）;
在IE事件.cancelBubble=true;
取消事件的默认效果
事件对象.preventDefault（）;//阻止事件的默认效果w3c方法
事件对象.returnValue=false;//设置
JS之作用域链
作用域链
原型链
AO上有哪些属性
对于函数的AO，属性来自于3个方面
1.参数
2.局部变量声明
3.函数声明
在函数调用的瞬间，AO这样形成
首先，分析参数，把分析后的参数，形成AO的属性
如果传来实参，则把实参赋给相应的属性
其次，分析var声明
以varstr=’hello’;
把str声明为AO的属性，值为undefined;
如果var声明的变量名与形参名称一致，不产生影响，因为AO的str属性已经存在
最后，分析函数声明
Function函数名（）{
}//有函数名
函数声明，假设函数名为fn，
函数声明会把函数赋为AO.fn属性的值
函数声明与函数表达式的区别
表达式必有返回值，把返回值（即茂名函数）赋给了一个变量
此时，就是普通的赋值过程
例：
varfn=function（0{}，这是一个函数表达式
对于上例，函数表达式返回函数，并把函数作为值，赐给fn
而函数声明的优先级主
This与arguments
当一个函数运行时候，函数内部能引用的变量有这么几种
AO
arguments
this
对于arguments和this，每个函数都有自己独有的arguments和this，且不进行链式查找
arguments是什么？
答：
arguments是收到的实参的副本
在词法分析中，首先按形参形成AO的属性，值为undefined，当实参传来时，再修改AO的相应属性，
并把所有收到实参收集起来，放到一个arguments对象里
T（a,b,c）{}
调用时：
t（1,2,3,4,5）5个参数
此时，AO属性只有a,b,c3个属性，arguments里有1,2,3,4,5所有的值
对于超出形参个数之外的实参，可以通过arguments获得
Arguments的索引，从0，1，2……递增，与实参逐个对应
Arguments.length属性代表实参的个数
Arguments一定不是数组，是长的比较像数组的一个对象虽然也有length属性
Arguments每个函数都有，因此，arguments只会在内部找自身的arguments，无法引用到外层的arguments
This是谁
This是指调用上下文
针对函数的应用场景来讨论
函数的4种调用方式
1：
函数方式
直接调用函数名，或函数表达式的返回值
This指代全局对象window
2：
属性方式（对象方法方式）
This是指该对象
3：
构造器方式
通过new函数名（），来创建对象
在js里，构造函数与对象的关系比较松散，对象就是”属性=>”的集合
构造器的使用，是制造一个对象，把this指向该对象
4：
call,apply方式
函数本身即是对象，对象就有方法
函数名.call（对象,参数1,参数2,………）;
以fn.call（obj,’a’,’b’）;
实际效果相当于
1:
fn内部的this指向了obj
2:
fn（‘a’,’b’）;
Apply的效果与call一样，只不过传参时，把所有参数包装在数组里，传过去
例：
fn.call（obj,’a’,’b’）=========>fn.apply（ojb,[‘a’,’b’]）;
还有一种改变this的方法，用with语句
With（对象）{
语句1：
语句2；
……
}
在with内部的语句就把参数中的对象当成了上下文环境
函数的作用域，不取决于函数运行时报环境，取决于函数声明时的环境
Js中的面向对象
属性，方法-----对象
“类”能做到封装，继承，多态，
“类”的静态方法
1.Js中的对象是什么？
答：
js的对象就是键值对的无序集合
2.3种创建对象的方法
2.1通过字面量来创建对象
例：
{age:
22,hei:
180}
{}---空对象，没有属性
2.2通过newObject（）;
2.3通过构造函数来创建对象（和第2种没区别，因为Object就是系统内建的构造函数）
Js面向对象中的封装
对象的属性外界是可读可写的，如何来达到封装的目的？
答：
通过闭包+局部变量来完成
在构造函数内部声明局部变量，和普通方法
因为作用域的关系，只有构造函数内的方法，才能访问到局部变量
而方法对于外界是开放的，因此可以通过方法来访问局部变量
Js面向对象中的继承
1.原型链继承
在查找属性或方法的过程中，沿着原型链来查找属性
对象-原型-原型的原型--------空对象------NULl
原型形成一条链
这个查找属性的方式称为js的原型链
升级会员 