关于JavaScript中的对this的理解

Posted 2020-12-05 xiongzewang

 

关于this，一般来说谁调用了方法该方法的的this就指向谁，this指向当前调用的那个对象（我是最美的），回调函数里面的this都会指向（重）

 

如果存在多次调用，对象属性引用链只有上一层或者说最后一层在调用位置中起作用，如：

function foo() {     console.log( this.a ) }  var obj2 = {      a: 42,     foo: foo }  var obj1 = {     a: 2,     obj2: obj2 }  obj1.obj2.foo(); // 42 

一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说他回应用默认绑定，从而把this绑定到全局对象或者undefined上，取决于是否是严格模式。

function foo() {     console.log( this.a ) }  var obj1 = {     a: 2,     foo: foo }  var bar = obj1.foo; // 函数别名！  var a = "oops, global"; // a是全局对象的属性  bar(); // "oops, global" 

虽然bar是obj.foo的一个引用，但是实际上，它引用的是foo函数本身，因此此时的bar()其实是一个不带任何修饰的函数调用，因此应用了默认绑定，一个更微妙、更常见并且更出乎意料的情况发生在传入回调函数时：

function foo() {     console.log( this.a ) }  function doFoo( fn ){     // fn 其实引用的是 foo     fn(); // <-- 调用位置！ }  var obj = {     a: 2,     foo: foo }  var a = "oops, global"; // a是全局对象的属性  doFoo( obj.foo ); // "oops, global" 

 

如何去改变this的指向，（简单的说就是指定this，如call、apply、bind、new绑定等）

1、变量来保存this的指向

2、2、bind() 改变this的指向 里面的参数是this的指向 放在花括号的结尾处

3、call() 改变this的指向 里面的参数 ：第一个参数是this的指向 第二个参数以及后面所有的参数

如果是在立即执行函数中使用那么需要放在括号的外面

如果在定时器中使用则放在花括号的外面

4、apply():改变this的指向 里面的参数 ：第一个参数是this的指向 第二个参数以及后面所有的参数

5、用法如下：

 

 

在就是new绑定：new是最后一种可以影响函数调用时this绑定行为的方法，我们称之为new绑定。

箭头函数的作用：

这里需要补充一点内容，就是在下一代javascript标准ES6中的箭头函数的 this始终指向函数定义时的 this，而非执行时。我们通过一个例子来理解:

var o = {     x : 1,     func : function() { console.log(this.x) },     test : function() {         setTimeout(function() {             this.func();         }, 100);     } };  o.test(); // TypeError : this.func is not a function 

上面的代码会出现错误，因为this的指向从o变为了全局。我们需要修改上面的代码如下：

var o = {     x : 1,     func : function() { console.log(this.x) },     test : function() {         var _this = this;         setTimeout(function() {             _this.func();         }, 100);     } };  o.test(); 

this在箭头函数中应用：

1、一般情况下用在回调函数中  把function换成了=>

2、2、this的指向不在指向调用他的那个对象，而是指向创建他时的那个对象

 

 

 

 

总结：

1.如果要判断一个运行中的函数的this绑定，就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this的绑定对象。

2.由new调用?绑定到新创建的对象。

3.由call或者apply(或者bind)调用?绑定到指定的对象。

4.由上下文对象调用?绑定到那个上下文对象。

5.默认：在严格模式下绑定到undefined，否则绑定到全局对象。