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实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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伪静态写法附代码
2008/06/20 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
pandas修改DataFrame列名的方法
2018/04/08 Python
Python中文编码知识点
2019/02/18 Python
Python chardet库识别编码原理解析
2020/02/18 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
真诚的求职信
2014/07/04 职场文书
大学生个人求职信例文
2014/07/07 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
幽默导游词开场白
2015/05/29 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python