js中this的用法实例分析
更新时间：2015年01月10日 16:21:21 投稿：shichen2014
这篇文章主要介绍了js中this的用法,实例分析了js中this的4种常见用法,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例分析了js中this的用法。分享给大家供大家参考。具体分析如下：
实例1：第一种调用this的方法——以函数形式调用。它代表全局对象window
复制代码 代码如下:
<script type="text/javascript">
function t(){
alert(this);//这里this表示window对象。
}
t();
</script>
function t(){
alert(this);//这里this表示window对象。
}
t();
</script>
实例2：第二种调用this的方法——以对象属性的形式调用。它代表该对象。实例中onclick为p元素对象的属性
复制代码 代码如下:
<html>
<head>
<script type="text/javascript">
function t(){
alert(this);
this.style.background = 'green';
}
window.onload = function(){
document.getElementById('eng').onclick = t;
}
</script>
</head>
<body>
<p id="eng">abcd</p>
</body>
</html>
<head>
<script type="text/javascript">
function t(){
alert(this);
this.style.background = 'green';
}
window.onload = function(){
document.getElementById('eng').onclick = t;
}
</script>
</head>
<body>
<p id="eng">abcd</p>
</body>
</html>
实例3：第三种调用this的方法——以构造器的方式调用。
复制代码 代码如下:
<script type="text/javascript">
function dog(){
this.legs = 4;
this.bark = function(){
alert("汪汪...");
}
}
var wangcai = new dog();//创建对象的方式。new 函数名();
wangcai.bark();
</script>
function dog(){
this.legs = 4;
this.bark = function(){
alert("汪汪...");
}
}
var wangcai = new dog();//创建对象的方式。new 函数名();
wangcai.bark();
</script>
说明：
（1）如果直接调用dog()函数，而不是以创建对象的方式调用，则相当于第一种调用了，即this代表着全局对象window。
（2）js中没有类的概念，但是有对象的概念；
（3）对象的创建可以采用var = objName{name:'abc',age:40}这种方式创建，也可以通过构造函数来创建；
（4）什么是构造函数：当一个普通函数以“new 函数名()”的方式调用时，此函数就充当构造函数。
实例4：第四种调用this的方法——call和apply方式
复制代码 代码如下:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var d = document.getElementById('hi');
if(hi.addEventListener){//chrome 和 firefox
hi.addEventListener('click',function(){alert(this.id)},false);//w3c模型中，this指向DOM对象。this.id结果为hi
}else{// ie
hi.attachEvent('onclick',function(){alert(this.id)});//ie8及ie8以下，这里this指向全局对象window。结果this.id结果为undefined
}
}
</script>
</head>
<body>
<p id="hi">hello world</p>
</body>
</html>
<head>
<script type="text/javascript">
window.onload = function(){
var d = document.getElementById('hi');
if(hi.addEventListener){//chrome 和 firefox
hi.addEventListener('click',function(){alert(this.id)},false);//w3c模型中，this指向DOM对象。this.id结果为hi
}else{// ie
hi.attachEvent('onclick',function(){alert(this.id)});//ie8及ie8以下，这里this指向全局对象window。结果this.id结果为undefined
}
}
</script>
</head>
<body>
<p id="hi">hello world</p>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
浅析JavaScript中的平稳退化（graceful degradation）
所谓平稳退化，就是指可以让访问者在浏览器不支持javascript或者禁用了JavaScript的时候依旧可以顺利的浏览你的网页，下文给大家简单介绍了js中的平稳退化，感兴趣的朋友一起看看吧2017-07-07
本文主要介绍了canvas绘制环形进度条的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了echarts多条折线图动态分层的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
本文主要介绍了Mysql内储存JSON字符串根据条件进行查询，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要为大家介绍了前端开发TypeScript的入门基础教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-02-02
这篇文章主要给大家介绍了关于JavaScript如何将base64图片转化为URL格式的相关资料,Base64是一种编码方式,而不是真正的加密方式,即使算Base64也仅用作一个简单的加密来保护某些数据,而真正的加密通常都比较繁琐,需要的朋友可以参考下2023-07-07
通用的javascript 换行色换列色的小js...2007-04-04
动态生成方法的例子，这些方法在新对象实例化的时候创建2009-07-07
Bootstrap datepicker日期选择器插件使用详解
这篇文章主要为大家详细介绍了Bootstrap datepicker日期选择器插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论