js this指向的总结

1.直接调用函数

	let obj = {
	  a: function() {
	    console.log(this);
	  }
	}
	let func = obj.a;
	func();

这种情况是直接调用,this指向window。

2. 对象.方法的形式调用

	let obj = {
	  a: function() {
	    console.log(this);
	  }
	}
	obj.a();

这就是对象.方法的情况,this指向这个对象。

3. new绑定

	function foo() {
	  console.log(this.a)
	}
	let c = new foo()

此时函数中的this指向实例对象c,并且不会被任何方式改变。
原理:调用new时,新对象会被绑定到函数调用的this上。

4. 箭头函数

	let obj = {
	  a: function() {
	    let do = () => {
	      console.log(this);
	    }
	    do();
	  }
	}
	obj.a();

箭头函数中的this,取决于定义时包裹箭头函数的第一个普通函数的 this,且一旦绑定就不会发生改变。
此时包裹箭头函数do的第一个普通函数a绑定在对象obj上, 因此箭头函数中的this是obj。

5.通过bind显示绑定this

	let obj1={
	    a:222
	};
	let obj2={
	    a:111,
	    fn:function(){
	        alert(this.a);
	    }
	}
	obj2.fn.bind(obj1)(); // 222

函数fn中的this 取决于bind函数的第一个参数,如果第一个参数为空,那么就是 window 。
注意点:给一个函数进行多次bind,this 永远由第一次 bind 决定

	//let fn2 = fn.bind(obj1).bind(obj2); 等于
	let fn2 = function () {
        return function () {
            return fn.call(obj1);
        }.call(obj2);
    }

6.优先级

new > call、apply、bind > 对象.方法 > 直接调用。

7.总结

哪个对象调用函数,函数里面的this指向哪个对象
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值