改变this指向的三种方式

题记:为什么我们要使用改变this指向?

我们思考一下,我们往往获取值的方式有下边几种情况,比如自己声明,另外就是通过原型链去找对吗,但是如果你又没有声明,原型链上有没有,那么怎么办呢?就偷,改变this其实就是把其他家的钥匙拿到,取别人的东西。

call()

function.call(thisArg, 参数1, 参数2, 参数3...)

function: 要改变this指向的原函数

thisArg: 要改变到的this指向的目标对象

javascript 复制代码
function fn(animal) {
  this.animal = animal
  console.log('this', this)
  this.b()
}

const obj = {
  animal:'tiger',
  b: function() {
    console.log(`${this.animal} is a man-eating animal`)
  }
}

fn.call(obj,'laohu')

apply()

function.apply(thisArg, [参数1, 参数2, 参数3...])

function: 要改变this指向的原函数

thisArg: 要改变到的this指向的目标对象

javascript 复制代码
function fn(animal) {
  this.animal = animal
  console.log('this', this)
  this.b()
}

const obj = {
  animal:'tiger',
  b: function() {
    console.log(`${this.animal} is a man-eating animal`)
  }
}

fn.apply(obj,['laohu'])

bind()

funtion.bind(thisArg, 参数1, 参数2, 参数3...)

function: 要改变this指向的原函数

thisArg: 要改变到的this指向的目标对象

该方法并不会调用函数,仅仅改变了this指向

javascript 复制代码
function fn(animal) {
  this.animal = animal
  console.log('this', this)
  this.b()
}

const obj = {
  animal:'tiger',
  b: function() {
    console.log(`${this.animal} is a man-eating animal`)
  }
}

let fnn = fn.bind(obj,'laohu')
fnn()

总结:我们可以看到三个方法都得到了相应的结果,但是我们需要思考两件事,为什么要弄三个?另外就是三个代码书写都什么不同吗?

不同之处:

参数不同:1、apply()的参数是数组形式,可调用 ;2、bind()返回的是一个函数,需要再次调用才行。

我们再想一想,bind()的使用场景就是我们有的时候需要更换this,但是又不想调用,这个不就好了吗?

另外我们常常继承用call,apply经常和数组有关系,比如想用Math里边的函数等等!!!

寄语:

临近新年,希望各位大佬家庭和睦,家人健康,工作顺利。

相关推荐
2501_946230982 分钟前
Cordova&OpenHarmony维修搜索功能实现
javascript
教练、我想打篮球3 分钟前
123 safari 浏览器中下载 URLEncoder.encode 的中文名称的文件, safari 未进行解码, 其他浏览器正常
前端·http·safari
前端不太难4 分钟前
RN 列表里的「局部状态」和「全局状态」边界
开发语言·javascript·ecmascript
foo1st19 分钟前
HTML中常用HASH算法使用笔记
javascript·html·哈希算法
星月心城26 分钟前
面试八股文-JavaScript(第五天)
开发语言·javascript·ecmascript
小白x26 分钟前
Echarts常用配置
前端
hello_Code29 分钟前
css和图片主题色“提取”
前端
小杨梅君29 分钟前
Vue3与iframe通信方案详解:本地与跨域场景
前端·vue.js
IT_陈寒31 分钟前
Redis高频踩坑实录:5个不报错但会导致性能腰斩的'隐秘'配置项
前端·人工智能·后端
CoolerWu34 分钟前
2025 · 我与 AI / Vibe Coding 的一年
前端·后端