JavaScript中this的指向问题以及call、apply、bind改变this指向

JavaScript 专栏收录该内容
5 篇文章 0 订阅

this的指向,一句话总结就是谁调用的就指向谁,那接下来我们就看下常见的函数调用方式:

1. 普通函数

function show() {
  console.log(this === window) // true
}
show()

普通函数的this默认指向的是window,因为调用show方法其实是省略了window,实际上是window.show()

2. 对象方法

var obj = {
  show: function () {
    console.log(this === obj)
  }
}
obj.show()

函数作为对象方法的调用就很明显了,obj调用的this自然指向obj

3. 构造函数

function Person() {
  this.say = function () {
    console.log(this === per) // true
  }
}
Person.prototype.show = function () {
  console.log(this === per) // true
}

var per = new Person()
per.say()
per.show()

构造函数中的方法是per这个实例对象调用的,所以this指向实例对象

4. 绑定事件函数

document.querySelector("#btn").onclick=function(){
    console.log(this === document.querySelector("#btn"))
}

按钮的点击事件,因为是按钮调用的,所以this指向按钮这个dom对象

5. 定时器函数

setInterval(function () {
  console.log(this === window)
}, 1000)

定时器函数是window调用的,this自然指向的是window,同理 setTimeout也是

6. 立即执行函数

;(function () {
  console.log(this === window)
})()

立即执行函数也是window调用的,this指向window。这有个小知识点,以(开头最好再前面加上;避免js执行解析的时候出错。

总结一下:

函数调用方式this指向
普通函数window
对象方法对象
构造函数实例对象
绑定事件函数函数的调用者
定时器函数window
立即执行函数window

7. 改变this指向(call、apply、bind)

但是this的指向并不是一成不变的,js中提供了3种改变this执向的方法:call、apply、bind

其中apply和call用途完全一样,区别只是传参形式不同:

call是 (改变this需要指向的对象, param1,param2,param3…)

apply是 (改变this需要指向的对象, [param1,param2,param3]),可以根据具体情况选择。

接下来看个例子:

var name = "小吴"
var obj = {
  name: "李四"
}
function show() {
  console.log(this.name)
}
show() // 小吴
show.call(obj) // 李四

第一个show是普通函数调用,指向的是window,window上的name是“小吴”

第二个利用了call改变了this指向obj对象,obj上的name是“李四”

bind和前两者的相同点在于都会改变this指向,不同点在于bind并不会马上调用,前两者都会马上调用。

var name = "小吴"
var obj = {
  name: "李四"
}
function show() {
  console.log(this.name)
}
show.bind(obj)() //李四

在这里插入图片描述

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

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

抵扣说明:

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

余额充值