JavaScript类和继承 this属性使用说明


Posted in Javascript onSeptember 03, 2010

this属性表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window; 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用。 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。
先看一个在全局作用范围内使用this的例子:

<script type="text/javascript"> 
console.log(this === window); // true 
console.log(window.alert === this.alert); // true 
console.log(this.parseInt("021", 10)); // 10 
</script>

函数中的this属性是在运行时决定的,而不是函数定义时,如下:
// 定义一个全局函数 
function foo() { 
console.log(this.fruit); 
} 
// 定义一个全局变量,等价于window.fruit = "apple"; 
var fruit = "apple"; 
// 此时函数foo中this指向window对象 
// 这种调用方式和window.foo();是完全等价的 
foo(); // "apple" 
// 自定义一个对象,并将此对象的属性foo指向全局函数foo 
var pack = { 
fruit: "orange", 
foo: foo 
}; 
// 此时函数foo中this指向window.pack对象 
pack.foo(); // "orange"

全局函数apply和call可以用来改变函数中this属性的指向,如下:
// 定义一个全局函数 
function foo() { 
console.log(this.fruit); 
} 
// 定义一个全局变量 
var fruit = "apple"; 
// 自定义一个对象 
var pack = { 
fruit: "orange" 
}; 
// 等价于window.foo(); 
foo.apply(window); // "apple" 
// 此时foo中的this === pack 
foo.apply(pack); // "orange"

注:apply和call两个函数的作用相同,唯一的区别是两个函数的参数定义不同。
因为在JavaScript中函数也是对象,所以我们可以看到如下有趣的例子:
// 定义一个全局函数 
function foo() { 
if (this === window) { 
console.log("this is window."); 
} 
} 
// 函数foo也是对象,所以可以定义foo的属性boo为一个函数 
foo.boo = function() { 
if (this === foo) { 
console.log("this is foo."); 
} else if (this === window) { 
console.log("this is window."); 
} 
}; 
// 等价于window.foo(); 
foo(); // this is window. 
// 可以看到函数中this的指向调用函数的对象 
foo.boo(); // this is foo. 
// 使用apply改变函数中this的指向 
foo.boo.apply(window); // this is window.
Javascript 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
vue.js的提示组件
Mar 02 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
js消除图片小游戏代码
Dec 11 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
JavaScript类和继承 prototype属性
Sep 03 #Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 #Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 #Javascript
原生javascript实现图片轮播效果代码
Sep 03 #Javascript
IE6不能修改NAME问题的解决方法
Sep 03 #Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 #Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 #Javascript
You might like
php 多文件上传的实现实例
2016/10/23 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
python实现微信自动回复功能
2018/04/11 Python
pandas带有重复索引操作方法
2018/06/08 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
Python 串口读写的实现方法
2019/06/12 Python
python3 字符串知识点学习笔记
2020/02/08 Python
django的autoreload机制实现
2020/06/03 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
python装饰器代码深入讲解
2021/03/01 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
物业经理求职自我评价
2013/09/22 职场文书
信息部岗位职责
2013/11/12 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL