es6与es5 中this的区别

旧城等待， 2022-06-13 13:19 282阅读 0赞

廖雪峰：

![Center][]

实验:

<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>

[Center]: /images/20220613/2632ebccb14046d296d7c26d52cec518.png