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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
js实现返回顶部效果
Mar 10 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
vuex 的简单使用
Mar 22 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
vue 弹出遮罩层样式实例
Jul 22 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/07/17 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
python删除过期文件的方法
2015/05/29 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
快速查找Python安装路径方法
2020/02/06 Python
pycharm的python_stubs问题
2020/04/08 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
年会主持人开场白台词
2015/05/29 职场文书
暂住证明怎么写
2015/06/19 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书