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 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
微信小程序实现购物车功能
Nov 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
Javascript验证方法大全
2015/09/21 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python中hashlib模块用法示例
2017/10/30 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
实例讲解Python爬取网页数据
2018/07/08 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
GWT都有什么特性
2016/12/02 面试题
四种会话跟踪技术
2015/05/20 面试题
经济管理自荐书
2014/06/09 职场文书
辞职信标准格式
2015/02/27 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
Linux中如何安装并部署Redis
2022/04/18 Servers
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技