JS篇之this指向以及如何改变this指向

this指向的几种类型
        
        1.作为普通函数调用 this指向window   

var x = 1
var y = 2
function test(){
    var x = 2
    console.log(this.x,this.y,x) // 1 undefined 2
}
window.test() // 实际上是window直接调用的test()

        2.作为对象方法的调用 this指向该对象

let obj = {
    x: 1,
    fn: function(){
		return this.x
	}
}
obj.fn() // 1 实际上是 window.obj.fn() obj直接调用 window间接调用 所以this指向obj

// 如果let fn1 = obj.fn 
fn1() // x 为undefind 因为实际上为 window.fn1() 所以this指向window 而在全局作用域里并没有x变量

        3.作为构造函数调用 this就指这个new出来的新对象

var x = 1
function T(){
	this.x = 2
}
let obj1 = new T()
console.log(this.x) // 2 说明this不指向window 指向obj1实例

        4.通过事件绑定的方法, 此时 this 指向 绑定事件的对象
        5.定时器的this指向window

改变this指向的三种方式:

        1.call

var obj = {
	name: '张三',
	age: '80'
}

var a = {
	name: '1',
	age: '10',
	fn(na, ag) {
		console.log(this.name, this.age, na, ag);
	}
}
a.fn.call(obj, 1, 2);  // 张三 80 1 2 this指向obj

        2.apply

var obj = {
	name: '张三',
	age: '80'
}

var a = {
	name: '1',
	age: '10',
	fn(na, ag) {
		console.log(this.name, this.age, na, ag);
	}
}
a.fn.apply(obj, [1,2]);  // 张三 80 1 2

        3.bind

var obj = {
	name: '张三',
	age: '80'
}

var a = {
	name: '1',
	age: '10',
	fn(na, ag) {
		console.log(this.name, this.age, na, ag);
	}
}
a.fn.bind(obj, 1, 2)();  // 张三 80 1 2 	因为返回的是一个函数所以需要调用

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值