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 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 Javascript
vue实例的选项总结
Jun 09 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php简单的会话类代码
2011/08/08 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Python备份Mysql脚本
2008/08/11 Python
利用python发送和接收邮件
2016/09/27 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
如何对python的字典进行排序
2020/06/19 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
J2EE模式面试题
2016/10/11 面试题
餐饮投资计划书
2014/04/25 职场文书
2014年底个人工作总结
2015/03/10 职场文书
学前班教学反思
2016/02/24 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
JavaScript组合继承详解
2021/11/07 Javascript
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android