------------恢复内容开始------------

 1 var number = 5;
2 var obj = {
3 number: 3,
4 fn1: (function () {
5 var number;
6 this.number *= 2;
7 number = number * 2;
8 number = 3;
9 return function () {
10 var num = this.number;
11 this.number *= 2;
12 console.log(num);
13 number *= 3;
14 console.log(number);
15 }
16 })()
17 }
18 var fn1 = obj.fn1;
19 fn1.call(null);
20 obj.fn1();
21 console.log(window.number);

如果你思考出来的结果,与在浏览中执行结果相同,并且每一步的依据都非常清楚,那么,你可以选择继续往下阅读,或者关闭本网页,愉快得去玩耍。如果你有一部分是靠蒙的,或者对自己的答案并不那么确定,那么请继续往下阅读。

毕竟花一两个小时的时间,把this彻底搞明白,是一件很值得事情,不是吗?

本文将细致得讲解this的绑定规则,并在最后剖析前文两道题。

为什么要学习this?

首先,我们为什么要学习this?

  1. this使用频率很高,如果我们不懂this,那么在看别人的代码或者是源码的时候,就会很吃力。

  2. 工作中,滥用this,却没明白this指向的是什么,而导致出现问题,但是自己却不知道哪里出问题了。【在公司,我至少帮10个以上的开发人员处理过这个问题】

  3. 合理的使用this,可以让我们写出简洁且复用性高的代码。

  4. 面试的高频问题,回答不好,抱歉,出门右拐,不送。

不管出于什么目的,我们都需要把this这个知识点整的明明白白的。

OK,Let's go!

this是什么?

言归正传,this是什么?首先记住this不是指向自身!this 就是一个指针,指向调用函数的对象。这句话我们都知道,但是很多时候,我们未必能够准确判断出this究竟指向的是什么?这就好像我们听过很多道理 却依然过不好这一生。今天咱们不探讨如何过好一生的问题,但是呢,希望阅读完下面的内容之后,你能够一眼就看出this指向的是什么。

为了能够一眼看出this指向的是什么,我们首先需要知道this的绑定规则有哪些?

  1. 默认绑定

  2. 隐式绑定

  3. 硬绑定

  4. new绑定

上面的名词,你也许听过,也许没听过,但是今天之后,请牢牢记住。我们将依次来进行解析。

默认绑定

默认绑定,在不能应用其它绑定规则时使用的默认规则,通常是独立函数调用。


1 function sayHi(){
2 console.log('Hello,', this.name);
3 }
4 var name = 'YvetteLau';
5 sayHi();

在调用Hi()时,应用了默认绑定,this指向全局

undefined上没有this对象,会抛出错误。

上面的代码,如果在浏览器环境中运行,那么结果就是 Hello,YvetteLau

但是如果在node环境中运行,结果就是 Hello,undefined.这是因为node中name并不是挂在全局对象上的。

本文中,如不特殊说明,默认为浏览器环境执行结果。

隐式绑定

函数的调用是在某个对象上触发的,即调用位置上存在上下文对象。典型的形式为 XXX.fun().我们来看一段代码:

1 function sayHi(){
2 console.log('Hello,', this.name);
3 }
4 var person = {
5 name: 'YvetteLau',
6 sayHi: sayHi
7 }
8 var name = 'Wiliam';
9 person.sayHi();

打印的结果是 Hello,YvetteLau.

sayHi函数声明在外部,严格来说并不属于person,但是在调用sayHi时,调用位置会使用person的上下文来引用函数,隐式绑定会把函数调用中的this(即此例sayHi函数中的this)绑定到这个上下文对象(即此例中的person)

需要注意的是:对象属性链中只有最后一层会影响到调用位置。

 1 function sayHi(){
2 console.log('Hello,', this.name);
3 }
4 var person2 = {
5 name: 'Christina',
6 sayHi: sayHi
7 }
8 var person1 = {
9 name: 'YvetteLau',
10 friend: person2
11 }
12 person1.friend.sayHi();

结果是:Hello, Christina.

因为只有最后一层会确定this指向的是什么,不管有多少层,在判断this的时候,我们只关注最后一层,即此处的friend。

隐式绑定有一个大陷阱,绑定很容易丢失(或者说容易给我们造成误导,我们以为this指向的是什么,但是实际上并非如此).

 1 function sayHi(){
2 console.log('Hello,', this.name);
3 }
4 var person = {
5 name: 'YvetteLau',
6 sayHi: sayHi
7 }
8 var name = 'Wiliam';
9 var Hi = person.sayHi;
10 Hi();

结果是: Hello,Wiliam.

这是为什么呢,Hi直接指向了sayHi的引用,在调用的时候,跟person没有半毛钱的关系,针对此类问题,我建议大家只需牢牢继续这个格式:XXX.fn();fn()前如果什么都没有,那么肯定不是隐式绑定,但是也不一定就是默认绑定,这里有点小疑问,我们后来会说到。

除了上面这种丢失之外,隐式绑定的丢失是发生在回调函数中(事件回调也是其中一种),我们来看下面一个例子:

 1 function sayHi(){
2 console.log('Hello,', this.name);
3 }
4 var person1 = {
5 name: 'YvetteLau',
6 sayHi: function(){
7 setTimeout(function(){
8 console.log('Hello,',this.name);
9 })
10 }
11 }
12 var person2 = {
13 name: 'Christina',
14 sayHi: sayHi
15 }
16 var name='Wiliam';
17 person1.sayHi();
18 setTimeout(person2.sayHi,100);
19 setTimeout(function(){
20 person2.sayHi();
21 },200);

结果为:

1 Hello, Wiliam
2 Hello, Wiliam
3 Hello, Christina
  • 第一条输出很容易理解,setTimeout的回调函数中,this使用的是默认绑定,非严格模式下,执行的是全局对象

  • 第二条输出是不是有点迷惑了?说好XXX.fun()的时候,fun中的this指向的是XXX呢,为什么这次却不是这样了!Why?

    其实这里我们可以这样理解: setTimeout(fn,delay){ fn(); },相当于是将person2.sayHi赋值给了一个变量,最后执行了变量,这个时候,sayHi中的this显然和person2就没有关系了。

  • 第三条虽然也是在setTimeout的回调中,但是我们可以看出,这是执行的是person2.sayHi()使用的是隐式绑定,因此这是this指向的是person2,跟当前的作用域没有任何关系。

读到这里,也许你已经有点疲倦了,但是答应我,别放弃,好吗?再坚持一下,就可以掌握这个知识点了。

显式绑定

显式绑定比较好理解,就是通过call,apply,bind的方式,显式的指定this所指向的对象。(注意:《你不知道的Javascript》中将bind单独作为了硬绑定讲解了)

call,apply和bind的第一个参数,就是对应函数的this所指向的对象。call和apply的作用一样,只是传参方式不同。call和apply都会执行对应的函数,而bind方法不会。


 1 function sayHi(){
2 console.log('Hello,', this.name);
3 }
4 var person = {
5 name: 'YvetteLau',
6 sayHi: sayHi
7 }
8 var name = 'Wiliam';
9 var Hi = person.sayHi;
10 Hi.call(person); //Hi.apply(person)

输出的结果为: Hello, YvetteLau. 因为使用硬绑定明确将this绑定在了person上。

那么,使用了硬绑定,是不是意味着不会出现隐式绑定所遇到的绑定丢失呢?显然不是这样的,不信,继续往下看。

 1 function sayHi(){
2 console.log('Hello,', this.name);
3 }
4 var person = {
5 name: 'YvetteLau',
6 sayHi: sayHi
7 }
8 var name = 'Wiliam';
9 var Hi = function(fn) {
10 fn();
11 }
12 Hi.call(person, person.sayHi);

输出的结果是 Hello, Wiliam. 原因很简单,Hi.call(person, person.sayHi)的确是将this绑定到Hi中的this了。但是在执行fn的时候,相当于直接调用了sayHi方法(记住: person.sayHi已经被赋值给fn了,隐式绑定也丢了),没有指定this的值,对应的是默认绑定。

现在,我们希望绑定不会丢失,要怎么做?很简单,调用fn的时候,也给它硬绑定。


 1 function sayHi(){
2 console.log('Hello,', this.name);
3 }
4 var person = {
5 name: 'YvetteLau',
6 sayHi: sayHi
7 }
8 var name = 'Wiliam';
9 var Hi = function(fn) {
10 fn.call(this);
11 }
12 Hi.call(person, person.sayHi);

此时,输出的结果为: Hello, YvetteLau,因为person被绑定到Hi函数中的this上,fn又将这个对象绑定给了sayHi的函数。这时,sayHi中的this指向的就是person对象。

至此,革命已经快胜利了,我们来看最后一种绑定规则: new 绑定。

new 绑定

javaScript和C++不一样,并没有类,在javaScript中,构造函数只是使用new操作符时被调用的函数,这些函数和普通的函数并没有什么不同,它不属于某个类,也不可能实例化出一个类。任何一个函数都可以使用new来调用,因此其实并不存在构造函数,而只有对于函数的“构造调用”。

使用new来调用函数,会自动执行下面的操作:

  1. 创建一个新对象

  2. 将构造函数的作用域赋值给新对象,即this指向这个新对象

  3. 执行构造函数中的代码

  4. 返回新对象

因此,我们使用new来调用函数的时候,就会新对象绑定到这个函数的this上。


1 function sayHi(name){
2 this.name = name;
3
4 }
5 var Hi = new sayHi('Yevtte');
6 console.log('Hello,', Hi.name);

输出结果为 Hello, Yevtte, 原因是因为在var Hi = new sayHi('Yevtte');这一步,会将sayHi中的this绑定到Hi对象上。

绑定优先级

我们知道了this有四种绑定规则,但是如果同时应用了多种规则,怎么办?

显然,我们需要了解哪一种绑定方式的优先级更高,这四种绑定的优先级为:

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定

这个规则时如何得到的,大家如果有兴趣,可以自己写个demo去测试,或者记住上面的结论即可。

绑定例外

凡事都有例外,this的规则也是这样。

如果我们将null或者是undefined作为this的绑定对象传入call、apply或者是bind,这些值在调用时会被忽略,实际应用的是默认绑定规则。

1 var foo = {
2 name: 'Selina'
3 }
4 var name = 'Chirs';
5 function bar() {
6 console.log(this.name);
7 }
8 bar.call(null); //Chirs

输出的结果是 Chirs,因为这时实际应用的是默认绑定规则。

箭头函数

箭头函数是ES6中新增的,它和普通函数有一些区别,箭头函数没有自己的this,它的this继承于外层代码库中的this。箭头函数在使用时,需要注意以下几点:

(1)函数体内的this对象,继承的是外层代码块的this。

(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。

(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

(5)箭头函数没有自己的this,所以不能用call()、apply()、bind()这些方法去改变this的指向.

OK,我们来看看箭头函数的this是什么?

 1 var obj = {
2 hi: function(){
3 console.log(this);
4 return ()=>{
5 console.log(this);
6 }
7 },
8 sayHi: function(){
9 return function() {
10 console.log(this);
11 return ()=>{
12 console.log(this);
13 }
14 }
15 },
16 say: ()=>{
17 console.log(this);
18 }
19 }
20 let hi = obj.hi(); //输出obj对象
21 hi(); //输出obj对象
22 let sayHi = obj.sayHi();
23 let fun1 = sayHi(); //输出window
24 fun1(); //输出window
25 obj.say(); //输出window

那么这是为什么呢?如果大家说箭头函数中的this是定义时所在的对象,这样的结果显示不是大家预期的,按照这个定义,say中的this应该是obj才对。

我们来分析一下上面的执行结果:

  1. obj.hi(); 对应了this的隐式绑定规则,this绑定在obj上,所以输出obj,很好理解。

  2. hi(); 这一步执行的就是箭头函数,箭头函数继承上一个代码库的this,刚刚我们得出上一层的this是obj,显然这里的this就是obj.

  3. 执行sayHi();这一步也很好理解,我们前面说过这种隐式绑定丢失的情况,这个时候this执行的是默认绑定,this指向的是全局对象window.

  4. fun1(); 这一步执行的是箭头函数,如果按照之前的理解,this指向的是箭头函数定义时所在的对象,那么这儿显然是说不通。OK,按照箭头函数的this是继承于外层代码库的this就很好理解了。外层代码库我们刚刚分析了,this指向的是window,因此这儿的输出结果是window.

  5. obj.say(); 执行的是箭头函数,当前的代码块obj中是不存在this的,只能往上找,就找到了全局的this,指向的是window.

你说箭头函数的this是静态的?

依旧是前面的代码。我们来看看箭头函数中的this真的是静态的吗?

我要说:非也

 1 var obj = {
2 hi: function(){
3 console.log(this);
4 return ()=>{
5 console.log(this);
6 }
7 },
8 sayHi: function(){
9 return function() {
10 console.log(this);
11 return ()=>{
12 console.log(this);
13 }
14 }
15 },
16 say: ()=>{
17 console.log(this);
18 }
19 }
20 let sayHi = obj.sayHi();
21 let fun1 = sayHi(); //输出window
22 fun1(); //输出window
23
24 let fun2 = sayHi.bind(obj)();//输出obj
25 fun2(); //输出obj

可以看出,fun1和fun2对应的是同样的箭头函数,但是this的输出结果是不一样的。

所以,请大家牢牢记住一点: 箭头函数没有自己的this,箭头函数中的this继承于外层代码库中的this.

总结

关于this的规则,至此,就告一段落了,但是想要一眼就能看出this所绑定的对象,还需要不断的训练。

我们来回顾一下,最初的问题。

1. 如何准确判断this指向的是什么?

  1. 函数是否在new中调用(new绑定),如果是,那么this绑定的是新创建的对象。

  2. 函数是否通过call,apply调用,或者使用了bind(即硬绑定),如果是,那么this绑定的就是指定的对象。

  3. 函数是否在某个上下文对象中调用(隐式绑定),如果是的话,this绑定的是那个上下文对象。一般是obj.foo()

  4. 如果以上都不是,那么使用默认绑定。如果在严格模式下,则绑定到undefined,否则绑定到全局对象。

  5. 如果把Null或者undefined作为this的绑定对象传入call、apply或者bind,这些值在调用时会被忽略,实际应用的是默认绑定规则。

  6. 如果是箭头函数,箭头函数的this继承的是外层代码块的this。

2. 执行过程解析

 1 var number = 5;
2 var obj = {
3 number: 3,
4 fn: (function () {
5 var number;
6 this.number *= 2;
7 number = number * 2;
8 number = 3;
9 return function () {
10 var num = this.number;
11 this.number *= 2;
12 console.log(num);
13 number *= 3;
14 console.log(number);
15 }
16 })()
17 }
18 var myFun = obj.fn;
19 myFun.call(null);
20 obj.fn();
21 console.log(window.number);

我们来分析一下,这段代码的执行过程。

  1. 在定义obj的时候,fn对应的闭包就执行了,返回其中的函数,执行闭包中代码时,显然应用不了new绑定(没有出现new 关键字),硬绑定也没有(没有出现call,apply,bind关键字),隐式绑定有没有?很显然没有,如果没有XX.fn(),那么可以肯定没有应用隐式绑定,所以这里应用的就是默认绑定了,非严格模式下this绑定到了window上(浏览器执行环境)。【这里很容易被迷惑的就是以为this指向的是obj,一定要注意,除非是箭头函数,否则this跟词法作用域是两回事,一定要牢记在心】

1 window.number * = 2; //window.number的值是10(var number定义的全局变量是挂在window上的)
2 ​
3 number = number * 2; //number的值是NaN;注意我们这边定义了一个number,但是没有赋值,number的值是undefined;Number(undefined)->NaN
4 ​
5 number = 3; //number的值为3
  1. myFun.call(null);我们前面说了,call的第一个参数传null,调用的是默认绑定;

1 fn: function(){
2 var num = this.number;
3 this.number *= 2;
4 console.log(num);
5 number *= 3;
6 console.log(number);
7 }

执行时:

1 var num = this.number; //num=10; 此时this指向的是window
2 this.number * = 2; //window.number = 20
3 console.log(num); //输出结果为10
4 number *= 3; //number=9; 这个number对应的闭包中的number;闭包中的number的是3
5 console.log(number); //输出的结果是9
  1. obj.fn();应用了隐式绑定,fn中的this对应的是obj.

1 var num = this.number;//num = 3;此时this指向的是obj
2 this.number *= 2; //obj.number = 6;
3 console.log(num); //输出结果为3;
4 number *= 3; //number=27;这个number对应的闭包中的number;闭包中的number的此时是9
5 console.log(number);//输出的结果是27
  1. 最后一步console.log(window.number);输出的结果是20

因此组中结果为:

1 10
2 9
3 3
4 27
5 20

严格模式下结果,大家根据今天所学,自己分析,巩固一下知识点。

最后,恭喜坚持读完的小伙伴们,你们成功get到了this这个知识点,但是想要完全掌握,还是要多回顾和练习。如果你有不错的this练习题,欢迎在评论区留言哦,大家一起进步!

关于javascript中this的更多相关文章

  1. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  2. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  3. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  4. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  5. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  6. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  7. 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  8. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

  9. Javascript中的valueOf与toString

    基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...

  10. 关于javascript中的this关键字

    this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...

随机推荐

  1. 485. Max Consecutive Ones - LeetCode

    Question 485. Max Consecutive Ones Solution 题目大意:给一个数组,取连续1的最大长度 思路:遍历数组,连续1就加1,取最大 Java实现: public i ...

  2. 今天才发现ThinkPad的触摸板简直好用!傻乎乎的自己

    最近经常看到这句话,天下武功,唯快不破. 今天才发现ThinkPad的触摸板简直好用! 今天才发现,傻乎乎的自己. 前一阵鼠标不好用了,没有滚轮,一直傻瓜式操作点击浏览器的滚动条... 遇到没有滚动条 ...

  3. 04 Springboot 格式化LocalDateTime

    Springboot 格式化LocalDateTime 我们知道在springboot中有默认的json解析器,Spring Boot 中默认使用的 Json 解析技术框架是 jackson.我们点开 ...

  4. layui数据表格搜索

    简单介绍 我是通过Servlet传递json给layui数据表格模块,实现遍历操作的,不过数据量大的话还是需要搜索功能的.这是我参考网上大佬代码写出的搜索功能. 实现原理 要实现搜索功能,肯定需要链接 ...

  5. Hadoop安装学习(第二天)

    学习任务: 1.对VMnet8进行设置 2.配置主机名,对host文件进行编辑 3.将Hadoop文件以及jdk通过Xshell7传输到Linux系统 4.设置免密登录

  6. docker 快速上手

    Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口 安装 docker 设置仓库 $ sudo yum install -y yum-utils $ sudo yum-conf ...

  7. 什么是Netty编解码,Netty编解码器有哪些?Protostuff怎么使用?

    哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 书接上回,昨天下雨没怎么上街上 ...

  8. git clone 问题

    转自 git clone出现 fatal: unable to access 'https://github.com/...'的解决办法(亲测有效) - 山村码农 - 博客园 (cnblogs.com ...

  9. 解决Windows微软账户无法登录

    更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2021年8月25日. 将DNS的服务器地址修改为4.2.2.1或者4.2.2.2就可以解决无法登录microsoft账户 ...

  10. 认识弹性盒子flex

    认识弹性盒子flex 来源:https://blog.xybin.top/2022/flex 1.定义弹性布局(父级上定义)display:flex; 如果说内核为webkit 的必须前面加上 -we ...