es6与es5 中this的区别

最新推荐文章于 2022-11-08 14:49:45 发布

HeartAndThink

最新推荐文章于 2022-11-08 14:49:45 发布

阅读量879

点赞数

文章标签： es6 es5 this 箭头函数

本文链接：https://blog.csdn.net/heartAndthink/article/details/74753493

版权

廖雪峰：

实验:

<html>
	<head></head>
	<body>
		demo1:
		<script>
			var  obj = {
				birth:1990,
				getAge : function(){
				var birth = 1880;
					var b = this.birth;
					var fn = function() {
					    console.log(this); // window或undefined
					};
					
					return fn();   // 如果没有加return  fn 将没调用
				}
			}
			
			obj.getAge();
		</script>
		
		demo2:
		<script>
		var birth =222;
		var obj = {
		    birth: 1990,
		    getAge: function () {
				var birth = 22;
		        var b = this.birth; // 1990
		        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
				console.log(this);       // 指向obj
				console.log(this.birth); // 1990
				console.log(birth);     // 22
		        return fn();
				
		    }
		};
		obj.getAge(); 		
		
		es6 写法转换为es5
		
		var birth =222;
		var obj = {
		    birth: 1990,
		    getAge: function () {
				var birth = 22;
		        var b = this.birth; // 1990
				var fn = function(){return new Date().getFullYear()} - this.birth;
				console.log(this);
				console.log(this.birth);
				console.log(birth);
		      
				
		    }
		};
		obj.getAge(); 
		</script>
		
		注: this 是javascript的关键字之一,他代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
			随着函数使用的场合不同，this的值会发生变化。但是有一个总的原则:this指的是,调用函数的那个对象
			
			如demo1中的fn, 以为没有对象调用它，所以它是默认值 window或undefined
			demo2中  fn 在 getAge方法中，obj 调用了 getAge方法，所以this指 的是obj
			
	</body>
</html>

HeartAndThink

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
es6与es5 中this的区别

廖雪峰：实验: demo1: var obj = { birth:1990, getAge : function(){ var birth = 1880; var b = this.birth; var fn = function() { console.log(this); // window
复制链接

扫一扫