html js 获取this,JavaScript中的this引用(推荐)

this

this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。

一、定义

1、this是函数内部的一个特殊对象(或this引用)--它引用的是函数据以执行的环境对象。

2、this引用是一种在JavaScript的代码中随时都可以使用的只读变量。 this引用 引用(指向)的是一个对象，它有着会根据代码上下文语境自动改变其引用对象的特性。它的引用规则如下：

• 在最外层代码中，this引用 引用的是全局对象。

• 在函数内，this引用根据函数调用的方式的不同而有所不同。如下

1)构造函数的调用--this引用 引用的是所生成的对象

2)方法调用--this引用 引用的是接收方对象

3)apply或call调用--this引用 引用的是有apply或call的参数指定的对象

4)其他方式的调用--this引用 引用的是全局对象

二、根据以上所述及网上的相关资料，this对象(引用)的使用情况总结如下：

JavaScript是动态语言，this关键字在执行的时候才能确定是谁。所以this永远指向调用者，即对“调用对象”的引用。简单点说就是调用的方法属于哪个对象，this就指向那个对象。根据函数调用方式的不同，this可以 指向全局对象，当前对象，或其他任意对象。

1、全局函数调用，全局函数中的this会指向全局对象window。(函数调用模式)

//代码清单1

var message = "this in window"; //这一句写在函数外面和里面是一样效果

function func() {

if(this == window){

alert("this == window");

alert(message);

this.methodA = function() {

alert("I'm a function");

}

}

}

func(); //如果不调用func方法，则里面定义的属性或方法会取不到

methodA();

func()的调用结果为this == window， this in window

methodA()的调用结果为I'm a function

2、构造函数调用，即使用new的方式实例化一个对象，this会指向通过构造函数生成的对象。(构造器调用模式)

代码清单2

function Func() {

if (this == window) {

alert("this == window");

}

else {

alert("this != window");

}

this.fieldA = "I'm a field";

alert(this);

}

var obj = new Func();

alert(obj.fieldA); //this指向的是对象obj

3、对象方法的调用，this指向当前对象。任何函数，只要该函数被当做一个对象的方法使用或赋值时，该函数内部的this都是对该对象本身的引用。也可理解为this写在一个普通对象中，this指向的就是对象本身。(方法调用模式)

(方法的定义： 作为对象属性的函数称为方法)

//代码清单3

var obj = {

x: 3,

doit: function(){

if(this == window){

alert("this == window");

}else{

alert("method is called: " + this.x);

}

}

};

obj.doit(); //this指向的是对象obj

4、通过apply或call方法调用，this指向传入的对象。

apply 或call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 (apply调用模式)

//代码清单4

var obj = {

x: 3,

doit: function(){

alert("method is called: " + this.x);

}

};

var obj2 = {x: 4};

obj.doit(); //3,this指向obj

obj.doit.apply(obj2); //4,this指向obj2

obj.doit.call(obj2); //4,this指向obj2

5、原型链中的this --原型对象及构造函数中的this指向新创建的实例对象。使用prototype扩展方法可以使用this获取到源对象的实例，私有字段无法通过原型链获取。

//代码清单5

function Func() {

this.fieldA = "I'm a field";

var privateFieldA = "I'm a var";

}

Func.prototype = {

ExtendMethod: function(str) {

alert(str + " :" + this.fieldA);

alert(privateFieldA); //出错,私有字段无法通过原型链获取。

}

};

var obj = new Func();

obj.ExtendMethod("From prototype"); //此时构造函数及原型链中的this指向对象obj

6、闭包中的this --闭包：写在function中的function，this指向全局对象window。

6.1 对象中的闭包

//代码清单6

var name = "The window";

var obj = {

name: "My Object",

getNameFunc: function(){

return function(){

return this.name;

}

}

};

alert(obj.getNameFunc()()); //The window

此时，闭包中的this指向全局对象window，只能取到全局对象的属性。那么对象内部的属性(外部函数的变量)要想访问又怎么办呢？ 把外部函数的this对象保存在一个闭包能访问的变量就可以了。看如下代码：

//代码清单7

var name = "The window";

var obj = {

name: "My Object",

getNameFunc: function(){

var that = this;

return function(){

return that.name;

}

}

};

alert(obj.getNameFunc()()); //My object

将外部函数的this赋值给that变量，就能读取到外部函数的变量。

6.2 不管是直接引用function，还是实例化一个function，其返回的闭包函数里的this都是指向window。

//代码清单8

function a() {

alert(this == window);

var that = this;

var func = function() {

alert(this == window);

alert(that);

};

return func;

}

var b = a();

b(); //true, true, [object Window]

var c = new a();

c(); //false, true, [object object]

7、函数使用bind()方法绑定一个对象，this会指向传给bind()函数的值。

//代码清单9

window.color = "red";

var obj = {color: "blue"};

function sayColor(){

alert(this.color);

}

var objSayColor = sayColor.bind(obj);

objSayColor(); //blue

8、内嵌在HTML元素中的脚本段，this指向元素本身

//代码清单10

Click Me

function test(obj) {

alert(obj); //[object HTMLDivElement]

}

9、写在script标签中：this就是指全局对象window。这个跟第一点的全局函数调用的全局变量一样。

以上所述是小编给大家介绍的JavaScript中的this引用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！