this的指向以及修改this指向

发布时间:2024-08-09 12:01

文章目录

    • this指向
        • this的基本指向
        • this指向被改变的情况
        • 箭头函数中的this

this指向

this的基本指向

调用方式 this指向
普通函数调用 window
构造函数调用 实例对象 原型对象里的方法也指向实例对象
对象方法调用 该方法所属对象
事件绑定方法 绑定事件对象
定时器函数 window
立即执行函数 window

总结来说:除了定时器、普通函数和立即执行函数this指向为window,其他都指向调用者

this指向被改变的情况

  • call():调用函数并改变函数的this指向
    var o ={
      name:\'mkbird\'
    }
    function fn(){
      console.log(this);
    }
    fn() // 输出window

    fn.call(o); // 调用fn并将fn的this指向o,输出对象o

// 所以es5很多时候在子类继承父类时会使用Father.call(this)来使用父类的属性,es6使用super()

// 同时call()在实现调用函数功能时,还能传入参数
    var o ={
      name:\'mkbird\'
    }
    function fn(a,b){
      console.log(a+b);
    }
    fn.call(o,1,2); // 输出3
  • apply():与call的区别在于参数,必须传入数组,返回的是字符串或数字
fun.apply(thisArg,[argsArray])

// apply主要利用它传入数组返回数字的特性解决数组中的问题
// 比如Math.max只支持传入数字,但是我们现在用的是数组
var arr = [1.2,3]
var max = Math.max.apply(null,arr)
console.log(max) // 3
  • bind():bind不会调用函数,只修改this的指向,返回的是原函数改变this后的新函数
//如果有函数不想立即调用,又想改变函数的内部指向,这时就用bind
    var o ={
      name:\'mkbird\'
    }
    function fn(){

    }
    var f =fn.bind(o)
    f();

箭头函数中的this

// 箭头函数是函数换了一种写法
(参数)=>{函数体}

箭头函数与普通函数最大的区别是,箭头函数不会绑定this,箭头函数中的this指向箭头函数定义区的this

注意:箭头函数没有剩余参数arguments,如果想保存剩余参数只能使用…

…可以将剩余参数以数组的形式存起来

let students = [\'zs\',\'ls\',\'ww\']
let [s1,...s2] = student;
console.log(s1);  //\'zs\'
console.log(s2);  //[\'ls\',\'ww\']

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号