学习掌握JavaScript中this的使用技巧


Posted in Javascript onAugust 29, 2016

tip

首先,我知道这篇文章很无聊,无非就是关于 js 中的 this,并且也已经有千千万万的文章写过这部分内容了; 
但是,我还是想写一篇关于 js 中的 this 的文章,算是一个总结归纳吧;(大神们可以绕行看我的其他文章) 
在 js 中,this 这个上下文总是变化莫测,很多时候出现 bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就 ok 了。 

全局执行
首先,我们在全局环境中看看它的 this 是什么: 
first. 浏览器:

console.log(this);

// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

可以看到打印出了 window 对象; 

second. node:

console.log(this);

// global

可以看到打印出了 global 对象; 

总结:在全局作用域中它的 this 执行当前的全局对象(浏览器端是 Window,node 中是 global)。 

函数中执行
纯粹的函数调用 
这是最普通的函数使用方法了:

function test() {
 console.log(this);
};

test();

// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

我们可以看到,一个函数被直接调用的时候,属于全局调用,这时候它的 this 指向 全局对象; 

严格模式 ‘use strict'; 

如果在严格模式的情况下执行纯粹的函数调用,那么这里的的 this 并不会指向全局,而是 undefined,这样的做法是为了消除 js 中一些不严谨的行为:

'use strict';
function test() {
 console.log(this);
};

test();

// undefined

当然,把它放在一个立即执行函数中会更好,避免了污染全局:

(function (){
 "use strict";
 console.log(this);
})();

// undefined

作为对象的方法调用 
当一个函数被当作一个对象的方法调用的时候:

var obj = {
 name: 'qiutc',
 foo: function() {
 console.log(this.name);
 }
}

obj.foo();

// 'qiutc'

这时候,this 指向当前的这个对象; 

当然,我们还可以这么做:

function test() {
 console.log(this.name);
}
var obj = {
 name: 'qiutc',
 foo: test
}

obj.foo();

// 'qiutc'

同样不变,因为在 js 中一切都是对象,函数也是一个对象,对于 test ,它只是一个函数名,函数的引用,它指向这个函数,当 foo = test,foo 同样也指向了这个函数。 

如果把对象的方法赋值给一个变量,然后直接调用这个变量呢:

var obj = {
 name: 'qiutc',
 foo: function() {
 console.log(this);
 }
}

var test = obj.foo;
test();

// Window

可以看到,这时候 this 执行了全局,当我们把 test = obj.foo ,test 直接指向了一个函数的引用,这时候,其实和 obj 这个对象没有关系了,所以,它是被当作一个普通函数来直接调用,因此,this 指向全局对象。 

一些坑 

我们经常在回调函数里面会遇到一些坑:

var obj = {
 name: 'qiutc',
 foo: function() {
 console.log(this);
 },
 foo2: function() {
 console.log(this);
 setTimeout(this.foo, 1000);
 }
}

obj.foo2();

执行这段代码我们会发现两次打印出来的 this 是不一样的: 

第一次是 foo2 中直接打印 this,这里指向 obj 这个对象,我们毋庸置疑; 

但是在 setTimeout 中执行的 this.foo ,却指向了全局对象,这里不是把它当作函数的方法使用吗?这一点经常让很多初学者疑惑;

其实,setTimeout 也只是一个函数而已,函数必然有可能需要参数,我们把 this.foo 当作一个参数传给 setTimeout 这个函数,就像它需要一个 fun参数,在传入参数的时候,其实做了个这样的操作 fun = this.foo,看到没有,这里我们直接把 fun 指向 this.foo 的引用;执行的时候其实是执行了 fun() 所以已经和 obj 无关了,它是被当作普通函数直接调用的,因此 this 指向全局对象。 

这个问题是很多异步回调函数中普遍会碰到的; 

解决
 为了解决这个问题,我们可以利用 闭包 的特性来处理:

var obj = {
 name: 'qiutc',
 foo: function() {
 console.log(this);
 },
 foo2: function() {
 console.log(this);
 var _this = this;
 setTimeout(function() {
 console.log(this); // Window

 console.log(_this); // Object {name: "qiutc"}
 }, 1000);
 }
}

obj.foo2();

可以看到直接用 this 仍然是 Window;因为 foo2 中的 this 是指向 obj,我们可以先用一个变量 _this 来储存,然后在回调函数中使用 _this,就可以指向当前的这个对象了; 

setTimeout 的另一个坑 

之前啊说过,如果直接执行回调函数而没有绑定作用域,那么它的 this 是指向全局对象(window),在严格模式下会指向 undefined,然而在setTimeout 中的回调函数在严格模式下却表现出不同:

'use strict';
function foo() {
 console.log(this);
}
setTimeout(foo, 1);

// window

按理说我们加了严格模式,foo 调用也没有指定 this,应该是出来 undefined,但是这里仍然出现了全局对象,难道是严格模式失效了吗? 

并不,即使在严格模式下,setTimeout 方法在调用传入函数的时候,如果这个函数没有指定了的 this,那么它会做一个隐式的操作—-自动地注入全局上下文,等同于调用 foo.apply(window) 而非 foo(); 

当然,如果我们在传入函数的时候已经指定 this,那么就不会被注入全局对象,比如: setTimeout(foo.bind(obj), 1);;  

作为一个构造函数使用 

在 js 中,为了实现类,我们需要定义一些构造函数,在调用一个构造函数的时候需要加上 new 这个关键字:

function Person(name) {
 this.name = name;
 console.log(this);
}

var p = new Person('qiutc');

// Person {name: "qiutc"}

我们可以看到当作构造函数调用时,this 指向了这个构造函数调用时候实例化出来的对象; 

当然,构造函数其实也是一个函数,如果我们把它当作一个普通函数执行,这个 this 仍然执行全局:

function Person(name) {
 this.name = name;
 console.log(this);
}

var p = Person('qiutc');

// Window

其区别在于,如何调用函数(new)。

 箭头函数 

在 ES6 的新规范中,加入了箭头函数,它和普通函数最不一样的一点就是 this 的指向了,还记得我们使用闭包来解决 this 的指向问题吗,如果用上了箭头函数就可以更完美的解决了:

var obj = {
 name: 'qiutc',
 foo: function() {
 console.log(this);
 },
 foo2: function() {
 console.log(this);
 setTimeout(() => {
 console.log(this); // Object {name: "qiutc"}
 }, 1000);
 }
}

obj.foo2();

可以看到,在 setTimeout 执行的函数中,本应该打印出在 Window,但是在这里 this 却指向了 obj,原因就在于,给 setTimeout 传入的函数(参数)是一个箭头函数: 

函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。 

根据例子我们理解一下这句话: 
在 obj.foo2() 执行的时候,当前的 this 指向 obj;在执行 setTimeout 时候,我们先是定义了一个匿名的箭头函数,关键点就在这,箭头函数内的this 执行定义时所在的对象,就是指向定义这个箭头函数时作用域内的 this,也就是 obj.foo2 中的 this,即 obj;所以在执行箭头函数的时候,它的 this -> obj.foo2 中的 this -> obj; 

简单来说, 箭头函数中的 this 只和定义它时候的作用域的 this 有关,而与在哪里以及如何调用它无关,同时它的 this 指向是不可改变的。 

call, apply, bind 

在 js 中,函数也是对象,同样也有一些方法,这里我们介绍三个方法,他们可以更改函数中的 this 指向:
 call

fun.call(thisArg[, arg1[, arg2[, ...]]])

它会立即执行函数,第一个参数是指定执行函数中 this 的上下文,后面的参数是执行函数需要传入的参数; 

apply

fun.apply(thisArg[, [arg1, arg2, ...]])

它会立即执行函数,第一个参数是指定执行函数中 this 的上下文,第二个参数是一个数组,是传给执行函数的参数(与 call 的区别);
 bind

var foo = fun.bind(thisArg[, arg1[, arg2[, ...]]]);

它不会执行函数,而是返回一个新的函数,这个新的函数被指定了 this 的上下文,后面的参数是执行函数需要传入的参数; 

这三个函数其实大同小异,总的目的就是去指定一个函数的上下文(this),我们以 call 函数为例; 

为一个普通函数指定 this

var obj = {
 name: 'qiutc'
};
function foo() {
 console.log(this);
}
foo.call(obj);

// Object {name: "qiutc"}

可以看到,在执行 foo.call(obj) 的时候,函数内的 this 指向了 obj 这个对象,成功; 

为对象中的方法指定一个 this

var obj = {
 name: 'qiutc',
 foo: function () {
 console.log(this);
 }
}

var obj2 = {
 name: 'tcqiu222222'
};

obj.foo.call(obj2);

// Object {name: "tcqiu222222"}

可以看到,执行函数的时候这里的 this 指向了 obj2,成功; 

为构造函数指定 this

function Person(name) {
 this.name = name;
 console.log(this);
}

var obj = {
 name: 'qiutc2222222'
};

var p = new Person.call(obj, 'qiutc');

// Uncaught TypeError: Person.call is not a constructor(…)

这里报了个错,原因是我们去 new 了 Person.call 函数,而非 Person ,这里的函数不是一个构造函数; 

换成 bind 试试:

function Person(name) {
 this.name = name;
 console.log(this);
}

var obj = {
 name: 'qiutc2222222'
};

var Person2 = Person.bind(obj);

var p = new Person2('qiutc');

// Person {name: "qiutc"}

console.log(obj);

// Object {name: "qiutc2222222"}

打印出来的是 Person 实例化出来的对象,而和 obj 没有关系,而 obj 也没有发生变化,说明,我们给 Person 指定 this 上下文并没有生效; 

因此可以得出:使用 bind 给一个构造函数指定 this,在 new 这个构造函数的时候,bind 函数所指定的 this 并不会生效; 

当然 bind 不仅可以指定 this ,还能传入参数,我们来试试这个操作:

function Person(name) {
 this.name = name;
 console.log(this);
}

var obj = {
 name: 'qiutc2222222'
};

var Person2 = Person.bind(obj, 'qiutc111111');

var p = new Person2('qiutc');

// Person {name: "qiutc111111"}

可以看到,虽然指定 this 不起作用,但是传入参数还是起作用了; 

为箭头函数指定 this 

我们来定义一个全局下的箭头函数,因此这个箭头函数中的 this 必然会指向全局对象,如果用 call 方法改变 this 呢:

var afoo = (a) => {
 console.log(a);
 console.log(this);
}

afoo(1);

// 1
// Window

var obj = {
 name: 'qiutc'
};

afoo.call(obj, 2);

// 2
// Window

可以看到,这里的 call 指向 this 的操作并没有成功,所以可以得出:箭头函数中的 this 在定义它的时候已经决定了(执行定义它的作用域中的 this),与如何调用以及在哪里调用它无关,包括 (call, apply, bind) 等操作都无法改变它的 this。 

只要记住箭头函数大法好,不变的 this。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
浅析Jquery操作select
Dec 13 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
javascript实现评分功能
Jun 24 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 #Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 #Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 #Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 #Javascript
ionic隐藏tabs的方法
Aug 29 #Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 #Javascript
深入理解React中es6创建组件this的方法
Aug 29 #Javascript
You might like
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
jquery $.each() 使用小探
2013/08/23 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
Vue3为什么这么快
2020/09/23 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python 自动提交和抓取网页
2009/07/13 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
详解Python3中ceil()函数用法
2019/02/19 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
运动会解说词50字
2014/01/18 职场文书
爱国演讲稿400字
2014/05/07 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
材料物理专业求职信
2014/09/01 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
2014年安全员工作总结
2014/11/13 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
学习心理学心得体会
2016/01/22 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python