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 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
js检测客户端不是firefox则提示下载
Apr 07 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
神族 Protoss 历史背景
2020/03/14 星际争霸
再说下636单管机
2021/03/02 无线电
再次研究下cache_lite
2007/02/14 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP如何使用Memcached
2016/04/05 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
Python的Flask框架中web表单的教程
2015/04/20 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
介绍一下Java中的Class类
2015/04/10 面试题
职工运动会邀请函
2014/02/02 职场文书
说明书格式及范文
2014/05/07 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
vue递归实现树形组件
2022/07/15 Vue.js
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang