JavaScript里箭头函数this指向问题

2023-04-1915:25:51编程语言入门到精通Comments1,114 views字数 1694阅读模式

JavaScript语言里面,this一般用于以下四种情况:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/36225.html

1、在普通函数中;
2、当函数作为对象的属性,函数中的this;
3、在构造函数中;
4、在call和apply中;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/36225.html

所以本文也用以上四种情况来展示function函数和箭头函数的this指向异同。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/36225.html


1. 普通函数中的this

1.1 function函数

var a = 123;function test(){        console.log(this);        console.log(this.a);}test(); // 1. window; 2. 123

1.2 箭头函数

var a = 123;var test = () => {        console.log(this);        console.log(this.a)};test();// 1. window; 2. 123

普通函数中不管是function函数还是箭头函数,this指向都是window。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/36225.html


2. 函数作为对象的属性

2.1 function函数

const obj = {    myname: 'zhangsan',    say: function (){        console.log(this);        console.log(`my name is ${this.myname}`);    }};obj.say(); // 1. obj; 2. my name is zhangsan

2.2 箭头函数

const obj = {   myname: 'zhangsan',    say:()=> {        console.log(this);        console.log(`my name is ${this.myname}`);    }};obj.say(); // 1. window; 2. my name is undefined

在函数作为对象的属性时,function函数中的this指向调用它的对象,而箭头函数中的this则不再是指向调用该函数的对象,而是指向window。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/36225.html


3. 在构造函数中

3.1 function函数

const Info = function (name, age){    //1. 创建一个空对象    // let this=new Object();    //2. 设置对象    this.color=color;    this.type=type;    //3. 返回该对象    // return this;}const info = new Info('human', 99);console.log(info); // {name: 'human', age: 99}

3.2 箭头函数

const Info = (name, age) => {    this.name = name;    this.age = age;}const info = new Info('human', 99);console.log(info); // Uncaught TypeError: Info is not a constructor

在构造函数中,function函数和箭头函数中,this的指向也不相同。如果箭头函数作为构造函数,则会报错,提示该函数不是一个构造器。因此,箭头函数不能作为构造函数来使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/36225.html


4. call和apply调用

const obj = {    myname: 'zhangsan',};

4.1 function函数

function getPer (perName){    console.log(this);    console.log(this[perName]);}getPer.call(obj, 'myname'); // 1. obj; 2. zhangsan

4.2 箭头函数

const getPer = (perName) => {    console.log(this);    console.log(this[perName]);}getPer.call(obj,'myname'); // 1. obj; 2. zhangsan

 在call和apply的场景下,箭头函数中的this并不会指向call或者apply函数中的第一个参数,而是指向了window对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/36225.html

总结:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/36225.html

1、普通函数中,this指向window对象;
2、函数作为对象的属性,函数中的this指向调用函数的对象;
3、在构造函数中。此时this指向构造函数正在构造的实例对象;
4、在call和apply中,this指向第一个参数,即被扩展的作用域对象;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/36225.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/36225.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/ymba/36225.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定