javascript中this的四种用法


Posted in Javascript onMay 11, 2015

this

在函数执行时,this 总是指向调用该函数的对象。要判断 this 的指向,其实就是判断 this 所在的函数属于谁。

在《javaScript语言精粹》这本书中,把 this 出现的场景分为四类,简单的说就是:

有对象就指向调用对象
没调用对象就指向全局对象
用new构造就指向新对象
通过 apply 或 call 或 bind 来改变 this 的所指。

1) 函数有所属对象时:指向所属对象

函数有所属对象时,通常通过 . 表达式调用,这时 this 自然指向所属对象。比如下面的例子:

var myObject = {value: 100};
myObject.getValue = function () {
 console.log(this.value); // 输出 100

 // 输出 { value: 100, getValue: [Function] },
 // 其实就是 myObject 对象本身
 console.log(this);

 return this.value;
};

console.log(myObject.getValue()); // => 100

getValue() 属于对象 myObject,并由 myOjbect 进行 . 调用,因此 this 指向对象 myObject。

2) 函数没有所属对象:指向全局对象

var myObject = {value: 100};
myObject.getValue = function () {
 var foo = function () {
  console.log(this.value) // => undefined
  console.log(this);// 输出全局对象 global
 };

 foo();

 return this.value;
};

console.log(myObject.getValue()); // => 100

在上述代码块中,foo 函数虽然定义在 getValue 的函数体内,但实际上它既不属于 getValue 也不属于 myObject。foo 并没有被绑定在任何对象上,所以当调用时,它的 this 指针指向了全局对象 global。

据说这是个设计错误。

3) 构造器中的 this:指向新对象

js 中,我们通过 new 关键词来调用构造函数,此时 this 会绑定在该新对象上。

var SomeClass = function(){
 this.value = 100;
}

var myCreate = new SomeClass();

console.log(myCreate.value); // 输出100

顺便说一句,在 js 中,构造函数、普通函数、对象方法、闭包,这四者没有明确界线。界线都在人的心中。

4) apply 和 call 调用以及 bind 绑定:指向绑定的对象

apply() 方法接受两个参数第一个是函数运行的作用域,另外一个是一个参数数组(arguments)。

call() 方法第一个参数的意义与 apply() 方法相同,只是其他的参数需要一个个列举出来。

简单来说,call 的方式更接近我们平时调用函数,而 apply 需要我们传递 Array 形式的数组给它。它们是可以互相转换的。

var myObject = {value: 100};

var foo = function(){
 console.log(this);
};

foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }

var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

以所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery随意添加移除html的实现代码
Jun 21 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
jQuery统计上传文件大小的方法
Jan 24 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
bootstrap css样式之表单
Jan 19 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 #Javascript
javascript实现炫酷的拖动分页
May 11 #Javascript
JS+CSS实现的拖动分页效果实例
May 11 #Javascript
浅谈jQuery构造函数分析
May 11 #Javascript
在JavaScript中正确引用bind方法的应用
May 11 #Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 #Javascript
javascript实现验证IP地址等相关信息代码
May 10 #Javascript
You might like
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python3学习urllib的使用方法示例
2017/11/29 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
英国领先的亚洲旅游专家:Wendy Wu Tours
2018/01/21 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
学生检讨书
2015/01/27 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
数据设计之权限的实现
2022/08/05 MySQL