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 相关文章推荐
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
js模糊查询实例分享
Dec 26 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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实现的四则运算表达式计算实现代码
2011/08/02 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Django REST framwork的权限验证实例
2020/04/02 Python
python 常见的反爬虫策略
2020/09/27 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
机械机修工岗位职责
2014/08/03 职场文书
四风查摆剖析材料
2014/10/10 职场文书
世界文化遗产导游词
2019/08/07 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers