一篇搞懂this指向(浏览器环境)

时间:2021-2-20 作者:admin

本篇旨在提供一个思路,来思考和判断this的指向。

判断this指向就3种。

1. call调用

1.1 作为对象的方法调用,则this指向调用它的对象

let obj={
  a:1,
  fn(){
    console.log(this.a)
  }
}
obj.fn() // 等价于 fn.call(obj) 所以这里为1
var a=1; // 等价于 window.a = 1
function fn(){
  console.log(this.a)
} // 等价于 window.fn = function fn(){ console.log(this.a) }

fn() // 等价于 fn.call(window) 所以这里为1

1.2 块作用域里调用

var obj={a:1};
function test(){
  console.log(this)
  function fn(){
    console.log(this)
  }
  fn()
  return fn
}
test() // window window
test.call(obj) // obj window
test().call() //window window window
test().call(obj) //window window obj
let fn=function(){
  console.log(this)
}
fn() // window
'use strict'
let fn=function(){
  console.log(this)
}
fn() // undefined

解释:

  1. 这里的fn()可以理解为fn.call(undefined)
  2. fn.call(undefined)在非严格模式下,this会指向window
  3. fn.call(undefined)在严格模式下,this指向undefined

2. 构造函数里的this

this指向new出来的实例,优先级最高,高于bind,call,apply

3. 箭头函数内使用this

箭头函数没有自己的this,所以无法显示的绑定this,也就是说无法执行call,apply,bind以及无法当做构造函数使用。

但是只要记住一点,箭头函数里的this在定义时就已经和父级作用域的this绑定了,父级作用域里this指向谁,它就指向谁

结语

判断this指向法则:

  1. 只分析函数运行时;
  2. 是否在箭头函数内,如果是参见第三条;
  3. 是否在构造函数内,如果是参见第二条;
  4. 都不是,参见第一条,顺便区分下严格模式即可。
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。