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 相关文章推荐
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
详解vue 图片上传功能
Apr 30 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
vue-cli点击实现全屏功能
Mar 07 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
关于手调机和数调机的选择
2021/03/02 无线电
php公用函数列表[正则]
2007/02/22 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
python中list循环语句用法实例
2014/11/10 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
python实现定时发送邮件
2020/12/23 Python
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
2015年教学工作总结
2015/04/02 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技