javascript之this指向问题

最新推荐文章于 2025-12-02 17:50:12 发布

原创最新推荐文章于 2025-12-02 17:50:12 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

笔记专栏收录该内容

1 篇文章

订阅专栏

前言

关于this指向的问题，之前我一直都相信这样的说法：谁调用它，this就指向谁。可是在开发中往往有一些不一样的情况；所以在这里说说我对this的一些认知和理解。

首先，我们要知道的是，this的指向，是在函数被调用的时候被确定的。也就是在执行上下文被创建时确定的。

例1：

function fn() {
	var a = 10;
	console.log(this); // window
	console.log(this.a); // undefined
}
fn();

按照我们上面说的this最终指向的是调用它的对象，这里的函数fn实际是被Window对象所点出来的，如下代码可以得到证明。

function fn() {
	var a = 10;
	console.log(this); // window
	console.log(this.a); // undefined
}
window.fn();

其实alert也是window的一个属性，也是window点出来的。

例2：

var obj = {
	a = 10;
	fn:function() {
		console.log(this); // {a: 10, fn: ƒ}
		console.log(this.a); // 10
	}
}
obj.fn();

这里的this指向的对象是obj,因为调用这个fn是通过obj.fn()执行的，那么自然指向的就是对象obj，还有就是，this的指向在函数创建的时候是决定不了的，只有在调用的时候才能决定，谁调用的就指向谁。

其实上面两个例子也并不是很准确，下面看看接下来的几个例子。
例3：

var obj = {
	a = 10;
	fn: function() {
		console.log(this.a); // 10
		console.log(this); // {a: 10, fn: ƒ}
	}
}
window.obj.fn();

例3和例2几乎是一样的，但是这里的this为什么不是指向window，如果按照上面的理论，最终this指向的应该是调用它的对象window,而不是obj。
好，话不多说，暂且先不说为什么this没有指向window，我们再来看一段代码。

var obj = {
     a: 10,
     b: {
      		a: 20,
            fn: function () {
               console.log(this); // {a: 20, fn: ƒ}
               console.log(this.a); // 20

            }
        }
 }
 
obj.b.fn();

这里同样也是对象obj点出来的，但是this并没有执行它，那是不是之前说的都是错误的呢？其实只能说一开始说的不准确；接下来要补充的才是重点。

情况一：如果一个函数中有this，但是它没有被上一级的对象所调用，在非严格模式下那么this指向的就是window。
情况二：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
情况三：如果一个函数中有this，这个函数包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，例3就可以证明这一点，接下来可以再来几个例子来说明。

var obj = {
    a: 10,
    b: {
        fn: function () {
            console.log(this); // {fn: ƒ}
            console.log(this.a); // undefined

        }
    }
}

obj.b.fn()

尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。
还有比较特殊的情况，例4：

var obj = {
    a: 10,
    b: {
        a: 20,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); // window
        }
    }
}

var fun = obj.b.fn;
fun();

这里的this指向的是window，到这里是不是搞得有些蒙了？其实就是还有句话，this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的；例4中虽然函数fn是被对象b所引用，但是在将fn赋值给变量fun的时候并没用执行，所以最终指向的是window。

构造函数this

fnuction Fun() {
	this.str = "构造函数"
}
var a = new Fun();
console.log(a.str);  // 构造函数

这里之所以对象a可以点出函数Fun里面的str是因为new关键字可以改变this的指向，将这个this指向对象a，这里用变量a创建了一个Fun的实例，相当于复制了一份Fun到对象a里面，此时只是创建好，并没有执行，而调用这个函数Fun的是对象a，那么this指向的自然就是对象a，那么为什么对象a中会有str，因为已经复制了一份Fun函数到对象a中，用了new关键字就相当于复制了一份。

除此之外，我们还可以自行改变this的指向，在javascript中提供了call，apply，bind来解决，一般用来指定this的环境。
例如，我们通常会遇到这样的问题

var a = {
    name: "张三",
    fn:function(){
        console.log(this.name);
        // console.log(this);
    }
}
var b = a.fn;
console.log(b()); // undefined

我们想打印对象a里面的name却打印出来undefined是什么情况？如果直接执行a.fn()是可以的。

var a = {
    name: "张三",
    fn:function(){
        console.log(this.name);
    }
}
console.log(a.fn()); // 张三

这里能够打印是因为这里的this指向的是函数a，那为什么上面的不是指向a呢？那么为了可以达到目的，就需要通过以下方法实现。
1、call()

var a = {
    name:"张三",
    fn:function(){
        console.log(this.name); // 张三
    }
}
var b = a.fn;
b.call(a);

通过call方法，给第一个参数添加要把b添加到哪个环境中，简单来说，this就会指向那个对象。
call方法除了第一个参数以外还可以添加多个参数，如下：

var a = {
    name:"张三",
    fn:function(m,n){
        console.log(this.name); //张三
        console.log(m+n); // 3
    }
}
var b = a.fn;
b.call(a,1,2);

2、apply()
apply方法和call方法有些相似，它也可以改变this的指向

var a = {
    name:"张三",
    fn:function(){
        console.log(this.name); //张三
    }
}
var b = a.fn;
b.apply(a);

同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var a = {
    name:"张三",
    fn:function(m,n){
        console.log(this.name); //张三
        console.log(m+n); //30
    }
}
var b = a.fn;
b.apply(a,[10,20]);

或者

var a = {
    name:"张三",
    fn:function(m,n){
        console.log(this.name); //张三
        console.log(m+n); //30
    }
}
var b = a.fn;
var arr = [10,20]
b.apply(a,arr);

注意：如果call和apply的第一个参数是null,那么this指向的是window对象

var a = {
    name: "张三",
    fn:function(){
        console.log(this); //Window
    }
}
var b = a.fn;
b.apply(null);

3、bind()
bind方法和call、apply方法有些不同，但不管怎么说它们都是用来改变this的指向。
先来说说它们的不同吧。


var a = {
    name: "张三",
    fn:function(){
        console.log(this.name);
    }
}
var b = a.fn;
b.bind(a);

我们发现代码没有打印，对，这就是bind和call、apply方法的不同，实际上bind（）返回的是一个修改过后的函数。

var a = {
	name:"张三",
	fn:function(){
		console.log(this.name);
	}
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //ƒ (){console.log(this.name);}

那么我们现在执行一下函数c看看，能不能打印出对象a里面的name

var a = {
	name:"张三",
	fn:function(){
		console.log(this.name); // 张三
	}
}
var b = a.fn;
var c = b.bind(a);
c();

OK!同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

var a = {
	name:"张三",
	fn:function(num1,num2,num3){
		console.log(this.name); //张三
		console.log(num1,num2,num3); // 10  1  2
	}
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);