定时器 this 指向 Windows
JavaScript 的执行过程 预解析(变量)
数据集和功能集 ---- 对象
对象 ---- 属性和方法
------------------- 面向对象 ------------------------
面向对象是一种编程思想, 把我们要做的复杂事物中的 所有内容都抽象成一些对象, 通过处理这些对象的关系 完成我们要做的事情
面向对象好处: 1. 方便多人协同开发 2. 便于后期代码维护
注意: 面向对象只是对面向过程代码的封装, 并不能替代面向过程的开发方式
面向对象三要素: 封装 继承 多态(抽象)
------- 将现实中的事物 抽象为代码中的属性 和 方法 的无序集合 -------
--------- 对象: 就是将现实事物抽象为功能代码. 将现实世界的东西, 用对象的语法格式来表示....----------
----------------- 对象三种写法 ----------------------
对象字面量 方式创建(重点 较为常用)
- 对象字面量: 是封闭在花括号对 {} 中的一个对象的 0 个或多个 键: 值 无序列表
- 键: 相当于属性名
- 值: 相当于属性值, 可以是任意类型的值(数值类型, 字符串类型, 布尔类型, 甚至 函数类型)
1. 对象字面量
- var star = {
- name : '刘德华',
- age : 18,
- sex : '男',
- sayHi : function(){
- alert('大家好啊~');
- }
- };
- Object() 是构造函数 第一个字母大写
- new Object() 是调用构造函数 因为构造函数需要 new 来调用 同时再内存中创建一个对象
- 注意里面使用的时候用点 不是 冒号
2.new Object 创建对象
- var stuObj = new Obect();
- stuObj.name = 'james';
- stuObj.age = 11;
- stuObj.sex = true;
- stuObj.sayHi = function(){
- alert('大家好啊~');
- }
自定义构造函数
1. 构造函数用于创建某一大类对象, 首字母要大写.
2. 构造函数要和 new 一起使用才有意义.
- function Person(name, age, sex) {
- this.name = name;
- this.age = age;
- this.sex = sex;
- this.sayHi = function() {
- alert('我的名字叫:' + this.name + ', 年龄:' + this.age + ', 性别:' + this.sex);
- }
- }
- var bigbai = new Person('大白', 100, '男');
- var smallbai = new Person('小白', 21, '男');
- console.log(bigbai.name);
- console.log(smallbai.name);
----------- 什么是对象?------------
代码中的对象是一些属性和方法的无序集合
抽述现实世界中的一些事物, 用来描述一个特定的具体的事物, 是某一个具体事物的抽象
----- 创建对象 -------
new Object () {} 创建的对象 类型都是 object 无法用于具体对象类型的判断
如何判断对象的类型? X instanceof Y 判断 X 对象是否是 被 Y 构造创建出来
----- 构造函数 ------
构造函数的作用: 创建对象(被 new 构造函数创建出来的对象 又被叫做 实例)
1. 创建一个空对象
2. 让 this 指向刚刚创建好的空对象
3. 执行构造函数内的代码 (为相关的属性和方法赋值)
4. 返回创建好的对象
new 一个对象的过程 就是实例化一个对象
new 出来的对象就是一个实例(对象)
构造函数中的 this 指行当前 new 出来的对象(实例)
constructor 属性 用来获取创建当前对象的构造函数名 可以用来判断对象的类型
----- 静态成员和实例成员 ------
实例成员: 使用实例对象 (实例) 来调用的属性和方法(只能使用 new 创建出来的对象)
静态成员: 只能使用构造函数名进行 调用和 创建的 属性或者方法
----- 构造函数的原型 prototype 属性 ---------
构造函数的原型属性 构造函数名 prototype
prototype 主要用来访问 创建对象的构造函数的原型对象的中成员
通过构造函数创建的对象 可以访问 构造函数的 prototype 中的成员
利用构造函数的 prototype 属性可以给构造函数 增加 属性或者方法
------- 对象的原型 ----------------
__proto__是对象的原型属性等同于 这个对象的构造函数的 prototype 原型属性
对象可以访问 原型属性 (指的是构造的原型) 中的任何成员
对象的成员查找规则:
当我们使用对象调用 方法或者 属性的时候, 对象会先到 创建它的构造函数中去查找属性或者方法 如果构造函数 中不存在 则去 构造函数的 prototype 中去查找 如果还没有找到 则报错
__proto__属性具有兼容问题 属于非标准属性
-------- 注意点 -----------
当我们设置 构造函数原型对象时候 可以 直接赋值一个对象给 构造函数的 prototype 属性
注意:
1. 如果我们是直接给 prototype 属性赋值对象 则需要 冲新设置 constructor 属性
2. 如果在实例中需要使用修改以后的 prototype 属性中的成员则 需要先修改 当前构造函数的 prototype 属性 再 去创建对象 先修改后创建
----------- 正确的写法 ----------------
- function Person (name, age) {
- this.name = name
- this.age = age
- }
- Person.prototype = {
- constructor: Person, // => 手动将 constructor 指向正确的构造函数
- type: 'human',
- sayHello: function () {
- console.log('我叫' + this.name + ', 我今年' + this.age + '岁了')
- }
- }
---------- 自调用函数 -------------------
自调用函数(function() {})()
Windows. 方法名 = 要被外界访问的方法名
-----------bind----------
bind 可以改变函数中 this 指向
函数其实也是一种对象
函数的 bind()方法 主要用于修改 函数中 this 的指向, 并且返回一个新的函数
不会调用函数
函数. bind(要指向的对象)方法中第一个参数用于设置 调用 bind 的函数中 this 的指向对象
当函数调用 bind 方法以后
--------- 函数的 call----------
call 可以用改变 this 指向,, 指向 call 可以用来调用函数
- function fn(x, y) {
- console.log(this);
- console.log(x + y);
- }
- var o = {
- name: 'zs'
- };
- fn.call(o, 2, 3);
---------- 自调用函数问题 ----------
自调用函数 前面或者后面必须加分号
函数表达式声明的时候也必须加分号
自调用函数参数的作用(Windows,undefineg)
自调用函数中使用 参数 Windows 去代替 Windows 对象 在代码 压缩时候可以进行压缩 为我们压缩 为我们节约代码空间
在自调用函数中使用 undefined 主要是为了兼容 旧版本浏览器
--------if 中的函数不会提升 ---------
- // 命名函数和函数表达式 声明区别:
- //1, 命名函数,(函数声明)在执行时候由于 预解析的原因 所以 书写顺序没有要求 函数调用任何位置
- //2 函数表达式 在调用的时候 必须遵循先声明后使用
- //3. 命名函数 在新版本浏览器 的 if 语句中 不会被预解析 命名函数 在旧版本的 IE 的 if 语句 存在被预解析的问题 函数表达式 声明 在新版本浏览器中都不会被预解析
------------------this 的指向 -------------------------------------------
1. 在普通函数中 this 指向 Windows
2. 在对象的方法中 this 指向当前方法所属的对象
3. 在构造函数中的 this 指向 当前构造函数创建对象
4. 在定时器 函数中 this 指向 Windows
5. 在事件处理函数中 this 指向 当前事件处理函数所属对象
总结: 谁调用 this 就指向谁
------------- 函数的调用形式:------------------------------------------
普通函数调用 Windows. 函数名()
对象的方法调用 对象. 方法名()
构造函数 调用 new 构造函数名()
事件处理函数 DOM 对象. 事件名 = function(){}
定时器的函数 setInterval (function(){},3000);
- ----------------apply----------------------------------
- var arr = [1,2,3,4,5,6];
- console.log(Math.max.apply(null.arr));//6
- var arr=[1,3,4,67,5];
- console.log.apply(console,arr);//1 3 4 67 5
apply 方法 用于函数调用 并且 改变 函数中 this 的指向 不会调用函数
第一个参数: 用于设置 函数中 this 要指向的对象
第二个参数: 要调用函数的参数组成的数组 列如: Math.max.apply(Math,[1,2,3])
-----------------bind---------------------
bind 方法 返回一个新的函数 并且改变 this 的指向, 不会调用函数
1.bind 方法 第一个参数 用来设置 this 要指向的对象
2. 如果需要返回的函数 具有参数 则可以通过 bind 方法 第二个参数以后 进行传递实参
-----------------call-----------------------
1.call 方法的第一个参数 用来设置 this 要指向的对象
2. 如果需要调用的函数 具有参数 则可以通过 call 方法 第二个参数以后 进行传递参数 第二个参数开始 都是函数需要的实参 可以多个参数
call 方法用途:
可以用来实现 借用构造函数继承属性
call 方法还可以用于 借用内置对象的方法 列如: Array.prototype.push.call(要借用内置对象方法的伪数组, push 方法的参数)
------------------ 高阶函数 ---------------
1. 作用参数传递的函数
2. 作为返回值返回的函数
-------- 函数其他成员 -------------
- arguments
- 实参集合
-
caller
- 函数的调用者
-
length
- 形参的个数
-
name
- 函数的名称
---------sort 升序降序 --------------
- var arr=[12,44,566,131,1327,2,133]
- arr.sort(function(a,b){return a-b});
- console.log(arr);
--------- 闭包 ------------
在两个嵌套作用域中
<子作用域访问父作用域中的变量> 内层作用域访问外层作用域的的变量 或 函数
闭包的作用: 可以让我们利用函数的作用域保存一些我们需要的变量
1. 可以解决定时器中无法保存变量问题
2. 节约代码量
Closure 闭包
闭包特点: 延展函数的作用域
闭包缺点: 占用内存
---------- 定时器 ---------
script 标签中的代码被放到 执行栈中 执行
定时器的函数以及 事件处理函数 的代码 会被放到 任务队列中执行
------------ 函数的创建方式 --------------------
1. 命名函数 function 函数名(){}
2. 函数表达式
3. 自调用函数
4. 以对象 new Function()
命名函数和 函数表达式区别:
-------if 中的函数不会提升 ---------
- // 命名函数和函数表达式 声明区别:
- //1, 命名函数,(函数声明)在执行时候由于 预解析的原因 所以 书写顺序没有要求 函数调用任何位置
- //2 函数表达式 在调用的时候 必须遵循先声明后使用
- //3. 命名函数 在新版本浏览器 的 if 语句中 不会被预解析 命名函数 在旧版本的 IE 的 if 语句 存在被预解析的问题 函数表达式 声明 在新版本浏览器中都不会被预解析
自调用函数的参数的作用(Windows,undefined)
(function(w, undefined))(Windows ,undefined)
自调用函数中使用 参数 Windows 去替代 Windows 对象 在代码 压缩的时候可以进行压缩 为我们节约 代码空间
在自调用函数中使用参数 undefined 主要是为了兼容 旧版本的浏览器
继承:
通俗含义: 子承父业
通过 对父类型 抽象出一些子类型共有的 属性 让子类型进行继承, 提升代码的复用
JavaScript 中实现继承的方式:
1. 对象与对象之间的继承 -》 对象的拷贝
存在的问题: 对象与对象之间无法实现 类型的继承
2. 原型继承 -- 通过对 构造函数的 prototype 进行 重新赋值, 赋值为父类型 实现对父类型的继承
存在的问题: 无法对父类型中的属性进行重新赋值 , 一般情况使用比较少, 主要用于对 对象方法的 继承
3. 借用构造函数 通过 在子类型的构造函数中 使用 call 方法 对父类型构造函数进行 调用 完美实现 子类型对 父类型所有 属性的继承
存在的问题: 使用借用构造函数 无法 继承 父类型 构造函数原型中的 方法
4. 组合继承 = 原型继承(继承父类型的方法) + 借用构造函数继承(继承父类型的属性)
存在的问题: 通过原型继承过来的父类型的方法 是所有 子类型都可以 进行调用的 并且 如果子类型重新对自身的 原型对象进行了修改 会影响 父类型的原型
--------------- 递归 -----------------
递归: 函数自己调用自己的过程
缺点: 不好阅读, 消耗内存
--------------------- 浅拷贝 ----------------
浅拷贝: 当我们对 对象进行属性和方法拷贝的时候, 浅拷贝只能复制 对象中简单数据类型 而<复杂数据类型 的属性 则只拷贝引用>
浅拷贝不会拷贝对象属性中的对象 而只拷贝 地址(引用)
只会拷贝对象地址(不会复制新的对象)
浅拷贝 - 只拷贝对象的第一层属性
-------------------- 深拷贝 -----------------------
深拷贝 - 拷贝的是 属性中真实的对象 而不是引用
拷贝对象的时候 还要将对象中的 复杂数据类型实现完全拷贝
------------------ 回调函数 ---------------
指的是 当 a 函数作为 b 函数 d 参数传递的时候 只有当 b 函数执行完成以后 才执行 a 函数 此时 a 函数就是 b 函数的回调函数
------------------- 正则表达式 ---------
什么是正则表达式?
一组用于查找 特定字符串 的规则 / 模式
正则表达式的作用:
1. 匹配 给定的字符串是否符合正则表达式的过滤逻辑
2. 提取 可以通过正则表达式, 从字符串中获取我们想要的特定部分
3. 替换 强大的字符串替换能力
正则表达式特点:
---------- 常用元字符 -----------
ctrl+f 查找
ctrl+r 开启正则表达式
- <.+?> 找到所有标签
- \d
匹配数字
\D
匹配任意非数字的字符
\w
匹配字母或数字或下划线
\W
匹配任意不是字母, 数字, 下划线
\s
匹配任意的空白符
\S
匹配任意不是空白符的字符
.
匹配除换行符以外的任意单个字符
^
表示匹配行首的文本(以谁开始)
$
表示匹配行尾的文本(以谁结束)
限定符
说明
*
重复零次或更多次
+
重复一次或更多次
?
重复零次或一次
{n}
重复 n 次
{n,}
重复 n 次或更多次
{n,m}
重复 n 到 m 次
验证手机号: ^\d{11}$
验证邮编: ^\d{6}$
验证日期 2012-5-01
^\d{4}-\d{1,2}-\d{1,2}$
验证邮箱 xxx@itcast.cn:
^\w+@\w+\.\w+$
验证 IP 地址 192.168.1.10
^\d{1,3}\(.\d{1,3}){3}$
[] 字符串用中括号括起来, 表示匹配其中的任一字符, 相当于或的意思
[^] 匹配除中括号以内的内容
\ 转义符 用来取消 特定功能符号的 正则表达式含义
| 或者, 选择两者中的一个. 注意 | 将左右两边分为两部分, 而不管左右两边有多长多乱
() 从两个直接量中选择一个, 分组
eg:gr(a|e)y 匹配 gray 和 grey
[\u4e00-\u9fa5] 匹配汉字
深度拷贝:
- function deepCopy(o1,o2){
- for(var key in o1){
- if(o1[key] instanceof Array){
- o2[key]=[];
- deepCopy(o1[key],o2[key]);
- }else if(o1[key] instanceof Object){
- o2[key]={};
- deepCopy(o1[key],o2[key]);
- }else{
- o2[key]=o1[key];
- }
- }
- }
浅拷贝:
- function copy(o1,o2){
- for(var k in o1){
- o2[k]=o1[k];
- }
- }
遍历 dom 树:
- function loadTree(parent,callback){
- for(var i = 0; i<parent.children.length;i++){
- var child=parent.children[i];
- if(callback){
- callback(child);
- }
- loadTree(child);
- }
- }
- var ul=document.getElementById('list');
- loadTree(ul,function(element){
- element.onclick=function(){
- console.log(this.innerText);
- }
- })
如何使用 正则表达式对象?
1. new RegExp( '模式(正则表达式)', 'i' )
第一个参数用于设置 模式: 要匹配的规则
第二个参数 用于设置 是否'i' 忽略大小写'g' 全局匹配
2. var reg = / 模式 / i 是否忽略大小写
正则表达式对象. test('要匹配的字符串') -> 匹配方法
如果 要匹配的字符串符合 正则表达式条件 则返回 true 否则 返回 false
onchange 事件触发条件:
1. 文本框中的 文本内容发生变化 2. 失去焦点
------------------exec 提取 ---------------
exec 只返回一个匹配的结果 如果没有匹配的结果返回 null
---------------match 提取 -------------
match 也可以用于 根据正则表达式提取内容 可以同时提取多项内容
- test
- ----------------RegExp.$1....$9
使用 RegExp.$1 ...... $9 属性 访问 分组后的字符串不同部分的内容
--------------split---------------
trim() 方法会从一个字符串的两端删除空白字符. 在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符(如 LF,CR).
str.trim()
贪婪模式 <.+>
非贪婪模式 <.+?>
来源: http://www.bubuko.com/infodetail-2874245.html