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 相关文章推荐
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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里面的抽象类
2010/01/28 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
vue实现评论列表功能
2019/10/25 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python脚本实现网卡流量监控
2015/02/14 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
Android分包MultiDex策略详解
2017/10/30 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Python @property使用方法解析
2019/09/17 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
python实现同一局域网下传输图片
2020/03/20 Python
Django ModelForm操作及验证方式
2020/03/30 Python
python 画条形图(柱状图)实例
2020/04/24 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
汽车运用工程毕业生自荐信
2013/10/29 职场文书
电信营业员岗位职责
2015/04/14 职场文书
退货证明模板
2015/06/23 职场文书