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全部源代码
May 04 Javascript
JavaScript开发时的五个注意事项
Dec 08 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 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读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
php实现网页端验证码功能
2017/07/11 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
自定义jQuery选项卡插件实例
2013/03/27 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
python字符类型的一些方法小结
2016/05/16 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python读写csv文件实例代码
2019/07/05 Python
在python中用url_for构造URL的方法
2019/07/25 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
shell的种类有哪些
2015/04/15 面试题
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
节约用水演讲稿
2014/05/21 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
2014年宣传工作总结
2014/11/18 职场文书
开票员岗位职责
2015/02/12 职场文书
写给女朋友的保证书
2015/05/09 职场文书
交通处罚决定书
2015/06/24 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers