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 相关文章推荐
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
js转换对象为xml
Feb 17 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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
综合图片计数器
2006/10/09 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
毕业生就业自荐书
2013/12/15 职场文书
校园之声广播稿
2014/01/31 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
岗位工作说明书
2014/07/29 职场文书
婚前协议书范本两则
2014/10/16 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
检讨书格式
2015/05/07 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android