JavaScript-this指向解析

痞子三分冷 提交于 2020-03-02 00:25:40

从执行上下文的角度解析this指向,因为this是与执行上下文绑定的,而执行上下文可分为:全局执行上下文、函数执行上下文、eval执行上下文,所以理所应当觉得this指向这三个方面,下面看看实例:

// 全局执行上下文
console.log(this, "全局")
// 函数执行上下文
function fun() {
    console.log(this, "函数")
}
fun()
// eval执行上下文
eval("console.log(this, 'eval')")
// 打印结果见下图1,从图中可见,打印结果与我们预期结果有很大的差异,三种执行上下文默认情况下均之上了window,那我们看一下怎样去改变this的指向

图1
在这里插入图片描述

改变this指向方式

1.使用关键字new
构造函数使用new实例化时this指向new出来的对象

function Fun(name) {
      this.name = name
  }
  var exm = new Fun("ann")
  console.log(exm.name) // ann   所以Fun中的this指向了exa

2.使用call,apply,bind
把函数绑定到一个对象上运行,函数this就指向目前绑定的对象

function Fun(name) {
	this.name = name
}
var obj = {}
Fun.call(obj, 'ann')
console.log(obj) // {name: "ann"}

3.变量赋值
把需要指向的this赋值给一个变量,调用变量指向需要的对象
4.箭头函数
箭头函数是es6新增的,箭头函数的this是在定义函数时绑定的,不是在执行过程中绑定的

var a = 2
function fun() {
    this.a = 1
    return () => {
        console.log(this.a)
    }
}
fun()() // 打印结果为1
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!