js中this的用法实例分析


Posted in Javascript onJanuary 10, 2015

本文实例分析了js中this的用法。分享给大家供大家参考。具体分析如下:

实例1:第一种调用this的方法——以函数形式调用。它代表全局对象window

<script type="text/javascript">

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>

实例3:第三种调用this的方法——以构造器的方式调用。
<script type="text/javascript">

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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
JS库之Highlight.js的用法详解
Sep 13 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
js创建对象的方式总结
Jan 10 #Javascript
js对象继承之原型链继承实例
Jan 10 #Javascript
js对象的复制继承实例
Jan 10 #Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 #Javascript
js获取会话框prompt的返回值的方法
Jan 10 #Javascript
javascript获取当前鼠标坐标的方法
Jan 10 #Javascript
js判断某个方法是否存在实例代码
Jan 10 #Javascript
You might like
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
PHP微信红包API接口
2015/12/05 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
django下创建多个app并设置urls方法
2020/08/02 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
python RSA加密的示例
2020/12/09 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
房地产营销策划方案
2014/02/08 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
大学生新学期计划书
2014/04/28 职场文书
环保建议书600字
2014/05/14 职场文书
演讲稿格式范文
2014/05/19 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android