解决this指代的三种常用方法

最新推荐文章于 2023-02-07 06:00:00 发布

前端小曾

最新推荐文章于 2023-02-07 06:00:00 发布

阅读量3.2k

点赞数 13

分类专栏：笔记文章标签： javascript reactjs vue.js es6 node.js

本文链接：https://blog.csdn.net/weixin_41967475/article/details/105790363

版权

笔记专栏收录该内容

7 篇文章 1 订阅

订阅专栏

解决this指代的三种常用方法

JavaScript语言的this对象一直是一个令人头痛的问题。在这里，我们以一个简单小例子来为大家讲解！

原文链接：https://editor.csdn.net/md/?articleId=105790363

直接上代码：

class Animal {
    constructor() {
        this.type = 'animal';
    }
    says(say) {   
    	setTimeout(function() {
        	console.log(this.type + ' says ' + say);
    	}, 1000);
    }   
} 
var animal = new Animal();
animal.says('hello'); 
//输出结果：undefined says hello
//注意：这里的this指向的是全局作用域，所以是undefined

分析原因：一般情况下setTimeout()的this指向window或global对象；而当使用类的方法时，需要this指向类实例，以下三种方法可以将this绑定到回调函数来管理实例

解决方法一（传统）：赋值，将this传给self,再用self来指代this

class Animal {
   constructor() {
       this.type = 'animal';
   }
   says(say) {
       var self = this;
       setTimeout(function() {
           console.log(self.type + ' says ' + say);
       }, 1000);
   }
} 
var animal = new Animal();
animal.says('hello');
//输出结果：animal says hello

解决方法二（ES5）：bind(this)

class Animal {
   constructor() {
       this.type = 'animal';
   }
   says(say) {
       setTimeout(function() {
           console.log(this.type + ' says ' + say);
       }.bind(this), 1000);
   } 
} 
var animal = new Animal();
animal.says('hello');
//输出结果：animal says hello

解决方法三（ES6）：箭头函数

注：箭头函数不改变this指代

class Animal {
   constructor() {
       this.type = 'animal';
   }
   says(say) {
       setTimeout(() => {
           console.log(this.type + ' says ' + say);
       }, 1000);
   }
} 
var animal = new Animal();
animal.says('hello');
//输出结果：animal says hello

下面咱们简单了解一下什么是bind()方法和箭头函数！

原文链接：https://editor.csdn.net/md/?articleId=105790363

bind()

bind()方法，顾名思义，就是绑定的意思

bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值，即从第二个参数起，会依次传递给原始函数

例如：fn.bind(obj)，言外之意就是 obj.fn()，fn函数体内的this自然就指向obj

语法：fn.bind(this,arg1,arg2,…);

小例子：

var a = {
	b:function(){
		var fn = function(){
			console.log(this.c+' '+'world');
		};
		fn();
	},
	c:'hello'
}
a.b();
// undefined world
//注：这里的this指代的是全局作用域，所以返回undefined

bind()绑定一

var a = {
	b:function(){
		var fn = function(){
			console.log(this.c+' '+'world');
		}.bind(this);
		fn();
	},
	c:'hello'
}
a.b();
// hello world
//注：因为该函数是一个对象的方法，则它的this指针指向这个对象

bind()绑定二

var a = {
	b:function(){
		var fn = function(){
			console.log(this.c+' '+'world');
		};
		fn.bind(this)();
	},
	c:'hello'
}
a.b();
// hello world

bind()传入多个参数

function fn(y,z){
	return this.x+y+z;
}
var obj = {
	x:2
};
var num = fn.bind(obj,3,5);
console.log(num()); //10
//注：bind方法会把它的第一个实参绑定给fn函数体内的this，所以这里的this即指向obj对象
//从第二个参数起，会依次传递给原始函数,即y=3,z=5

箭头函数

箭头函数是ES6新出来的写法，它的语法比函数表达式更简洁，并且没有自己的this、arguments、super或new.target

箭头函数不需要 function 关键字来创建函数，省略 return 关键字，继承当前上下文的 this 关键字

箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数

箭头函数小细节：

1.如果参数只有一个，可以省略()

/*匿名函数*/
let fn1 = function(a){
	return a*a;
}
console.log(fn1(5));//25

/*箭头函数*/
let fn2 = n =>{
	return n*n;
}
console.log(fn2(5));//25
//注：虽然可以省略return，但为了方便阅读，建议保留return

2.如果return只有一条语句，可以省略{}

let fn = (a,b) => a + b;
console.log(fn(8,9));//17

3.不改变上下文的this指代

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box1">按钮1</div>
		<div id="box2">按钮2</div>
		<script>
			let oBox1 = document.querySelector('#box1');
			let oBox2 = document.querySelector('#box2');
			
			console.log(this); //window
			
			//匿名函数
			oBox1.onclick = function(){
				console.log(this);
				//输出：<div id="box1">按钮1</div> 
				//this指代的是oBox1
			}
			
			//箭头函数：不改变上下文的this指代
			oBox2.onclick = () =>{
				console.log(this); //window
			}
		</script>
	</body>
</html>

注：箭头函数没有单独的this
如果是该函数是一个构造函数，this指针指向一个新的对象
在严格模式下的函数调用下，this指向undefined
如果是该函数是一个对象的方法，则它的this指针指向这个对象

原文链接：https://editor.csdn.net/md/?articleId=105790363

关于bind()和箭头函数就简单介绍到这里，想深入了解还需要查看官方文档！

学到很多东西的诀窍，就是一下子不要学很多 ——洛克

前端小曾

关注

13
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
解决this指代的三种常用方法

解决this指代的三种常用方法JavaScript语言的this对象一直是一个令人头痛的问题。在这里，我们以一个简单小例子来为大家讲解！直接上代码：class Animal { constructor() { this.type = 'animal'; } says(say) { setTimeout(function() { ...
复制链接

扫一扫