温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Javascript中的this怎么应用

发布时间:2022-05-07 13:56:54 来源:亿速云 阅读:153 作者:iii 栏目:大数据

今天小编给大家分享一下Javascript中的this怎么应用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

从call方法开始

call 方法允许切换函数执行的上下文环境(context),即 this 绑定的对象。

大多数介绍 this 的文章中都会把 call 方法放到***介绍,但此文我们要把 call 方法放在***位介绍,并从 call 方法切入来研究 this  ,因为 call 函数是显式绑定 this 的指向,我们来看看它如何模拟实现(不考虑传入 null 、 undefined 和原始值):

Function.prototype.call = function(thisArg) {     var context = thisArg;     var arr = [];     var result;      context.fn = this;      for (let i = 1, len = arguments.length; i < len; i++) {         arr.push('arguments[' + i + ']');     }      result = eval("context.fn(" + arr + ")");      delete context.fn;      return result; }

从以上代码我们可以看到,把调用 call 方法的函数作为***个参数对象的方法,此时相当于把***个参数对象作为函数执行的上下文环境,而 this  是指向函数执行的上下文环境的,因此 this 就指向了***个参数对象,实现了 call 方法切换函数执行上下文环境的功能。

对象方法中的this

在模拟 call 方法的时候,我们使用了对象方法来改变 this 的指向。调用对象中的方法时,会把对象作为方法的上下文环境来调用。

既然 this 是指向执行函数的上下文环境的,那我们先来研究一下调用函数时的执行上下文情况。

下面我门来看看调用对象方法时执行上下文是如何的:

var foo = {     x : 1,     getX: function(){         console.log(this.x);     } } foo.getX();

Javascript中的this怎么应用

从上图中,我们可以看出getX方法的调用者的上下文是foo,因此getX方法中的 this 指向调用者上下文foo,转换成 call  方法为foo.getX.call(foo)。

下面我们把其他函数的调用方式都按调用对象方法的思路来转换。

构造函数中的this

function Foo(){     this.x = 1;     this.getX = function(){         console.log(this.x);     } } var foo = new Foo(); foo.getX();

执行 new  如果不考虑原型链,只考虑上下文的切换,就相当于先创建一个空的对象,然后把这个空的对象作为构造函数的上下文,再去执行构造函数,***返回这个对象。

var newMethod = function(func){     var context = {};     func.call(context);     return context; } function Foo(){     this.x = 1;     this.getX = function(){         console.log(this.x);     } } var foo = newMethod(Foo); foo.getX();

DOM事件处理函数中的this

DOMElement.addEventListener('click', function(){    console.log(this);  });

把函数绑定到DOM事件时,可以当作在DOM上增加一个函数方法,当触发这个事件时调用DOM上对应的事件方法。

DOMElement.clickHandle = function(){     console.log(this); } DOMElement.clickHandle();

普通函数中的this

var x = 1; function getX(){     console.log(this.x); } getX();

这种情况下,我们创建一个虚拟上下文对象,然后普通函数作为这个虚拟上下文对象的方法调用,此时普通函数中的this就指向了这个虚拟上下文。

那这个虚拟上下文是什么呢?在非严格模式下是全局上下文,浏览器里是 window ,NodeJs里是 Global ;在严格模式下是 undefined  。

var x = 1; function getX(){     console.log(this.x); }  [viturl context].getX = getX; [viturl context].getX();

闭包中的this

var x = 1; var foo = {     x: 2,     y: 3,     getXY: function(){         (function(){             console.log("x:" + this.x);             console.log("y:" + this.y);          })();     } } foo.getXY();

这段代码的上下文如下图:

Javascript中的this怎么应用

这里需要注意的是,我们再研究函数中的 this 指向时,只需要关注 this 所在的函数是如何调用的, this  所在函数外的函数调用都是浮云,是不需要关注的。因此在所有的图示中,我们只需要关注红色框中的内容。

因此这段代码我们关注的部分只有:

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

与普通函数调用一样,创建一个虚拟上下文对象,然后普通函数作为这个虚拟上下文对象的方法立即调用,匿名函数中的 this 也就指向了这个虚拟上下文。

Javascript中的this怎么应用

参数中的this

var x = 1; var foo = {     x: 2,     getX: function(){         console.log(this.x);     } } setTimeout(foo.getX, 1000);

函数参数是值传递的,因此上面代码等同于以下代码:

var getX = function(){     console.log(this.x); }; setTimeout(getX, 1000);

然后我们又回到了普通函数调用的问题。

全局中的this

全局中的 this 指向全局的上下文

var x = 1; console.log(this.x);

Javascript中的this怎么应用

复杂情况下的this

var x = 1; var a = {     x: 2,     b: function(){         return function(){             return function foo(){                 console.log(this.x);             }                 }     } };  (function(){     var x = 3;     a.b()()(); })();

看到上面的情况是有很多个函数,但我们只需要关注 this 所在函数的调用方式,首先我们来简化一下如下:

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

this 所在的函数 foo 是个普通函数,我们创建一个虚拟上下文对象,然后普通函数作为这个虚拟上下文对象的方法立即调用。因此这个  this指向了这个虚拟上下文。在非严格模式下是全局上下文,浏览器里是 window ,NodeJs里是 Global ;在严格模式下是 undefined  。

以上就是“Javascript中的this怎么应用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI