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与CSS写在同一个文件里的书写方法
Jun 02 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 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 join函数应用
2011/05/04 PHP
2014过年倒计时示例
2014/01/31 PHP
php发送post请求函数分享
2014/03/06 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
python使用Berkeley DB数据库实例
2014/09/26 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
详解Python打包分发工具setuptools
2019/08/05 Python
Python 变量的创建过程详解
2019/09/02 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
高山背包:High Sierra
2017/11/23 全球购物
文员个人的求职信范文
2013/09/26 职场文书
车间统计员岗位职责
2015/04/14 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android