码迷,mamicode.com
首页 > 编程语言 > 详细

javascript this

时间:2016-07-22 21:00:39      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

  在上篇执行上下文中,在建立阶段中,工作之一就是this值的赋值,那什么是this呢?一起学习下。

  主要看了王福朋的一篇文章:http://www.cnblogs.com/wangfupeng1988/p/3988422.html

  先看一个例子:

	var name = "dog";  
	var nameObj ={  
	    name : "cat",  
	    showName : function(){  
	        alert("this:"+this+";this.name:"+this.name);  
	    },  
	    waitShowName : function(){  
	        setTimeout(this.showName, 1000);  
	    }  
	};  

	nameObj.waitShowName();

  结果是:

技术分享

  由图可知,this是window,而this.name自然就是"dog",可this.name为什么不是"cat"呢?

   根据王福朋的文章,再测试一下几种情况:

  情况1:构造函数

	function add(){
		this.name = "niulina";
		this.age = 24;

		console.log(this);
	}
	var a = new add();

  结果:

技术分享

  所谓构造函数就是用来new对象的函数。而构造函数中的this指代的是拥有属性name,age的对象a。

  

  若不new一个对象出来,那this指代的是:

	function add(){
		this.name = "niulina";
		this.age = 24;

		console.log(this);
	}
	add();

  结果:

技术分享

  那在这种情况下,this指代的是window。

   情况2:函数作为对象的一个属性

	var obj = {
		x:10,
		fn:function(){
			console.log(this);
			console.log(this.x);
		}
	};
	obj.fn();

   结果:

  技术分享

  由结果可知:函数fn被作为obj对象的属性,此时的this指代的是obj对象。

  如果把fn单提出来后调用会怎样?

	var obj = {
		x:10,
		fn:function(){
			console.log(this);
			console.log(this.x);
		}
	};
	var fn1 = obj.fn;
	fn1();

  结果:

技术分享

  如果被fn函数被赋给fn1,然后在全局环境中调用,this指的就是window。

  情况3:函数用call或者apply调用

	var obj = {
		x:10,
	};
	var fn = function(){
		console.log(this);
		console.log(this.x);
	}
	fn.call(obj);

  结果:

技术分享

  调用call后,this指代的是对象obj,这是因为在call函数中,改变的this的指向。apply函数同理。

  情况4:全局 & 调用普通函数  

	var x = 10;
	var fn = function(){
		console.log(this);
		console.log(this.x);
	}
	fn();

  结果:

技术分享

  由结果可知,在全局环境下,this指代的是window。

  有一个情况比较特殊:

	var obj = {
		x:10,
		fn:function(){
			function f(){
				console.log(this);
				console.log(this.x);
			}
			fn();
		}
	};
	obj.fn();

  结果:

技术分享

  f函数在fn函数中定义幷被调用,但其this指代的还是Window。

  所以说:

  一般而言,在Javascript中,this指向函数执行时的当前对象。this关键字在Javascript中和执行环境,而非声明环境有关。

javascript this

标签:

原文地址:http://www.cnblogs.com/niulina/p/5696292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!