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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
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
短波收音机简介
2021/03/01 无线电
PHP获取文件后缀名的三个函数
2012/10/15 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python实现模拟时钟代码推荐
2015/11/08 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
zooplus意大利:在线宠物商店
2019/08/07 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
留学推荐信写作指南
2014/01/25 职场文书
同居协议书范本
2014/04/23 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
办理收楼委托书范本
2014/10/09 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript