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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
JavaScript实现轮播图效果
Oct 30 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
Zerg基本策略
2020/03/14 星际争霸
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
js点击选择文本的方法
2015/02/09 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
详细探究Python中的字典容器
2015/04/14 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
new修饰符是起什么作用
2015/06/28 面试题
文化苦旅读书笔记
2015/06/29 职场文书
优秀大学生申请书
2019/06/24 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL