js中this详解

理解JavaScript中this的四种使用方式

最新推荐文章于 2024-09-19 07:04:58 发布

原创最新推荐文章于 2024-09-19 07:04:58 发布 · 212 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文详细解析了JavaScript中this的四种常见使用场景，包括作为对象属性的方法调用、全局函数调用、new关键字的应用及apply和call方法的使用。

this 的值取决于 function 被调用的方式，一共有四种，具体如下：

1,如果一个 function 是一个对象的属性，该 funtion 被调用的时候，this 的值是这个对象。


  <SCRIPT LANGUAGE="JavaScript">
  <!--
  var name="outer";

	var myObj={
		name : "inner",
		fun : function(){
			alert(this.name)
		}
	}
	myObj.fun();//打印"inner"

  //-->
  </SCRIPT>

2,如果一个 function 不是作为一个对象的属性，那么该 function 被调用的时候，this 的值是全局对象。


  <SCRIPT LANGUAGE="JavaScript">
  <!--
  var name="outer";
	var obj={
		name : "inner",
		fun : function(){
			-function(){
				alert(this.name)
			}()			
		}
	}
	obj.fun();//打印"outer"
  //-->
  </SCRIPT>

3,如果在一个 function 之前使用 new 的话，会创建一个新的对象，该 funtion 也会被调用，而 this 的值是新创建的那个对象。
如function User(name) {this.name = name}; var user1 = new User("Alex");中，通过调用new User("Alex")，会创建一个新的对象，以user1来引用，User这个 function 也会被调用，会在user1这个对象中设置名为name的属性，其值是Alex。

4,可以通过 function 的 apply 和 call 方法来指定它被调用的时候的 this 的值。 apply 和 call 的第一个参数都是要指定的 this 的值，两者不同的是调用的实际参数在 apply 中是以数组的形式作为第二个参数传入的，而 call 中除了第一个参数之外的其它参数都是调用的实际参数。如func.apply(anotherObj, [arg1, arg2])中，func调用时候的 this 指的是anotherObj，两个参数分别是arg1和arg2。同样的功能用 call 来写则是func.call(anotherObj, arg1, arg2)。


  <SCRIPT LANGUAGE="JavaScript">
  <!--
  var name="outer";

	var obj={
		name : "inner",
		fun : function(){
			alert(this.name)		
		}
	}
	obj.fun();//打印"inner"
	obj.fun.apply(window);//打印"outer"
  //-->
  </SCRIPT>