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 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
js快速排序的实现代码
Dec 08 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
js实现多图左右切换功能
Aug 04 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
javascript中闭包closure的深入讲解
Mar 03 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
PHP中ADODB类详解
2008/03/25 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
老生常谈js数据类型
2017/08/03 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
Python实现基本线性数据结构
2016/08/22 Python
Django自定义分页效果
2017/06/27 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
基于Python实现粒子滤波效果
2020/12/01 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
会计专业个人自我鉴定
2014/03/21 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
可可西里观后感
2015/06/08 职场文书