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比较文档位置
Apr 08 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
window.addEventListener来解决让一个js事件执行多个函数
Dec 26 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
js实现碰撞检测
Jan 29 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
写一个用户在线显示的程序
2006/10/09 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python使用chardet判断字符编码
2015/05/09 Python
整理Python中的赋值运算符
2015/05/13 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
经济管理专业毕业生推荐信
2013/11/11 职场文书
英文自荐信格式
2013/11/28 职场文书
个人贷款担保书
2014/04/01 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
房屋认购协议书
2015/01/29 职场文书
世界气象日活动总结
2015/02/27 职场文书
律政俏佳人观后感
2015/06/09 职场文书