目录
this是什么？
this的指向
①全局环境
②构造函数
③对象的方法
this的四类调用方式
①作为对象方法调用
②纯粹的函数调用
③作为构造函数调用
④使用apply、call、bind调用
举例说明
this是什么？
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：
- 在方法中，
this指的是所有者对象。 - 单独的情况下，
this指的是全局对象。 - 在函数中，
this指的是全局对象。 - 在函数中，严格模式下，
this是 undefined。 - 在事件中，
this指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象
this的指向
JS中，一切皆对象，运行环境也是对象，函数在哪个对象中运行，this就指向这个对象
①全局环境
在全局下使用，this指向顶层对象window
function f(){
console.log(this === window);
}
f() //true②构造函数
构造函数中的this指向实例对象
var obj = funtion(p){
this.p = p;
};
这里定义了一个构造函数obj，在构造函数内部定义this.p就相当于实例对象有一个p属性
var o = new obj('hello world');
o.p //"hello world"③对象的方法
如果对象的方法里面包含this，this的指向就是方法运行时所在的对象，这个方法赋值给另一个对象，就会改变this的指向
var obj = {
foo: function(){
console.log(this);
}
};
obj.foo()通过用法来改变this的指向
(obj.foo = obj.foo)() //重新赋值，但是在window下运行的
(false || obj.foo)() //fasle运行不了，运行后边这个，也是在window下运行的
(1,obj.foo)() //类似文章来源：https://www.toymoban.com/news/detail-619663.html
可以理解为obj.foo是个值，上面三种在调用的时候已经变了调用环境了文章来源地址https://www.toymoban.com/news/detail-619663.html
this的四类调用方式
①作为对象方法调用
function f() {
console.log( this.code );
}
let obj = {
code: 200,
f: f
};
obj.f(); // 200②纯粹的函数调用
function f() {
console.log( this.code );
}
var code = 200; //注意，这里要用var，let是块作用域，下面会输出undefined
f(); // 200③作为构造函数调用
code = 404
function A() {
this.code = 200
this.callA = function() {
console.log(this.code)
}
}
var a = new A()
a.callA() // 200, callA在new A返回的对象里④使用apply、call、bind调用
var code = 404;
let obj = {
code: 200,
f: function() {
console.log(this.code);
}
}
obj.f(); // 200, 实际上是作为对象的方法调用
obj.f.apply(); // 404，参数为空时，默认使用全局对象global，在此处为对象window
obj.f.apply(obj); //200，this指向参数中设置的对象举例说明
var f = functin() {
console.log(this.x)
}
var x = 1;
var obj = {
f:f,
x:2,
};
f() //单独执行，最终结果是1
obj.f() //obj下执行，最终结果是2
第一次f在全局环境执行，第二次在obj环境执行，this执行不同function doF(fn) {
this.code = 404;
fn();
}
function f() {
console.log(this.code);
}
let obj = {
code: 200,
f: f
};
var code = 500;
doF(obj.f); // 404
看这，obj.f作为参数传入dof函数中，所以最终还是dof对象调用的所以会输出404var a = {
p:'hello',
b: {
m:function(){
console.console.log(this.p);
}
}
};
a.b.m();
//这里是多层调用，最终会显示undefined，因为这this指向的是a.b但是b里面没有p所以找不到
//与想法的找到a里面的p不同，👇是弥补方案
var a = {
f1:function(){
console.log(this);
var that = this;
var f2 = function(){
console.log(that);
}();
}
}
a.f1()
通过把this赋值给that让这个函数锁定指向，从而找到正确的值严格模式
var counter = {
count:0
};
counter.inc = function(){
'use strict'
this.count++
};
var f = counter.inc
f()到了这里，关于【JS】JavaScript中的this关键字的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
