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 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
javaScript基础语法介绍
Feb 28 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
详解JavaScript对象类型
Jun 16 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
JS中的BOM应用
Feb 02 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
详解vue的双向绑定原理及实现
May 05 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 程序员的调试技术小结
2009/11/15 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
jsTree使用记录实例
2016/12/01 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
Python之re操作方法(详解)
2017/06/14 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
Python并行分布式框架Celery详解
2018/10/15 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
Python中包的用法及安装
2020/02/11 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
意大利团购网站:Groupon意大利
2016/10/11 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
.net笔试题
2014/03/03 面试题
打架检讨书100字
2014/01/19 职场文书
工作会议方案
2014/05/21 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
bat批处理之字符串操作的实现
2022/03/16 Python