什么是js中的this，它与Java中的this有什么区别？

关于Java中this的用法参见https://blog.csdn.net/qq_21225505/article/details/88017889

js 中this 的七种使用场景

this一般在函数内部使用&＃xff0c;表示该函数所处的环境对象&＃xff0c;只有在函数运行的时候才能被确定&＃xff0c;不同的调用方式所对应的this值是不同的。

情况一&＃xff1a;全局 & 调用普通函数

在全局环境中&＃xff0c;this 永远指向 window。

console.log(this &＃61;&＃61;&＃61; window); //true

普通函数在调用时候(注意不是构造函数&＃xff0c;前面不加 new)&＃xff0c;其中的 this 也是指向 window。

var x &＃61; 10;
function foo(){console.log(this); //Windowconsole.log(this.x); //10
}
foo();

情况二&＃xff1a;构造函数

所谓的构造函数就是由一个函数 new 出来的对象&＃xff0c;this就指向新对象&＃xff0c;一般构造函数的函数名首字母大写&＃xff0c;例如像 Object&＃xff0c;Function&＃xff0c;Array 这些都属于构造函数。

上述代码&＃xff0c;如果函数作为构造函数使用&＃xff0c;那么其中的 this 就代表它即将 new 出来的对象。

但是如果直接调用 Foo 函数&＃xff0c;而不是 new Foo()&＃xff0c;那就变成情况1&＃xff0c;这时候 Foo() 就变成普通函数。

function Foo(){this.x &＃61; 10;console.log(this); //Window
}
var foo &＃61; Foo();

情况三&＃xff1a;对象方法

如果函数作为对象的方法时&＃xff0c;方法中的 this 指向该对象。

var obj &＃61; {x: 10,foo: function () {console.log(this); //Objectconsole.log(this.x); //10}
};
obj.foo();

注意&＃xff1a;若是在对象方法中定义函数&＃xff0c;那么情况就不同了。

var obj &＃61; {x: 10,foo: function () {function f(){console.log(this); //Windowconsole.log(this.x); //undefined}f();}
}
obj.foo();

可以这么理解&＃xff1a;函数 f 虽然是在 obj.foo 内部定义的&＃xff0c;但它仍然属于一个普通函数&＃xff0c;this 仍指向 window。

在这里&＃xff0c;如果想要调用上层作用域中的变量 obj.x&＃xff0c;可以使用 self 缓存外部 this 变量。

var obj &＃61; {x: 10,foo: function () {var self &＃61; this;function f(){console.log(self); //{x: 10}console.log(self.x); //10}f();}
}
obj.foo();

如果 foo 函数不作为对象方法被调用&＃xff1a;

var obj &＃61; {x: 10,foo: function () {console.log(this); //Windowconsole.log(this.x); //undefined}
};
var fn &＃61; obj.foo;
fn();

obj.foo 被赋值给一个全局变量&＃xff0c;并没有作为 obj 的一个属性被调用&＃xff0c;那么此时 this 的值是 window。

情况四&＃xff1a;构造函数 prototype 属性

function Foo(){this.x &＃61; 10;
}
Foo.prototype.getX &＃61; function () {console.log(this); //Foo {x: 10, getX: function}console.log(this.x); //10
}
var foo &＃61; new Foo();
foo.getX();

在 Foo.prototype.getX 函数中&＃xff0c;this 指向的 foo 对象。不仅仅如此&＃xff0c;即便是在整个原型链中&＃xff0c;this 代表的也是当前对象的值。

情况五&＃xff1a;函数用 call、apply或者 bind 调用。

var obj &＃61; {x: 10
}
function foo(){console.log(this); //{x: 10}console.log(this.x); //10
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();

当一个函数被 call、apply 或者 bind 调用时&＃xff0c;this 的值就取传入的对象的值。

情况六&＃xff1a;DOM event this

在一个 HTML DOM 事件处理程序里&＃xff0c;this 始终指向这个处理程序所绑定的 HTML DOM 节点&＃xff1a;

function Listener(){ document.getElementById(&＃39;foo&＃39;).addEventListener(&＃39;click&＃39;, this.handleClick); //这里的 this 指向 Listener 这个对象。不是强调的是这里的 this
}
Listener.prototype.handleClick &＃61; function (event) {console.log(this); //

这个很好理解&＃xff0c;就相当于是给函数传参&＃xff0c;使 handleClick 运行时上下文改变了&＃xff0c;相当于下面这样的代码&＃xff1a;

var obj &＃61; {x: 10,fn: function() {console.log(this); //Windowconsole.log(this.x); //undefined}
};
function foo(fn) {fn();
}
foo(obj.fn);

你也可以用通过 bind 切换上下文:

function Listener(){document.getElementById(&＃39;foo&＃39;).addEventListener(&＃39;click&＃39;,this.handleClick.bind(this));
}
Listener.prototype.handleClick &＃61; function (event) {console.log(this); //Listener {}
}
var listener &＃61; new Listener();
document.getElementById(&＃39;foo&＃39;).click();

前六种情况其实可以总结为&＃xff1a; this 指向调用该方法的对象。

情况七&＃xff1a;箭头函数中的 this

当使用箭头函数的时候&＃xff0c;情况就有所不同了&＃xff1a;箭头函数内部的 this 是词法作用域&＃xff0c;由上下文确定。

var obj &＃61; {x: 10,foo: function() {var fn &＃61; () &＃61;> {return () &＃61;> {return () &＃61;> {console.log(this); //Object {x: 10}console.log(this.x); //10}}}fn()()();}
}
obj.foo();

现在&＃xff0c;箭头函数完全修复了 this 的指向&＃xff0c;this 总是指向词法作用域&＃xff0c;也就是外层调用者 obj。

如果使用箭头函数&＃xff0c;以前的这种 hack 写法&＃xff1a;

var self &＃61; this;

 就不再需要了。

var obj &＃61; {x: 10,foo: function() {var fn &＃61; () &＃61;> {return () &＃61;> {return () &＃61;> {console.log(this); // Object {x: 10}console.log(this.x); //10}}}fn.bind({x: 14})()()();fn.call({x: 14})()();}
}
obj.foo();

由于 this 在箭头函数中已经按照词法作用域绑定了&＃xff0c;所以&＃xff0c;用 call()或者 apply()调用箭头函数时&＃xff0c;无法对 this 进行绑定&＃xff0c;即传入的第一个参数被忽略。

JS如何改变this的值

第一种&＃xff1a; new关键字改变this指向

//构造函数版this
function Fn(){this.user &＃61; "追梦子";
}
var a &＃61; new Fn();
console.log(a.user); //追梦子

用变量a创建了一个Fn的实例&＃xff08;相当于复制了一份Fn到对象a里面&＃xff09;&＃xff0c;此时仅仅只是创建&＃xff0c;并没有执行&＃xff0c;而调用这个函数Fn的是对象a&＃xff0c;那么this指向的自然是对象a&＃xff0c;那么为什么对象a中会有user&＃xff0c;因为你已经复制了一份Fn函数到对象a中&＃xff0c;用了new关键字就等同于复制了一份

第二种&＃xff1a; call&＃xff08;&＃xff09;     fun.call(this的值,参数列表&＃xff09;

var a &＃61; {user:"追梦子",fn:function(){console.log(this.user); //追梦子}
}
var b &＃61; a.fn;
b.call(a); //若不用call&＃xff0c;则b()执行后this指的是Window对象

把b添加到第一个参数的环境中&＃xff0c;简单来说&＃xff0c;this就会指向那个对象。

call方法除了第一个参数以外还可以添加多个参数&＃xff0c;如下&＃xff1a;

var a &＃61; {user:"追梦子",fn:function(e,ee){console.log(this.user); //追梦子console.log(e&＃43;ee); //3}
}
var b &＃61; a.fn;
b.call(a,1,2);

第三种&＃xff1a;apply&＃xff08;&＃xff09;          fun.apply(this的值,参数数组&＃xff09;

var a &＃61; {user:"追梦子",fn:function(){console.log(this.user); //追梦子}
}
var b &＃61; a.fn;
b.apply(a);

apply方法和call方法有些相似&＃xff0c;它也可以改变this的指向&＃xff0c;也可以有多个参数&＃xff0c;但是不同的是&＃xff0c;第二个参数必须是一个数组&＃xff0c;如下&＃xff1a;

var a &＃61; {user:"追梦子",fn:function(e,ee){console.log(this.user); //追梦子console.log(e&＃43;ee); //11}
}
var b &＃61; a.fn;
b.apply(a,[10,1]);

//注意如果call和apply的第一个参数写的是null&＃xff0c;那么this指向的是window对象
var a &＃61; {user:"追梦子",fn:function(){console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}}
}
var b &＃61; a.fn;
b.apply(null);

第四种&＃xff1a;bind&＃xff08;&＃xff09;          fun.bind(this的值,参数列表&＃xff09;

bind方法和call、apply方法有些不同&＃xff0c;如下&＃xff1a;

var a &＃61; {user:"追梦子",fn:function(){console.log(this.user);}
}
var b &＃61; a.fn;
b.bind(a); //代码没有被打印

我们发现代码没有被打印&＃xff0c;对&＃xff0c;这就是bind和call、apply方法的不同&＃xff0c;实际上bind方法返回的是一个修改过后的函数供后续调用。

var a &＃61; {user:"追梦子",fn:function(){console.log(this.user);}
}
var b &＃61; a.fn;
var c &＃61; b.bind(a);
console.log(c); //function() { [native code] }

函数c看看&＃xff0c;能不能打印出对象a里面的user

var a &＃61; {user:"追梦子",fn:function(){console.log(this.user); //追梦子}
}
var b &＃61; a.fn;
var c &＃61; b.bind(a);
c();

同样bind也可以有多个参数&＃xff0c;并且参数可以执行的时候再次添加&＃xff0c;但是要注意的是&＃xff0c;后续调用新函数时的实参要往已有参数的后面排&＃xff0c;参数是按照形参的顺序进行的。

var a &＃61; {user:"追梦子",fn:function(e,d,f){console.log(this.user); //追梦子console.log(e,d,f); //10 1 2}
}
var b &＃61; a.fn;
var c &＃61; b.bind(a,10);
c(1,2);

总结&＃xff1a; call和apply都是改变上下文中的this并立即执行这个函数&＃xff0c;bind方法可以让对应的函数想什么时候调就什么时候调用&＃xff0c;并且可以将参数在执行的时候添加&＃xff0c;这是它们的区别

以上转自https://blog.csdn.net/weixin_40387601/article/details/80313884