【JS】JavaScript中的this关键字

目录

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)()  //类似

可以理解为obj.foo是个值，上面三种在调用的时候已经变了调用环境了

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对象调用的所以会输出404

var 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()