写点什么

Es6 中的 this 指向

作者:乌龟哥哥
  • 2022-10-27
    上海
  • 本文字数:1769 字

    阅读完需:约 6 分钟

前言

对于一个前端初学者来说,this 的指向是一个必须要掌握的知识点,尤其是 es6 之后的 this 指向更加变得飘忽不定,我们今天就来了解一下各种情况下 this 的指向。

什么是 this

首先,this 不是一个函数也不是某个对象,它具体指向什么东西取决于我们在哪里去调用这个 this,只有函数调用的时候才会发生 this 的绑定

1.全局作用域

console.log(this === window) //true
复制代码


当我们在全局作用域中调用的时候,this 指向的是 window 对象,相当于 window 调用的这个 tihs

2.纯函数调用

 function fun(){     console.log(this)//this指向window }  fun()
复制代码


为什么在函数体内 this 也是指向的 window,我们可以看到是在全局调用的 fun 函数,当我们调用的时候会进行默认绑定,也就是绑定到 window 上。

3.作为对象方法和对象的属性值

var Person = {    name:'张三',    that:this,    age:function(){        console.log(this)//Person对象        console.log(this.name)//李四    }}console.log(Person.that) //window 类似纯函数调用Person.age() //调用对象的age方法 
复制代码



当我们把 this 作为对象的某个方法去调用的时候,this 指向的是这个对象,相当于这个对象调用这个方法




var Person = {    obj:{        name:'李四',        sex:function(){            console.log(this)//obj对象        }    }}
Person.obj.sex()//调用penson对象中的obj对象的sex方法
复制代码


嵌套对象的时候 this 的指向同样是谁调用指向谁,这时候是 obj 对象调用的


4.构造函数中的 this

function fun(name,age){    this.name = name;    this.age = age;}
var obj = new fun('李四',20)
console.log(obj)//控制台打印如下
复制代码


这时候的 this 指向的是构造函数所创建出来的 obj 对象


5.class 类中的 this

   class Person {        constructor(name){            this.name = name            this.say = function () {                console.log('my name is '+ this.name)            }        }
sleep = function(){ console.log(this) } } var objA = new Person('李四') objA.say()//调用objA对象的say方法 控制台打印 ‘my name is 李四’ objA.sleep()//调用objA对象的sleep方法 打印 objA对象
复制代码


在 class 中的 this 都是指向这个构造函数生成的对象


6.es6 中的箭头函数 this 指向

 var obj = {        name:'张三',        say:()=>{            console.log(this)        }    }    obj.say()//控制台打印window
复制代码


箭头函数没有自己的 this 会默认继承父级执行上下文的 this,这里的上下文 this 就是 window


注:当函数执行时,会创建一个称为执行上下文的内部对象(可理解为作用域)。一个执行上下文定义了一个函数执行时的环境。对象是没有执行上下文的。--


 var obj = {        name:'李四',        person:function() {          return {                name:'张三',                say:()=>{                    console.log(this)                }            }        }
};
obj.person().say()//调用say方法这里的this指向的是obj对象,箭头函数没有this会向上查找。普通函数创建时会绑定this,如果person函数也是箭头函数的话this指向window
复制代码



更改 this 指向(面试经常问到)

var Person = {    name:'张三',    say:function(age){       console.log(`my name is ${this.name},i am ${age} years old`)//es6语法模板字符串    }}
var obj = { name:'李四'}
复制代码


直接调用Person.say()





bind()


Person.say.bind(obj,'20','第二个参数',...)()//bind返回的是一个重新绑定this的函数需要调用Person.say.bind(obj)('20','第二个参数',...)//两种传参方式,参数依次加在后面
复制代码





call


Person.say.call(obj,'20','第二个参数',...)//call返回的是重新绑定this并且立即调用之后的结果,参数依次加在后面
复制代码





apply


Person.say.apply(obj,['20','第二个参数'])//返回的同样是绑定了this并且立即调用之后的结果,参数是数组格式
复制代码

总结:

bind 跟 call 和 apply 相比 区别显而易见,返回的结果不同 需要自己去调用,那么 call 跟 apply 有什么区别呢?其实除了传参方式不同并没有很大的区别,有传闻 apply 对内存的消耗更小一点,因为基本数据类型和引用数据类型在内存中存放的方式不同,具体是不是还需要去验证一番。

发布于: 刚刚阅读数: 3
用户头像

乌龟哥哥

关注

正在努力寻找offer的大四小菜鸟 2021-03-16 加入

擅长 Hbuilder、VS Code、MyEclipse、AppServ、PS 等软件的安装与卸载 精通 Html、CSS、JavaScript、jQuery、Java 等单词的拼写 熟悉 Windows、Linux、 等系统的开关机 看–时间过得多快,不说了,去搬砖了

评论

发布
暂无评论
Es6中的this指向_10 月月更_乌龟哥哥_InfoQ写作社区