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 相关文章推荐
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
js中小数转换整数的方法
Jan 26 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
Vue Render函数原理及代码实例解析
Jul 30 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php简单防盗链实现方法
2015/07/29 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
对python遍历文件夹中的所有jpg文件的实例详解
2018/12/08 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
巴西网上药房:onofre
2016/11/21 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书