3月21日

面向对象编程中的 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接口的方法

1. localStorage.setItem(key,value)：用于将key-value键值对的方式插入localStorage中。
2. localStorage.getItem(key)：读取key的localStorage字符串值。
3. localStorage.removeItem(key)：删除localStorage中key。
4. localStorage.clear()：清空localStorage所有key。
5. 需要注意的是：在localStorage中只能存储字符串类型的数据。
6. 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);
}