JavaScript计时事件
在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.
两个关键方法是:
setInterval(function,milliseconds) - 间隔指定的毫秒数不停地执行指定的代码。
function---指定运行代码
milliseconds---毫秒数
clearInterval(intervalVariable)方法用于停止setInterval()方法执行的函数代码
setInterval()的返回值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.οnlοad=function(){
var setIntervalreturnvalue=null;
var hobj=document.getElementById("test1");
function getDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var mydate=date.getDate();
var hours=date.getHours()
var minutes=date.getMinutes();
var seconds=date.getSeconds();
var timestring=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;
hobj.innerText=timestring;
}
//间隔指定的毫秒数不停地执行指定的代码
setIntervalreturnvalue=setInterval(function(){getDate();},1000);
var butobj=document.getElementById("but1");
butobj.οnclick=function(){
clearInterval(setIntervalreturnvalue);
}
}
</script>
</head>
<body>
<h1 id="test1"></h1>
<input type="button" value="clearInterval" id="but1">
<h1>
setInterval(function,milliseconds) - 间隔指定的毫秒数不停地执行指定的代码。<br>
function---指定运行代码<br>
milliseconds---毫秒数<br>
clearInterval(intervalVariable)方法用于停止setInterval()方法执行的函数代码<br>
intervalVariable----setInterval()的返回值。<br>
</h1>
</body>
</html>
setTimeout(function,milliseconds) - 间隔指定的毫秒数后执行指定的代码一次。
function---指定运行代码
milliseconds---毫秒数
clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。
setTimeout方法的返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.οnlοad=function(){
var setTimeoutreturnvalue=null;
var hobj=document.getElementById("test1");
function getDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var mydate=date.getDate();
var hours=date.getHours()
var minutes=date.getMinutes();
var seconds=date.getSeconds();
var timestring=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds; hobj.innerText=timestring;
}
//间隔指定的毫秒数后执行指定的代码一次
setTimeoutreturnvalue=setTimeout(function(){getDate();},1000);
var butobj=document.getElementById("but1");
butobj.οnclick=function(){
clearTimeout(setTimeoutreturnvalue);
}
}
</script>
</head>
<body>
<h1 id="test1"></h1>
<input type="button" value="clearInterval" id="but1">
<h1>
setTimeout(function,milliseconds) - 间隔指定的毫秒数后执行指定的代码一次。<br>
function---指定运行代码<br>
milliseconds---毫秒数<br>
clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。<br>
setTimeout方法的返回值
</h1>
</body>
</html>
闭包
1.什么是「闭包」?
「函数」和「函数内部能访问到的变量」的总和,就是一个闭包。
<script>
var local="变量"; //变量
function foo(){ //函数
console.log(local);
}
</script>
假设上面三行代码在一个立即执行函数中
<script>
function hanshu1(){
var local="变量"; //局部变量
function foo(){ //函数
console.log(local);
}
}
</script>
三行代码中,有一个局部变量 local,有一个函数 foo,foo 里面可以访问到 local 变量。好了这就是一个闭包.
有的人认为闭包是需要函数套函数,然后 return 一个函数的。
比如这样:
function foo(){
var local = 1; //局部变量
function bar(){ //被套在里面的函数
local++; //访问局部变量
return local;
}
return bar; //返回被套在里面的函数
}
var func = foo();
func();
上面代码中确实有闭包,local 变量和 bar 函数就组成了一个闭包(Closure)。
为什么有的人认为闭包是需要函数套函数呢?
是因为需要局部变量,所以才把 local 放在一个函数里,如果不把 local 放在一个函数里,local 就是一个全局变量了,达不到使用闭包的目的——隐藏变量
函数套函数只是为了造出一个局部变量,跟闭包无关。
为什么要 return bar 呢?
因为如果不 return,你就无法使用这个闭包.
所以 return bar 只是为了 bar 能被使用,也跟闭包无关。
闭包是需要函数套函数,然后 return 一个函数的说法是错误的。
局部变量
闭包的作用:在当前函数之外来访问当前函数的局部变量。
例如:假设我们在做一个游戏,在写其中关于「还剩几条命」的代码。
如果不用闭包,你可以直接用一个全局变量:
window.lives = 30 // 还有三十条命
这样看起来很不合适。万一不小心被其他的函数把这个值改成 -1 了怎么办。
所以我们不能让其他的函数「直接访问」这个变量。怎么办呢?
局部变量---定义在函数内/函数的参数,只能在当前函数中使用,超出本函数就不能访问。
如果使用局部变量时其他的函数又需要访问到局部变量,怎么办呢?
暴露一个函数,让别人可以「间接访问」。
function(){
var lives = 50;
window.奖励一条命 = function(){
lives =lives+1;
}
window.死一条命 = function(){
lives =lives-1;
}
}();
那么在其他的JS文件,就可以使用 window.奖励一条命()来涨命,使用window.死一条命()来让角色掉一条命。
看到闭包在哪了吗?
var lives = 50; //变量
window.奖励一条命 = function(){
lives += 1;
} // 函数
「函数」和「函数内部能访问到的变量」
闭包会造成内存泄露?错。
内存泄露是指你用不到(访问不到)的变量,依然占居着内存空间,不能被再次利用起来。
闭包里面的变量明明就是我们需要的变量(lives),凭什么说是内存泄露?
因为 IE。IE 有 bug,IE 在我们使用完闭包之后,依然回收不了闭包里面引用的变量。
这是 IE 的问题,不是闭包的问题。参见司徒正美的这篇文章【https://www.cnblogs.com/rubylouvre/p/3345294.html】
原型和原型链
原型和原型链是JavaScript进阶重要的概念。
尤其在插件开发过程中是不能绕过的知识点。
原型
由一个例子开始说起
看看JavaScript内置对象Array来做一个数字排序得例子
var arr1 = [1, 0, 0, 8, 6];
var arr2 = [1, 0, 0, 8, 6, 1, 1];
arr1.sort(function(n1, n2) {
return n1 - n2;
});
arr2.sort(function(n1, n2) {
return n1 - n2;
});
console.log(arr1); //[0, 0, 1, 6, 8]
console.log(arr2); //[0, 0, 1, 1, 1, 6, 8]
console.log(arr1 === arr2);//false
console.log(arr1.sort === arr2.sort);//true
本例子定义了2个数组arr1和arr2,并调用sort方法排序,当两个数组排序结束之后,分别输出这俩数组的内容,控制台输出
arr1 :[0, 0, 1, 6, 8]
arr2 :[0, 0, 1, 1, 1, 6, 8]
你把注意力集中输出的第3行和第4行。
这里用到JavaScript严格相等操作符===来判断arr1数组和arr2数组是否相等。
第3行,arr1和arr2是两个不同的数组,数组长度和元素都不一样,所以控制台输出false。
第4行,是判断arr1对象和arr2对象的函数sort是否是同一函数,结果输出了true。
数组arr1和数组arr2是俩不同的对象,但却用了公共的方法--sort
那么JavaScript是如何做到弄出这个公共的方法?
var arr1 = [1, 0, 0, 8, 6];
var arr2 = [1, 0, 0, 8, 6, 1, 1];
//数组求和方法
arr1.getSum = function() {
var sum = 0;
for(var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
}
console.log(arr1.getSum()); //输出15
console.log(arr2.getSum());//控制台报错: Uncaught TypeError: arr2.getSum is not a function
直接使用某一个对象,为其创建一个方法,这个方法它不是公共的方法。
var arr1 = [1, 0, 0, 8, 6];
var arr2 = [1, 0, 0, 8, 6, 1, 1];
//将getSum定义为原型方法
Array.prototype.getSum = function() {
var sum = 0;
for(var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
}
console.log(arr1.getSum()); //控制台输出15
console.log(arr2.getSum()); //控制台输出17
//将一个方法定义在原型对象上
对象名称.prototype----当前对象的原型对象
prototype---属性【每一个对象都有】,得到当前对象的原型对象
JavaScript中对象实例和创建对象的函数【构造器】之间建立一个链接【__proto__属性】。
__proto__属性是从创建对象的函数【构造器】中的prototype属性派生。
1.每个函数上面都有一个属性(prototype)指向了函数的原型对象(Person.prototype)。
function Person() { }
console.log(Person.prototype);
即使你只定义了一个空函数,也存在一个prototype的属性。
上面这两句话,在被浏览器执行的时候,内存中已经存在2个对象:
function Person(){ }--alert(typeof Person)--object---构造函数--new Person();--实例对象
Person.prototype----Person的原型对象---原型
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.showName = function() {
return this.name;
}
var p1 = new Person("SpringChang", 22);
console.log(p1.showName());
2.每个实例上面都有一个隐式原型(proto)指向了函数的原型对象
new Person()对象有一个隐式原型也指向了Person.prototype对象。
function Person(){ }---构造函数---Person.prototype[构造函数的原型对象]
new Person()---实例对象-----实例对象.__proto__-----Person.prototype[构造函数的原型对象]
3.实例对象访问属性或者方法的时候,自已有使用自己的,自己没有就找原型。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.showName = function() {
return "你调用的原型上面的方法";
}
var p1 = new Person("SpringChang", 22);
p1.showName = function() {
return "你调用的是p1对象上面的方法";
}
console.log(p1.showName()); //输出:你调用的是p1对象上面的方法
var p2 = new Person("SpringChang", 22);
console.log(p2.showName()); //输出:你调用的原型上面的方法
4.每个函数的原型对象上面都有一个constructor属性,指向了构造函数本身。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype--构造函数的原型对象---constructor属性
new Person()--实例对象----__proto__---构造函数的原型对象---constructor属性
new Person().constructor---构造函数本身
console.log(Person.prototype.constructor == Person); //true
原型链
上面我们提到,对象在寻找某一属性时,如果自身属性没找到就去他对应的原型对象去找
若在原型上面找到对应的属性则停止,否则继续去原型的原型找对应的属性,这样构成了一条原型链.
Person的原型其实还有一属性__proto__,他指向了上一级Object的原型对象。
console.log(Person.prototype.__proto__ === Object.prototype); //true
这时候来了一个Object对象,它是JavaScript的顶级对象,同样也有自己的原型Object.protoype.