Js基础回顾(二)

1、this

解析器（浏览器）在调用函数每次都会向函数内部传递进一个隐含的参数,
             *     这个隐含的参数就是this，this指向的是一个对象，
             *     这个对象我们称为函数执行的 上下文对象，
             *     根据函数的调用方式的不同，this会指向不同的对象
             *         1.以函数的形式调用时，this永远都是window
             *         2.以方法的形式调用时，this就是调用方法的那个对象

function fun(){
				console.log(this);
			}
			
			fun();//函数形式调用
			

function fun(){
				console.log(this);
			}
			
			//fun();
			
			//创建一个对象
			var obj = {
				name:"孙悟空",
				sayName:fun
			};
			obj.sayName();//方法的形式调用 this代表obj对象

2、构造函数

构造函数就是一个普通的函数，创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写

构造函数和普通函数的区别就是调用方式的不同
             *     普通函数是直接调用，而构造函数需要使用new关键字来调用

使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。
             *     我们将通过一个构造函数创建的对象，称为是该类的实例

this的情况：
             *     1.当以函数的形式调用时，this是window
             *     2.当以方法的形式调用时，谁调用方法this就是谁
             *     3.当以构造函数的形式调用时，this就是新创建的那个对象

function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				this.sayName = function(){
					alert(this.name);
				};
			}
      var per = new Person("孙悟空",18,"男");
	  var per2 = new Person("玉兔精",16,"女");

3、原型 prototype

     我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
             *         这个属性对应着一个对象，这个对象就是我们所谓的原型对象

 

4、数组（Array） 数组也是一个对象

//创建数组对象
var arr = new Array();
arr[0] = 10;
arr[1] = 33;
//向数组的最后一个位置添加元素
arr[arr.length] = 70;

使用字面量来创建数组

var arr = [];   arr = [10];  或  var arr = [1,2,3,4,5,10];

数组中的元素可以是任意的数据类型

//也可以是对象
var obj = {name:"孙悟空"};
arr[arr.length] = obj;
arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}];
//也可以是一个函数
arr = [function(){alert(1)},function(){alert(2)}];
//数组中也可以放数组，如下这种数组我们称为二维数组
arr = [[1,2,3],[3,4,5],[5,6,7]];

一般我们都是使用for循环去遍历数组，还有forEach()

//创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
arr.forEach(function(value , index , obj){
				console.log(value);
			});

像这种函数，由我们创建但是不由我们调用的，我们称为回调函数

第一个参数，就是当前正在遍历的元素
第二个参数，就是当前正在遍历的元素的索引
第三个参数，就是正在遍历的数组

5、函数的方法call()和apply() 

需要通过函数对象来调用，作用可以修改this的指向

- 当对函数调用call()和apply()都会调用函数执行

 - 在调用call()和apply()可以将一个对象指定为第一个参数
             *       此时这个对象将会成为函数执行时的this
             *     - call()方法可以将实参在对象之后依次传递
             *     - apply()方法需要将实参封装到一个数组中统一传递

function fun() {
			    alert(this);
			}
			
			var obj = {
				name: "obj",
			};
            fun();
			fun.call(obj,2,3);
			fun.apply(obj,[2,3]);

 

this的情况：
             *         1.以函数形式调用时，this永远都是window
             *         2.以方法的形式调用时，this是调用方法的对象
             *         3.以构造函数的形式调用时，this是新创建的那个对象
             *         4.使用call和apply调用时，this是指定的那个对象

 

6、类数组对象arguments（类似数组不是数组）

在调用函数时，浏览器每次都会传递进两个隐含的参数：
             *     1.函数的上下文对象 this
             *     2.封装实参的对象 arguments，在调用函数时，我们所传递的实参都会在arguments中保存

function fun(a,b){
				console.log(arguments instanceof Array);//false
				console.log(Array.isArray(arguments));//false
				console.log(arguments[1]);//true
				console.log(arguments.length);//2
				//属性对应一个函数对象，就是当前正在指向的函数的对象
				console.log(arguments.callee == fun);//true
			}
			
			fun("hello",true);

7、正则表达式

			//i 忽略大小写  g 全局匹配模式（找了第一个还继续找）
           //这个正则表达式可以来检查一个字符串中是否含有ab
			var reg = new RegExp("ab","i");
			
			var str = "a";
			
			/*
			 * 正则表达式的方法：
			 * 	test()
			 * 	 - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，
			 * 		如果符合则返回true，否则返回false
			 */
			var result = reg.test(str);
			console.log(result);//false

使用字面量来创建正则表达式
             *     语法：var 变量 = /正则表达式/匹配模式

/*
			 * []里的内容也是或的关系
			 * [ab] == a|b
			 * [a-z] 任意小写字母
			 * [A-Z] 任意大写字母
			 * [A-z] 任意字母
			 * [0-9] 任意数字
			 */
			reg = /[A-z]/;
			
			//检查一个字符串中是否含有 abc 或 adc 或 aec
			reg = /a[bde]c/;
			
			/*
			 * [^ ] 除了
			 */
			reg = /[^ab]/;
			
			reg = /[^0-9]/;
			
			console.log(reg.test("12a3456"));

字符串和正则相关方法

/*
			 * match()
			 * 	- 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
			 * 	- 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
			 * 		我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
			 * 		可以为一个正则表达式设置多个匹配模式，且顺序无所谓
			 * 	- match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
			 * 
			 * 	
			 */
			str = "1a2a3a4a5e6f7A8B9C";
			
			result = str.match(/[a-z]/ig);
			
			console.log(result[2]);

/*
			 * replace()
			 * 	- 可以将字符串中指定内容替换为新的内容
			 *  - 参数：
			 * 		1.被替换的内容，可以接受一个正则表达式作为参数
			 * 		2.新的内容
			 *  - 默认只会替换第一个
			 */
			//result = str.replace(/[a-z]/gi , "@_@");
			result = str.replace(/[a-z]/gi , "");

8、Dom对象

浏览器已经为我们提供 文档节点 对象这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页

事件，就是用户和浏览器之间的交互行为，    比如：点击按钮，鼠标移动、关闭窗口。。。

onload事件会在整个页面加载完成之后才触发

* 为window绑定一个onload事件
             *         该事件对应的响应函数将会在页面加载完成之后执行，
             *         这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

window.onload = function(){
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
					alert("hello");
				};
			};

9、事件的冒泡（Bubble）
                 *     - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
                 *     - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡

- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
                 *             一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

10、定时调用与延时调用

  可以将一个函数，每隔一段时间执行一次

var num = 1;
				
				var timer = setInterval(function(){
					
					count.innerHTML = num++;
					
					if(num == 11){
						//关闭定时器
						clearInterval(timer);
					}
					
				},1000);
//clearInterval()可以用来关闭一个定时器

var timer = setTimeout(function(){
				console.log(num++);
			},3000);
			
			//使用clearTimeout()来关闭一个延时调用
			//clearTimeout(timer);

延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次

 

11、JSON

JSON分类：  1.对象 {}       2.数组 []
                      
             * 将JSON字符串转换为JS中的对象
             *     在JS中，为我们提供了一个工具类，就叫JSON
             *     这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON

var json = '{"name":"孙悟空","age":18,"gender":"男"}';
			
			/*
			 * json --> js对象
			 * 	 JSON.parse()
			 * 		- 可以将以JSON字符串转换为js对象
			 * 		- 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
			 */
			
			var o = JSON.parse(json);
			var o2 = JSON.parse(arr);
			console.log(o.gender);

var obj3 = {name:"猪八戒" , age:28 , gender:"男"};
			
			
			/*
			 * JS对象 ---> JSON
			 * 	JSON.stringify()
			 * 		- 可以将一个JS对象转换为JSON字符串
			 * 		- 需要一个js对象作为参数，会返回一个JSON字符串
			 */
			
			var str = JSON.stringify(obj3);
			console.log(str);