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 相关文章推荐
学习ExtJS border布局
Oct 08 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
js获取url中指定参数值的示例代码
Dec 14 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 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的类 功能齐全的发送邮件类
2006/10/09 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
Python 的类、继承和多态详解
2017/07/16 Python
python实现批量图片格式转换
2020/06/16 Python
python处理数据,存进hive表的方法
2018/07/04 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
会议开场欢迎词
2014/01/15 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
女娲补天教学反思
2014/02/05 职场文书
中学生打架检讨书
2014/02/10 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
nginx容器方式反向代理实战
2022/04/18 Servers