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 相关文章推荐
TBCompressor js代码压缩
Jan 05 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
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获取mysql数据库中的所有表名的代码
2011/04/23 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
js随机生成一个验证码
2017/06/01 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
教你如何用node连接redis的示例代码
2018/07/12 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
JavaScript console的使用方法实例分析
2020/04/28 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python函数返回值实例分析
2015/06/08 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Python遍历字典方式就实例详解
2019/12/28 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
初婚未育证明
2014/01/15 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
公民授权委托书
2014/10/15 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
四十九个javascript小知识实用技巧
2021/11/20 Javascript
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python