定时器
在网页的特效制作中,经常要用到定时器,比如:间隔一定时间后页面自动跳转,或者间隔一定时间出现某种效果,像网页上的飞雪连天,或者背景颜色的定时改变等等。
若要页面定时跳转,简单的可以在head头部的meta标记中设定重定向就可以了。但我要说的是javascript中的定时器,它的功能是十分强大和有用的。
在javascript中有两个关于定时器的函数,它们是:
1.倒计定时器:timename=setTimeout("function();",delaytime);
2.循环定时器:timename=setInterval("function();",delaytime);
其中倒计定时器顾名思义,是设定一段时间后执行function()函数,而循环定时器则是每隔一段时间都执行function()函数一次。
倒计定时器一般用在一段时间后的触发的事件,比如页面的定时跳转,有一些站点就是在注册完成后自动跳转到登录页面,或者用于确定是“老客”还是“新客”,是老客则会点击确定的某个地方(由站长设定)而快速进入站点,如果是“新客”,就不知道特定的点击处,所以可以设定5秒或者10秒转入新客页面。
循环定时器则用于页面上的持续效果,比如背景用飞雪。
function()函数,可以是一个函数,也可以是几个函数,中间用;连接,还可以接入javawcript的语句。
delaytime则是设定间隔的时间,以毫秒为单位。
定时器的取消
有时候,我们想把一个定时器去掉,像循环定时器就是一直不停的运动的。
clearTimeout(timename)来清除setTimeout()定时器,参数timename为setTimeout()函数的返回值;
clearInterval(timename)来清除setInterval()定时器,参数timename为setInterval()函数的返回值。
变量的作用域
在 Javascript 中,任何变量都是某个特定对象的属性。
基本的变量作用域
先上例子:
var scope = 'global';
function checkScope(){
var scope = 'local';
console.log(scope); // local
}
checkScope();
console.log(scope); // global
上面的例子中,声明了全局变量 scope 和函数体内的局部变量 scope。在函数体内部,局部变量的优先级比通明的全局变量要高,如果一个局部变量的名字与一个全局变量相同,那么,在声明局部变量的函数体范围内,局部变量将覆盖同名的全局变量。
下面再看一个例子:
scope = 'global';
function checkScope(){
scope = 'local';
console.log(scope); // local
myScope = 'local';
console.log(myScope); // local
}
checkScope();
console.log(scope); // local
console.log(myScope); // local
在全局作用域中声明变量可以省略 var 关键字,但是如果在函数体内声明变量时不使用 var关键字,就会发生上面的现象。首先,函数体内的第一行语句,把全局变量中的 scope 变量的值改变了。而在声明myScope 变量时,由于没有使用 var 关键字,Javascript 就会在全局范围内声明这个变量。因此,在声明局部变量时使用var 关键字是个很好的习惯。
闭包
什么是闭包?闭包有什么作用?
闭包是指有权访问另一个函数作用域中的变量的函数。
那么闭包的作用也就很明显了。
可以在函数的外部访问到函数内部的局部变量。
让这些变量始终保存在内存中,不会随着函数的结束而自动销毁。
<script>
function outer(){
var num=0;//内部变量
return function add(){//通过return返回add函数,就可以在outer函数外访问了。
num++;//内部函数有引用,作为add函数的一部分了
console.log(num);
};
}
var func1=outer();//
func1();//实际上是调用add函数, 输出1
func1();//输出2
var func2=outer();
func2();// 输出1
func2();// 输出2
</script>
js创建对象的方法
一原始方式
[javascript]
var Car = new Object();
Car.color = "blue";
Car.doors = 4;
Car.mpg = 25;
Car.showColor = function() {
return this.color;
};
document.write(Car.showColor());//输出:blue
在上面的代码中,创建对象Car。然后给它设置几个属性:它的颜色是蓝色,有四个门,每加仑油可以跑 25 英里。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。执行这段代码后,就可以使用对象Car。不过这里有一个问题,就是可能需要创建多个Car的实例,这样就造成了我们会重复许多类似的代码,这样会很麻烦。
二工厂方式
要解上述的多个类似对象声明的问题,开发者创造了能创建并返回特定类型的对象的工厂方式。这种方式就是为了解决实例化对象产生大量重复的问题。
(1)无参数的工厂方式
例如,函数createCar()可用于封装前面列出的创建Car对象的操作:
[javascript]
1. function createCar() {
2. var TempCar = new Object();
3. TempCar.color = "blue";
4. TempCar.doors = 4;
5. TempCar.mpg = 25;
6. TempCar.showColor = function() {
7. return this.color;
8. };
9. return TempCar;
10. };
11. var Car1 = createCar();
12. var Car2 = createCar();
13. document.write(Car1.showColor()+"<br/>");//输出:blue
14. document.write(Car2.showColor());//输出:blue
(2)有参数的工厂方式
我们还可以修改createCar()函数,给它传递各个属性的默认值,而不是简单地赋予属性默认值:
[javascript]
1. function createCar(Color,Doors,Mpg) {
2. var TempCar = new Object();
3. TempCar.color = Color;
4. TempCar.doors = Doors;
5. TempCar.mpg = Mpg;
6. TempCar.showColor = function() {
7. return this.color;
8. };
9. return TempCar;
10. };
11. var Car1 = createCar("red",4,23);
12. var Car2 = createCar("blue",3,25);
13. document.write(Car1.showColor()+"<br/>");//输出:red
14. document.write(Car2.showColor());//输出:blue
三构造函数方式
创建构造函数就像创建工厂方式的函数一样容易。第一步选择构造函数的名字。根据惯例,这个名字的首字母大写,以使它与首字母通常是小写的变量名分开。除了这点不同,构造函数看起来很像工厂方式的函数。请看下面的例子:
[javascript]
1. function Car(Color,Doors,Mpg) {
2. this.color = Color;
3. this.doors = Doors;
4. this.mpg = Mpg;
5. this.showColor = function() {
6. return this.color;
7. };
8. };
9. var Car1 = new Car("red",4,23);
10. var Car2 = new Car("blue",3,25);
11. document.write(Car1.showColor()+"<br/>");//输出:red
12. document.write(Car2.showColor());//输出:blue
首先在构造函数内没有创建对象,而是使用this关键字。使用new运算符构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。然后可以直接赋予this属性,默认情况下是构造函数的返回值(不必明确使用 return 运算符)。现在,用new运算符和对象名Car创建对象,就更像 ECMAScript 中一般对象的创建方式了。
就像工厂方式的函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。不过,与工厂方式的函数相似,也可以用外部函数重写构造函数,同样地,这么做语义上无任何意义。
函数的继承
构造函数的属性继承:借用构造函数
function Person (name, age) {
this.type = 'human'
this.name = name
this.age = age
}
function Student (name, age) {
// 借用构造函数继承属性成员
Person.call(this, name, age)
}
var s1 = Student('张三', 18)
console.log(s1.type, s1.name, s1.age) // => human 张三 18
构造函数的原型方法继承:拷贝继承(for-in)
function Person (name, age) {
this.type = 'human'
this.name = name
this.age = age
}
Person.prototype.sayName = function () {
console.log('hello ' + this.name)
}
function Student (name, age) {
Person.call(this, name, age)
}
// 原型对象拷贝继承原型对象成员
for(var key in Person.prototype) {
Student.prototype[key] = Person.prototype[key]
}
var s1 = Student('张三', 18)
s1.sayName() // => hello 张三
另一种继承方式:原型继承
function Person (name, age) {
this.type = 'human'
this.name = name
this.age = age
}
Person.prototype.sayName = function () {
console.log('hello ' + this.name)
}
function Student (name, age) {
Person.call(this, name, age)
}
// 利用原型的特性实现继承
Student.prototype = new Person()
var s1 = Student('张三', 18)
console.log(s1.type) // => human
s1.sayName() // => hello 张三