js中的this对象和箭头函数中的this

最新推荐文章于 2024-09-16 11:15:27 发布

原创最新推荐文章于 2024-09-16 11:15:27 发布 · 685 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

前端专栏收录该内容

21 篇文章

订阅专栏

本文解析了JavaScript中this的用法，通过Demo1和Demo2实例说明了普通函数中this随调用上下文变化，而箭头函数保持定义时的上下文。重点讲解了如何使用箭头函数解决describe方法返回函数的this指向问题。

简单说，this就是属性或方法“当前”所在的对象。

Demo1(一般使用——this：定义时所在的对象`（当前所在的对象）`)

var person = {
  name: '张三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

person.describe()

在这里插入图片描述
这里的this,是指describe函数所在的对象（即person）。

Demo2（方法嵌套返回——this：调用时所在的对象`（当前所在的对象）`）

稍微改造下，如下代码：

var person = {
  name: '张三',
  describe: function () {
	// 这里返回一个函数
	return function(){
		return '姓名：'+ this.name;
	}
  }
};

let desRes = person.describe();
desRes();

在这里插入图片描述
根据执行结果，可以看出，并没有把姓名打印出来。为什么呢？
原因就是：describe返回一个函数，这个函数是在全局环境下的，它所在的上下文就是window. this就是属性或方法当前所在的对象，即describe返回的函数当前所在的对象是window.所以，结果什么也不会输出。

Demo3（箭头函数——this:定义时所在的对象`无论何种情况，皆是定义时所在的对象`）

针对Demo2的情况，可以使用箭头函数来绑定this,它可以在函数返回时，就绑定正确的this.

var person = {
  name: '张三',
  describe: function () {
	// 这里返回一个函数,使用箭头函数返回
	return () => {
		return '姓名：'+ this.name;
	}
  }
};

let desRes = person.describe();
desRes();