轻松拿下JavaScript（四）——对象字面量，this，call()和apply()方法，JS的异常处理

最新推荐文章于 2022-03-07 17:49:23 发布

陈宗毅

最新推荐文章于 2022-03-07 17:49:23 发布

阅读量1w

点赞数 9

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yi_zz/article/details/8220811

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我们今天这讲主要讲解JavaScript的面向对象的几个内容：对象字面量，this，this，call()和apply()方法，Js的异常处理。

对象字面量：

1、我们之前看到的例子都是使用点标识符创建对象和成员的。比如：

var temp=document.getElementById('example');

我们使用了点来获取document这个对象的getElementById这么个成员，然后我们把这个成员执行一下，当然还有一个参数，然后我们把这个对象赋给temp这个变量

2、当然我们也使用过点操作符在prototype中定义方法：

myConstructor.prototype.clearMessage=function(){}

prototype相当于一个构造函数中的一个对象，首先我们创建了一个构造函数myConstructor,在这个myConstructor默认有一个prototype对象，他们在这个对象里边添加了一个成员clearMessage,这个成员是一个function，我们把这个匿名的function赋值给这个clearMessage成员变量之中。

这也相当于我们在myConstructor定义了一个共有的方法clearMessage。看个例子：

<script type="text/javascript">
function myConstructor(){
	//
}
myConstructor.prototyepe.clearMessage=function(){
	alert("");
}
var obj=new myConstructor();
obj.clearMessage();
</script>

这就是我们要讲的内容。

3、一种对象字面量作为另一种语法则更清晰便于阅读：

4、{键:值,键:值}语法中的“健/值”会成为对象的静态成员。如果给某个“健”指定的值是一个匿名函数，那么该函数就会变成对象的静态方法；否则就是对象的一个静态属性。这种语法结构与JSON语法相似。只要记住对象字面量语法会自动创建Object对象实例即可，也就是不能使用new关键字对其再次进行实例化。

5、如果要使用同样的对象字面量语法创建一个带有公有方法的构造函数，仍然需要从作为构造函数的function对象开始：

区别在于定义之前还是定义之后调用。

最后说明一点：如果使用对象字面量，那么必须小心结尾处的逗号。如果你在定义对象时，在最后一项结尾放了一个逗号，那么最后一项的值会变成null。

this：

this是一个难以琢磨的东西；

1、一个依赖于使用它的执行环境而被解析的关键字。

<script type="text/javascript">
var sound="admin";
function myFunction(){
	this.style.color="red";
	alert(sound);
}
	
</script>
</head>

<body>
<a href="#" id="a">这是测试用的超链接</a>
<script type="text/javascript" >
document.getElementById("a').οnclick=myFunction;
</script>

这段代码的意思就是获取这个a标签，然后调用这个myFunciton。然后这里的this就是这个myFunciton对象的一个实例，就是这个 <a href="#" id="a">这是测试用的超链接</a>这句话。

那我们为什么要把这句话：document.getElementById("a').οnclick=myFunction; 放到body里边呢？因为我们这代码是从上往下执行的，那么你要是把这句话放到了a标签之前，那就报错，因为这个时候a标签还没加载。或者你想在上面写的话，也可以，写在window里边：

<script type="text/javascript">
var sound="admin";
function myFunction(){
	this.style.color="red";
	alert(sound);
}
window.οnlοad=function(){
	document.getElementById("a").οnclick=myFunction;
}
</script>
</head>
<body>
<a href="#" id="a">这是测试用的超链接</a>
</body>

或者在body里边加入onload也行。

如果我们这么写：

<script type="text/javascript">
var sound="admin";
function myFunction(){
	this.style.color="red";
	alert(sound);
}
myFunction();
</script>

那么会报错，会报什么错呢？

因为我们这个myFunction是定义在window上的，相当于：

<script type="text/javascript">
var sound="admin";
function myFunction(){
	this.style.color="red";
	alert(sound);
}
window.myFunction();
</script>

this.style.color="red";这时候的this指向window。这就相当于要修改window的style。那肯定会报错呗。

call()和apply()方法：

强行把这个this这个引用指到某一个对象之上。

JS的异常处理：

JS使用try{}和catch()进行表示。

<script type="text/javascript">
function myFunction(){
	this.style.color='green';
}
try{
	myFunction();
}catch(exception){
	alert('捕获的异常名为：'+exception.name
	+'\n捕获的异常内容为：'+exception.message);
}
</script>

然后我们显示的结果为：

这比刚才的赤裸裸的报错要好的多，还可以进行异常的处理。

陈宗毅

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
轻松拿下JavaScript（四）——对象字面量，this，call()和apply()方法，JS的异常处理

我们今天这讲主要讲解JavaScript的面向对象的几个内容：对象字面量，this，this，call()和apply()方法，Js的异常处理。对象字面量：1、我们之前看到的例子都是使用点标识符创建对象和成员的。比如：var temp=document.getElementById('example');我们使用了点来获取document这个对象的getEl
复制链接

扫一扫