this指向

最新推荐文章于 2024-11-13 01:18:00 发布

农夫_山泉水

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量145

点赞数

分类专栏：前端文章标签： javascript 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_47793359/article/details/128548043

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文详细讨论了JavaScript中this关键字在不同场景下的指向问题，包括函数自调用、对象方法、箭头函数、new构造函数、call、apply、bind方法以及计时器中的应用和特点。通过实例解析了this的常见六种情况，帮助开发者理解和解决开发中遇到的相关问题。

摘要由CSDN通过智能技术生成

现在使用的框架是vue2,使用最多的就是this,现在谈下this指向的问题，开发过程中也经常会碰到通过this拿不到值的问题，现在记录一下，常见的共有6种情况，严格模式指向undefined

1：函数自调用：this指向window

 function fn(){
    console.log(this);
  }
  fn()//window
  window.name = '老王'
    var obj = {
      name: "隔壁老王",
      getThis: function () {
        console.log(this);
        console.log(this.name);
      }
    }
    var getNew = obj.getThis
  getNew()//老王：这里的函数赋值给getNew，getNew自调用，指向的是window

2:对象里面的方法调用指向这个对象

var obj={
    name:"this",
    getThis:function(){
      console.log(this); //打印的obj这个对象
      console.log(this===obj);//true
    }
  }
  obj.getThis()//{name: 'this'} true

3:箭头函数里面的this指向箭头函数外层的this

function fn1() {
    console.log(this, 'fn1');
    let fn2 = () => {
      console.log(this, 'fn2');
    }
    fn2() //因为fn1自调用指向window,所以fn2 的this也是window
  }
  fn1()//fn1:wiodow,fn2:window

4:new关键字调用函数，this指向的是这个新对象

function fn(name){
    console.log(this,'999');//fn{},'999',这里的this指向的是fn构造函数 
    this.name=name
  }
  var fn1=new fn('小明')
  console.log(fn1.name);//'小明'

5：js的call(),apply()，bind（）原生方法，this指向的是这些方法的第一个参数

//call
call(name1,arg2,argsn)//第一个参数永远是将要this重指向的对象，2-n个参数是参数列表，用  ，分割
  var obj = { name: "老王", age: 27 }
  var obj1 = { name: '隔壁老王', age: 30 }
  function fn(age) {
    console.log(this.name, this.age);
  }
  fn.call(obj) //老王,27
  fn.call(obj1)//隔壁老王,30
  var obj=function(name,age){
    console.log(this);
    console.log(name);
    console.log(age);
  }
  obj.call(window,'老王','18','22',33)//window,老王,18
//apply
  apply(nama,[args,arg1,args2])//第一个参数永远是将要this重指向的对象，第二个参数为数组格式的
  var obj = { name: "老王", age: 27 }
  var obj1 = { name: '隔壁老王', age: 30 }
  function fn(age) {
    console.log(this.name, this.age);
  }
  // fn.apply(obj) //老王,27
  // fn.apply(obj1)//隔壁老王,30
  var obj3=function(name,age){
    console.log(this); //{ name: "老王", age: 27 }，这里因为apply强制指向obj了
    console.log(name);//吃西瓜
    console.log(age);//20
  }
  obj3.apply(obj,['吃西瓜',20,90])
//bind()
  var obj = {
      name: "老王",
      fn: function () {
        console.log(this, 'obj.fn');
      }
    }
  var obj1=obj.fn.bind({name:'隔壁老王'})
  // obj1()this指向的是{ name: '隔壁老王' }
  var obj={name:'bind'}
  function fn(str){
    console.log(this,str);
  }
  var fn1=fn.bind(obj,'parms')
  fn1()//this指向obj,parms作为fn的参数，打印结果：{name: 'bind'} 'parms'
  var obj = { name: 'bind' }
  function fn(str) {
    console.log(this, str);
    console.log(arguments);
  }
  var f = fn.bind(obj, 'aa')
  f() //{name: 'bind'} 'aa'   Arguments ['aa']
  f('gg', '1', 2, 4) //{name: 'bind'} 'aa'   Arguments ['aa','gg', '1', 2, 4]

6:计时器，延时器：this指向的是window