javascript中this关键字的使用

最新推荐文章于 2024-09-01 00:27:10 发布

原创最新推荐文章于 2024-09-01 00:27:10 发布 · 324 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript this指向 #this使用 #this指向对象 #this使用方法

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文详细解释了JavaScript中this关键字的不同指向情况，包括作为对象方法、普通函数、构造函数调用时this的指向，以及使用call或apply方法改变this指向的方法。

javascript的this总是指向一个对象，具体指向哪个对象是基于函数的执行环境动态确定，并非指函数被申明时的环境，this的指向大致分为：

1.作为对象的方法调用

当函数作为对象的方法被调用时，this指向该对象：

var obj = {
    a:1,
    getA:function(){
	alert(this === obj);
	alert(this.a);
    }
}
obj.getA(); //输出结果：true 1

2.作为普通函数调用

当函数不作为对象的属性被调用时，此时的this指向全局对象。

<1>浏览器的javascript中，全局对象是window对象。

<2>函数体的宿主对象为window对象。

window.name = 'globalName';
var myObject = {
	name : 'huahua',
	getName : function(){
		return this.name;
	}
}
var getName = this.name;  
console.log(getName());
输出:globalName

var getName = myObject.getName();
console.log(getName);
输出:huahua

3.构造器调用

<1>当用new运算符调用函数时，该函数总会返回一个对象，通常情况下，构造器里的this指向返回的这个对象。

var myClass = function(){
	this.name = 'seven';
}
var obj = new myClass();
alert(obj.name); //输出seven

<2>构造器显示返回object类型的对象是则结果改变如：

var myClass = function(){
    this.name = 'seven';
    return {
	name:'anne'
    }
}
var obj = new myClass();
alert(obj.name); //输出anne

<3>构造器返回值非对象类型

var myClass = function(){
    this.name = 'seven';
    return 'anne'; 
}
var obj = new myClass();
alert(obj.name); //输出seven

4.Function.prototype.call或Function.prototype.apply调用

跟普通的函数调用相比，用Function.prototype.call或Function.prototype.apply可以动态更改chuan如函数的this:

ar obj = {
	name : 'LiLI',
	getName : function(){
		return  this.name;
	}
}
var newObj = {
	name : 'nana'
}
console.log(obj.name);  //输出LiLI
console.log(obj.getName.call(newObj));  //输出nana