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中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
PHP守护进程实例
Mar 06 Javascript
js实现图片无缝滚动
Dec 23 Javascript
深入理解node.js之path模块
May 03 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
微信支付开发订单查询实例
2016/07/12 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
jQuery.each使用详解
2015/07/07 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
跟我学习javascript的call(),apply(),bind()与回调
2015/11/16 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python生成器常见问题及解决方案
2020/03/21 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
日语系毕业生推荐信
2013/11/11 职场文书
中学生个人自我评价
2014/02/06 职场文书
《曹刿论战》教学反思
2014/03/02 职场文书
投标服务承诺书
2014/05/28 职场文书
国庆节标语大全
2014/10/08 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript