this 是 Javascript语言 的一个关键字,它代表函数运行时自动生成的一个内部对象,只能在函数内部使用。必须要说的是 this 指向不是在函数定义时确定的,只有函数执行的时候才能确定,实际上 this 最终指向那个调用它的对象
function identify() {
return this.name.toUpperCase();
}
function sayHello() {
var greeting = "Hello, I'm " + identify.call(this);
console.log( greeting );
}
var person1= {
name: "Kyle"
};
var person2= {
name: "Reader"
};
identify.call( person1);// KYLE
identify.call( person2);// READER
sayHello.call( person1);// Hello, I'm KYLE
sayHello.call( person2);// Hello, I'm READER
this 最终指向的是调用它的对象,下面函数a实际是被Window对象点出来的
function a(){
var user = "名称";
console.log(this.user);
// undefined
console.log(this);
// Window
}
a();
// 等同于
window.a();
函数可以作为某个对象的方法调用,这时方法中的 this 就指这个上级对象
var o = {
user: "名称",
fn: function(){
console.log(this.user);
// 名称
}
}
o.fn();
var o = {
a: 10,
b: {
a: 12,
fn: function(){
console.log(this.a);
// 12
}
}
}
o.b.fn();
var o = {
a:10,
b:{
fn:function(){
console.log(this.a);
// undefined
}
}
}
o.b.fn();
注 : this 指向在函数创建的时候是决定不了,在调用的时候才能决定,谁调用的就指向谁
1> 如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,需要说明的是在严格模式下 此时就不指向 window
2> 如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象
3> 如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象
this 永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的
var o = {
a: 10,
b: {
a: 12,
fn: function(){
console.log(this.a);// undefined
console.log(this);// window
}
}
}
var j = o.b.fn;
j();// 这里将 o.b.fn方法赋给j变量,此时j变量相当于window对象的一个属性,因此 j() 执行的时候相当于 window.j(),即 window对象调用 j 这个方法,所以this关键字指向 window
var personA = {
name: "AAA",
showName: function(){
console.log(this.name);// BBB
}
}
var personB = {
name: "BBB",
sayName: personA.showName
}
personB.sayName();// 虽然 showName方法是在 personA这个对象中定义,但是调用的时候却是在 personB这个对象中调用,因此 this对象指向 personB
var point = {
x: 0,
y: 0,
moveTo: function(x, y) {
var moveX = function(x) {
this.x = x;
};
var moveY = function(y) {
this.y = y;
};
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x;// 0
point.y;// 0
x;// 1
y;// 1
上面代码中 this绑定到 window的,所以改变 x 和 y的值而不是对象中的 point.x和 point.y的值,这属于 JavaScript 设计缺陷,正确的设计方式是内部函数 this 应该绑定到其外层函数对应的对象上,为了规避这一设计缺陷,使用如下替代方案 :
var point = {
x: 0,
y: 0,
moveTo: function(x, y) {
var that = this;
var moveX = function(x) {
that.x = x;
};
var moveY = function(y) {
that.y = y;
};
moveX(x);
moveY(y);
}
};
point.moveTo(1, 1);
point.x;// 1
point.y;// 1
new关键字 可以改变 this 的指向,将这个 this指向创建对象,另外改变 this 的指向还有 apply() call() bind() 方法,apply() call()
var x = 0;
function test(){
console.log(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m.apply();// 0 apply()的参数为空时默认调用全局对象,这时的运行结果为0,证明this指的是全局对象
o.m.apply(o);// 1 此时方法中的 this 指向 o
在使用 new 创建对象时,如果又返回值,this指向的就是那个返回的对象,如果返回值不是一个对象,那么 this 还是指向函数的实例,比较特殊的是返回 null 时this 还是指向函数的实例
function fn() {
this.user = '名称';
return {};
}
var a = new fn;
console.log(a.user);// undefined
function fn() {
this.user = '名称';
return function() {};
}
var a = new fn;
console.log(a.user);// undefined
function fn() {
this.user = '名称';
return 1;
}
var a = new fn;
console.log(a.user);// 名称
function fn() {
this.user = '名称';
return undefined;
}
var a = new fn;
console.log(a.user);// 名称
function fn() {
this.user = '名称';
return null;
}
var a = new fn;
console.log(a.user);// 名称
bind() 创建一个永恒的上下文链并且不可修改,一个绑定函数即使使用 .call() 或 .apply() 传入其他不同的上下文环境也不会更改它之前连接的上下文环境,重新绑定也不会起任何作用,只有在构造器调用时,绑定函数可以改变上下文,然而这并不是推荐的做法
超时调用的代码都是在全局作用域中执行的,因此函数中的 this 值,在非严格模式下是指向 window对象,在严格模式下是指向undefined,因此 setTimeout/setInterval/匿名函数 执行的时候 this默认指向 window对象,除非手动改变 this的指向
var name = "XL";
function Person() {
this.name = "xl";
this.showName = function() {
console.log(this.name);// XL setTimeout 方法中的 this 指向 window 对象
};
setTimeout(this.showName, 50);// 在setTimeout(this.showName,50)语句中,会延时执行 this.showName方法
}
var person = new Person();
// 更改后
var name = "XL";
function Person() {
this.name = "xl";
var that = this;// 让 that 得到执行 Person 实例的 this
this.showName = function() {
console.log(that.name);// xl
};
setTimeout(this.showName, 50);
}
var person = new Person();
//
匿名函数
var name = "XL";
var person = {
name: "xl",
showName: function(){
console.log(this.name);// 匿名函数中的 this 指向 windows 对象
},
sayName: function(){
(function(callback){
callback();
})(this.showName)
};
}
person.sayName();// XL
// 更改后
var name="XL";
var person = {
name: "xl",
showName: function() {
console.log(this.name);// xl
},
sayName: function(){
var that = this;
(function(callback){
callback();
})(that.showName);
}
}
person.sayName();// 匿名函数的执行同样在默认情况下this是指向window的,除非手动改变this的绑定对象
eval() : 接收原始字符串,并执行其中的 JavaScript 代码,该函数执行的时候,this 绑定到当前作用域的对象上
var name = "XL";
var person = {
name: "xl",
showName: function(){
eval("console.log(this.name)");
}
}
person.showName();
//
xl
var a = person.showName;
a();
//
XL
ES6 里面 this指向固定化,始终指向外部对象,因为箭头函数没有this,因此它自身不能进行new实例化,同时也不能使用call/apply/bind等方法来改变this的指向,箭头函数一次绑定上下文后便不可更改,即使使用了上下文更改的方法 :
function Timer() {
this.seconds = 0;
setInterval(() => this.seconds++, 1000);
}
var timer = new Timer();
setTimeout(() => console.log(timer.seconds), 3100);// 3
// 相当于
function Timer() {
this.seconds = 0;
_this = this;
setInterval(function() {
_this
.seconds++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log(timer.seconds), 3100);// 3
在严格模式中的默认 this 不是 window 而是 undefined