改变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里边的函数等等!!!

寄语:

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

相关推荐
FIN66688 分钟前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing10 分钟前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女12710 分钟前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿11 分钟前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN666812 分钟前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy13 分钟前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴26 分钟前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
sorryhc42 分钟前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy1 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq1 小时前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js