其他分享
首页 > 其他分享> > 解决this指代的三种常用方法

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

作者:互联网

解决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()和箭头函数就简单介绍到这里,想深入了解还需要查看官方文档!

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

标签:常用,says,函数,bind,console,三种,animal,指代,fn
来源: https://blog.csdn.net/weixin_41967475/article/details/105790363