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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
公司优秀员工获奖感言
2014/08/14 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
值班管理制度范本
2015/08/06 职场文书
给学校的建议书400字
2015/09/14 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL