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 相关文章推荐
IE下使用cloneNode注意事项分享
Nov 22 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
JavaScript 实现下雪特效的示例代码
Sep 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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
jQuery timers计时器简单应用说明
2010/10/28 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
Python制作爬虫采集小说
2015/10/25 Python
Python端口扫描简单程序
2016/11/10 Python
python查看微信好友是否删除自己
2016/12/19 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
创建Django项目图文实例详解
2019/06/06 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
小小商店教学反思
2014/04/27 职场文书
服务标兵事迹材料
2014/05/04 职场文书
煤矿安全协议书
2014/08/20 职场文书
个人先进事迹材料
2014/12/29 职场文书
信用卡收入证明范本
2015/06/12 职场文书
教师听课学习心得体会
2016/01/15 职场文书
python执行js代码的方法
2021/05/13 Python
Python基础之条件语句详解
2021/06/16 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript