一盏茶的功夫带你掌握烦人的 this 指向问题( 二 )

前言

相信很多小伙伴们都被this 的指向问题所折磨过,this 它到底指向哪啊? 今天我们就来聊聊如何判断this 指向哪里,一盏茶的功夫让小伙伴们开心一整天!

文中所实例代码都运行在Chrome浏览器的Console控制台中。

在上篇文章中,我们讲了三种this指针的绑定规则,接下来我们讲讲剩余的两种方法,并拓展一下。

this 的绑定规则

  1. new 绑定

在以前讲构造函数的文章里,我们讲了new关键字的作用,感兴趣的小伙伴们可以去我的主页中看看那篇文章。我们知道,自定义构造函数中,通常使用this为实例对象添加属性和方法,如以下例子:

js 复制代码
function Car(color) {
    this.name = 'BMW'
    this.height = '1400'
    this.lang = '4900'
    this.weight = 1000
    this.color = color

}

let car1 = new Car('pink')   // 实例对象

let car2 = new Car('green')

那此时构造函数中的this指向谁呢?我们来输出一下:

很明显,我们的实例对象中出现了各种的属性,所以,构造函数中的this指向new出来的实例对象本身 ,这个例子中this分别指向car1car2.

5. 显示绑定 --- call, apply, bind

显示绑定是我们通过call,apply,bind,改变this的指向,我们一起来看看例子:

js 复制代码
function foo() {
    console.log(this.a);
}

var obj = {
    a: 2
}

foo()

如果这样调用foo(),那么就是this默认绑定,this指向全局,那么输出undefined,那么我们怎么让this指向obj,输出2呢?

1. call

js 复制代码
function foo() {
    console.log(this.a);
}

var obj = {
    a: 2
}

foo.call(obj)

call的作用就是强行把foo中的this指向obj,我们来输出以下来看看:

如果foo(x, y)中有参数传入,那我们使用call时应该怎么样呢?

js 复制代码
function foo(n, m) {
    console.log(this.a, n, m);  // 2 100 200
}

var obj = {
    a: 2
}

foo.call(obj, 100, 200)

2. apply apply方法跟call方法差不多,但是传入参数时需要使用数组来装

js 复制代码
function foo(n, m) {
    console.log(this.a, n, m);  // 2 100 200
}

var obj = {
    a: 2
}

foo.apply(obj, [100, 200])

我们来输出一下:

可以看出,applycall 方法都将this的指向改变了

3. bind

bind的执行结果会返回一个函数体,所以我们需要这样写:

js 复制代码
function foo(n, m) {
    console.log(this.a);  // 2 100 200
}

var obj = {
    a: 2
}
var bar = foo.bind(obj)
bar()

如果我们想传入参数:

这里我们举个例子,传入的参数为100和200

js 复制代码
var bar = foo.bind(obj, 100, 200)
bar()

// 或者
var bar = foo.bind(obj)
bar(100, 200)

箭头函数

箭头函数没有this这个概念,写在箭头函数中的this也是它外层函数的this

首先我们来看一个例子:

js 复制代码
var obj = {
  name: 'TOM',
  show: function() {
    var bar = function() {
      console.log(this.name);
    }
    bar()
  }
}
obj.show()

这里bar中的this指向哪呢?因为bar()是直接调用,this的默认绑定规则,那么它指向的是全局,这里就输出undefined

如果我们这里使用的箭头函数的话:

js 复制代码
var obj = {
  name: 'TOM',
  show: function() {
    var bar = () => {
      console.log(this.name);
    }
    bar()
  }
}
obj.show()

箭头函数里是没有this的, 如果在箭头函数中写了this,那么this就相当于它的外层函数上面,是它外围函数的this。

上述例题中,由于bar是箭头函数,那么bar内的this就相当于在它的外层函数show上, 那么obj.show()就触发了隐式绑定规则this指向obj,this.name输出TOM

总结

this

  • this的绑定规则
  1. 默认绑定 --- 函数在哪个词法作用域里生效,this就指向哪里

  2. 隐式绑定 --- 当函数被一个对象所拥有,再调用时,此时this回指向该对象

  3. 隐式丢失 --- 当函数被多个对象链式调用时,this指向引用函数的对象

  4. 显示绑定 --- call, apply, bind

  5. new 绑定

箭头函数

箭头函数没有this这个概念,写在箭头函数中的this也是它外层函数的this

今天的内容就到这啦,如果你觉得小编写的还不错的话,或者对你有所启发,请给小编一个辛苦的赞吧

相关推荐
泯泷6 分钟前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
抹茶san8 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
Senar36 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
南客先生1 小时前
互联网大厂Java面试:RocketMQ、RabbitMQ与Kafka的深度解析
java·面试·kafka·rabbitmq·rocketmq·消息中间件
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言1 小时前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12542 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx2 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端