this在函数定义的时候不能确定指向,只有在执行的时候进入上下文环境才会确定。
一:全局函数
function a() {
console.log(this.name); //this.name为undefined
}
a(); //相当于window.a(), 所以this指向的是window。
二:对象方法
var obj = {
key: "main",
fun: function() {
console.log(this.key);
}
}
obj.fun(); //this指向的是obj这个对象
若obj中存在多层嵌套,this的指向只会是它的上一级对象,即调用它的对象。
var obj = {
key: "main",
item: {
fun: function() {
console.log("key: " + this.key); //this指向为item对象
}
}
}
但是!!!若将fun方法赋值给某一变量,则this指向就会发生变化,指向变为该变量的调用对象。
var fun = obj.item.fun;
fun(); //this指向的是window 因为实际是window.fun();
var a = {m: 1, n:2, key: "abcde"};
a.f = obj.item.fun;
a.f(); //输出为 "key: abcde" this的指向为对象a
三:构造函数
构造函数通过关键字new进行实例化,实例化后this指向对象f,f因为是F1的实例化,F1中有的所有属性方法都有相同的一份在对象f中,所以f中有属性name并且等于“JavaScript”。
function F1() {
this.name = "JavaScript";
}
var f = new F1();
console.log(f.name); //"JavaScript"
但是!!!若构造函数中遇到return则情况就不一样了!
返回值是对象的this指向为该返回对象,若返回值不是对象,则this指向不变,仍为构造函数的实例对象
function F1() {
this.name = "JavaScript";
return {}; //或者是[], function(){} 等返回值是一个对象;
}
var f = new F1();
console.log(f.name); //undefined
function F1() {
this.name = "JavaScript";
return 1; //或者是null, undefined, true, false, "xx"等返回值是一个非对象
}
var f = new F1();
console.log(f.name); //"JavaScript"
四:apply/call中使用
修改this的指向,调用某一对象的方法,用另一对象替换当前对象,即将一个函数对象的上下文修改为指定对象。
Parent.fn.call(Child, ...args); //args参数必须一个个列举出来
Parent.fn.apply(Child, args); //args是一个数组