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 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
Vue实现穿梭框效果
Sep 30 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中上传大体积文件时需要的设置
2006/10/09 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
使用python分析git log日志示例
2014/02/27 Python
python制作最美应用的爬虫
2015/10/28 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
经理职责范文
2013/11/08 职场文书
元旦晚会邀请函
2014/01/27 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
基层党建工作简报
2015/07/21 职场文书
升学宴祝酒词
2015/08/11 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书
Java 超详细讲解十大排序算法面试无忧
2022/04/08 Java/Android