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 miscellanea -display data real time, using window.status
Jan 09 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
详解微信小程序调用支付接口支付
Apr 28 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网站的几个实用要点
2014/12/30 PHP
php定时执行任务设置详解
2015/02/06 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
React Router基础使用
2017/01/17 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
Python实现单词翻译功能
2017/06/06 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
技校毕业生的自我评价
2013/12/27 职场文书
同事打架检讨书
2014/02/04 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
应届大专生求职信
2014/06/26 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
单位租房协议书样本
2014/10/30 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
开场白怎么写
2015/06/01 职场文书
家长意见书
2015/06/04 职场文书
合同审查法律意见书
2015/06/04 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
vue backtop组件的实现完整代码
2021/04/07 Vue.js