理解js中this的指向(几条规则加例子+call,apply,bind改变this指向)

javascript 专栏收录该内容
56 篇文章 0 订阅

你越是认真生活,你的生活就会越美好——弗兰克·劳埃德·莱特
《人生果实》经典语录

首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(后面有补充)

规则

  • 如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,严格模式指向undefined
  • 如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象
  • 如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象
  • this永远指向的是最后调用它的对象,也就是看它执行的时候谁调用
    下面例子4中虽然函数fn是被对象b所引用,但是在将fn赋值给变量j的时候并没有执行,所以最终指向的是window

当this碰到return时

  • 如果返回值是一个对象,那么this指向返回的对象,如果返回值不是对象那么this还是指向函数的实例
  • 虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。
  • .在严格版中的默认的this不再是window,而是undefined。

例子1:

function a(){
    var name = "泓";
    console.log(this); // Window
    console.log(this.name); // undefined 相当于window.user 不会打印出"泓"
    
}
a();

按照我们上面说的this最终指向的是调用它的对象
这里的函数a实际是被Window对象所调用的,等同于下面的代码

function a(){
    var name = "泓";
    console.log(this); // Window
    console.log(this.name); // undefined 相当于window.user 不会打印出"泓"
    
}
window.a();

例子2:

var obj = {
	name: "泓",
	fn() {
		console.log(this.name) // 泓  这里的this指向obj对象
	}
}
obj.fn() // '泓' fn()被obj对象调用

这里的this指向的是对象obj,因为调用这个fn是通过obj.fn()执行的,这里再强调一次,this的指向在函数创建的时候还没法确定,在调用的时候才能确定,也就是谁调用的就指向谁

接下来的例子会更复杂些

例子3:

var obj = {
    name:"泓",
    fn:function(){
        console.log(this.name); // 泓 this指向obj对象
    }
}
window.obj.fn(); // 泓

这段代码和上面的那段代码几乎一样,但是这里的this为什么不是指向window,如果按照上面的规则,this的指向在函数创建的时候还没法确定,在调用的时候才能确定,也就是谁调用的就指向谁,最终this指向的是调用它的对象,window是js中的全局对象,我们创建的变量实际上是给window添加属性,所以这里可以用window.obj调用obj对象

这里先不解释为什么上面的那段代码this为什么没有指向window,我们再来看一段代码。

var obj = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12 这里this指向obj对象里的b对象
        }
    }
}
obj.b.fn(); // 12

this的指向在函数创建的时候还没法确定,在调用的时候才能确定,也就是谁调用的就指向谁
这里同样也是对象obj调用,但是访问Obj.b时,并没有执行fn方法访问obj.b.fn()时才执行了fn方法,所以这里this指向b对象

  • 情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。

  • 情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

  • 情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象,例子3可以证明,接下来我们继续看几个例子。

var obj = {
    a:10,
    b:{
        fn:function(){
            console.log(this.a); //undefined  this指向obj对象里的b对象
        }
    }
}
obj.b.fn(); // undefined

尽管对象b中没有属性a,这个this指向的也是对象b,因为this只会指向它的上一级对象,不管这个对象中有没有this要的东西。

还有一种比较特殊的情况,例子4:

var obj = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a);
            console.log(this);
        }
    }
}
var obj1 = obj.b.fn; // 这里只是赋值
obj1(); 

// 这里obj1相当于
obj1 = function() {
	console.log(this.a);
    console.log(this);
}
obj1() // 这时obj对象里的this指向window

this永远指向的是最后调用它的对象,也就是看它执行的时候谁调用

例子4中虽然函数fn是被对象b所引用,但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window,这和例子3是不一样的,例子3是直接执行了fn。

构造函数版this:

function Fn(){
    this.name = "泓";
}
var a = new Fn();
console.log(a.name); // 泓

new关键字

new关键字会创建一个空的对象,然后会自动调用一个方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。

我们还可以自行改变this的指向,关于自行改变this的指向请看JavaScript中call,apply,bind方法的总结这篇文章,详细的说明了我们如何手动更改this的指向。

当this碰到return时

  • 如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例
  • 还有一点就是虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。
  • .在严格版中的默认的this不再是window,而是undefined。

return返回值为对象,this指向返回的对象

function Fn()  
{  
    this.name = '泓';  
    return function(){};
}
var a = new Fn;  
console.log(a.name); // undefined

return返回值不是对象,this还是指向实例

function Fn()  
{  
    this.name = '泓';  
    return 1;
}
var a = new Fn;  
console.log(a.name); // 泓

return返回值不是对象,this还是指向实例

function Fn()  
{  
    this.name = '泓';  
    return undefined;
}
var a = new Fn;  
console.log(a.name); // 泓

return返回值是null,this还是指向实例

function Fn()  
{  
    this.name = '泓';  
    return null;
}
var a = new Fn;  
console.log(a.name); // 泓

改变this指向-call,apply,bind

JavaScript中call,apply,bind方法

  • call,apply,bind方法第一个参数指定this指向的对象,再往后的参数作为调用方法的参数
  • apply方法第二个参数是数组
  • 如果call和apply的第一个参数写的是null,那么this指向的是window对象
  • bind方法跟call,apply有点不同,返回的是修改后的新函数

call()

var a = {
	name: '泓',
	fn: function() {
		console.log(this.name)
	}
}
var b = a.fn
b() // undefined this指向window
b.call(a) // 泓  this原本指向window call()第一个参数将this指向变成了对象a

call方法除了第一个参数以外还可以添加多个参数,如下

var a = {
	name: '泓',
	fn: function(a, b) {
		console.log(this.name)
		a && b &&
		console.log(a + b)
	}
}
var b = a.fn
b() // undefined this指向window
b.call(a, 2, 5) // 泓  7  this指向了a对象,同时2,5作为b函数的参数传入  

apply()

apply()方法与call()方法类似,不同点apply第二个参数必须是一个数组

var a = {
	name: '泓',
	fn: function(a, b) {
		console.log(this.name)
		a && b &&
		console.log(a + b)
	}
}
var b = a.fn
b() // undefined this指向window
b.apply(a, [2, 5]) // 泓  7  this指向了a对象,同时2,5作为b函数的参数传入  

bind()

var a = {
	name: '泓',
	fn: function(a, b, c) {
		console.log(this.name)
		a && b && c &&
		console.log(a,b,c)
	}
}
var b = a.fn
b() // undefined this指向window
b.bind(a, 1) // 返回的是一个函数,this指向a对象,函数第一个的参数为1
// 调用
var c = b.bind(a, 1)
c(2,3) // 泓 1 2 3 

推荐阅读

连点成线


谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强

  • 5
    点赞
  • 0
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值