面向对象编程中的 this
1.this在对象中的运用
this 关键字是个非常重要的语法点,在 javascript 编程中如果对 this 不能理解,大部分的编程任务是无法完成的。
this 返回的是一个对象,简单的说就是返回属性或者方法当前所在的对象。
this.property,在这个代码中,this就是指property属性所在的对象
var person = {
name : "Tom",
description: function() {
return "name:" + this.name;
}
};
console.log(person.description()); // name:Tom
上面代码中,this.name
表示 descriptioin 方法所在的对象的name属性。调用person.description()
方法时,descriptioin 方法所有在当前对象是 person,所有就是调用person.name
。
var f = function() {
console.log("name:" + this.name);
}
var p1 = {
name : "Tom",
desc : f
};
var p2 = {
name : "Jack",
desc : f
};
p1.desc(); // name:Tom
p2.desc(); // name:Jack
在上面的代码中,f函数中使用了this关键字,随着f所在的对象不同,this的指向也不同。
2.this在网页编程中的运用
<input type="button" value="删除" onclick="delLine(this)" />
function delLine(obj){
var trNode = obj.parentNode.parentNode;
trNode.parentNode.removeChild(trNode);
}
3.this在函数中的运用
列子1
this 的指向在函数定义的时候是确定不了的,只有函数执行的时候才能去确定this到底指向谁,实际上this最终指向的是调用它的对象。
function a(){
var user = 'javascript';
lg(this.user);//undifined
lg(this);//Window
}
a();
//window.a();
alert 实际上也是window的对象。
列子2
var o = {
user:'javascript',
fn:function(){
lg(this.user);
lg(this);
}
}
o.fn();
window.o.fn();
wondow是JS中的全局对象,我们创建变量实际上是给window对象添加属性。
列子3
var o = {
a:10,
b:{
a:12,
fn:function(){
lg(this.a);
lg(this);
}
}
}
// window.o.b.fn();
var j = o.b.fn;
j();
最终是window调用的fn方法。
Web Storage
Storage接口用于在浏览器客户端中存储用户自定义的信息。
有几种存储形式:
- LocalStorage:永久的存储在浏览器中,但是要注意,在不同的浏览器中间数据是不能共享的。
- SessionStorage:当前页面会话基本的存储,当浏览器关闭或页面关闭时,数据就会丢失。
- GlobalStorage:HTML5中被localStorage代替。
为了能访问到同一个localStorage对象,页面必须来自同一个域名,使用同一种协议,在同一个端口上。
我们只介绍localStorage的相关用法。
1.LocalStorage接口的方法
- localStorage.setItem(key,value):用于将key-value键值对的方式插入localStorage中。
- localStorage.getItem(key):读取key的localStorage字符串值。
- localStorage.removeItem(key):删除localStorage中key。
- localStorage.clear():清空localStorage所有key。
- 需要注意的是:在localStorage中只能存储字符串类型的数据。
- key():在指定的数字位置获取该位置的名字。
//使用方法来存储数据
localStorage.setItem('name','Bizzbee');
//用属性设值
localStorage.username = "bizzbee";
console.log(localStorage);
console.log(localStorage.getItem('username'));
console.log(localStorage.name);
Error 对象和try..catch语句
Error 对象
Javascript解析或者执行时,一旦发生错误,JavaScript引擎就会抛出一个错误对象。JavaScript原生的提供一个Error构造函数,所有抛出的错误都是这个构造函数的实例。
根据语言标准,Error对象示例必须具有message属性,表示错误出现时的提示信息。对于大部分的Javascript引擎,对Error对象还提供name和stock属性,分别表示错误的名称和错误的堆栈信息,他们是非标准的,不是每一个Error实例都要去实现。
f2();
function f1() {
console.log(abc);
}
function f2() {
f1();
}
观察控制台中的错误。
其中:“abc is not defined”是错误提示信息。
最下面的三行错误信息就是堆栈信息。
try...catch语句
为了对错误进行处理,我们需要使用try...catch结构。
允许在try...catch块最后定义finally块,表示不管是否出现错误,都必须要在后面运行的语句。
在finally块中一般都是做一些清理的工作。
function f1() {
;;;;;
try {
console.log("begin");
console.log(abc); // 一旦出错,Javascript引擎就是构造一个Error对象
} catch(err) {
console.log(err.message);
} finally {
console.log("end");
}
Javascript的原生错误类型
Error对象是最一般的错误类型,在其基础上,Javascript还定义了6中错误,也就是说存在6中派生的错误对象。
1. SyntaxError是解析代码时发生的错误
var 1a = "abc";
console.log ("abc");
2. ReferenceError 是引用一个不存在的变量发生的错误
console.log(abc); // 引用一个不存在的变量
console.log() = 1; // 将一个值分配给一个无法分配的对象
3. RangeError 是当一个值超出有效范围时发生的错误var arr = new Array(-1);
4.TypeError 是变量或者参数不是预期类型时发生的错误。比如字符串、数值、布尔等原始类型的值使用new命令,就是抛出该错误。new 123;
5.URIError是URI相关函数不正确时抛出的错误
6.EvalError 是Eval函数没有正确执行时抛出的错误
Window对象
属性名 | 描述 |
---|---|
navigator | 浏览器信息 |
location | 浏览器定位和导航 |
history | 窗口浏览器历史 |
screen | 屏幕信息 |
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:window.document.getElementById("header");
与此相同:document.getElementById("header");
avaScript 计时事件
通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
- setTimeout() - 暂停指定的毫秒数后执行指定的代码
Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
1.setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码。
window.setInterval("javascript function",milliseconds);
window.setInterval() 方法可以不使用window前缀,直接使用函数setInterval()。
setInterval() 第一个参数是函数(function)。
第二个参数间隔的毫秒数
注意: 1000 毫秒是一秒。
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
在页面上显示一个时钟:
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
2.如何停止执行?
clearInterval()
方法用于停止setInterval()
方法执行的函数代码。
语法
window.clearInterval(intervalVariable)
window.clearInterval() 方法可以不使用window前缀,直接使用函数clearInterval()。
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量:
myVar=setInterval("javascript function",milliseconds);
然后你可以使用clearInterval()
方法来停止执行。
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
3.setTimeout() 方法
语法
window.setTimeout("javascript 函数",毫秒数);
setTimeout()
方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个setTimeout()
,你可以使用这个变量名来指定它。setTimeout()
的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')
",或者对函数的调用,诸如alertMsg()
"。第二个参数指示从当前起多少毫秒后执行第一个参数。
提示:1000 毫秒等于一秒。
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
4.如何停止执行?
clearTimeout()
方法用于停止执行setTimeout()方法的函数代码。
语法
window.clearTimeout(timeoutVariable)
window.clearTimeout()
方法可以不使用 window 前缀。
要使用clearTimeout()
方法, 你必须在创建超时方法中(setTimeout)使用全局变量:
myVar=setTimeout("javascript function",milliseconds);
如果函数还未被执行,你可以使用 clearTimeout() 方法来停止执行函数代码。
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}