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 Dialog的内存泄露问题解决方法
Jun 18 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
深入理解js generator数据类型
Aug 16 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
JS实现网站吸顶条
Jan 08 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
Linux编译升级php的详细方法
2013/11/04 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python抓取网页内容示例分享
2014/02/24 Python
python fabric实现远程操作和部署示例
2014/03/25 Python
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python 对象和json互相转换方法
2018/03/22 Python
简单实现python聊天程序
2018/04/01 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
Python错误的处理方法
2020/06/23 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
转变工作作风心得体会
2016/01/23 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android