如何判断this 指向哪一个对象?(得看this在哪)
-
若是在全局中,this则指向window
-
在function函数中(谁触发指向谁)
① 普通对象调用(this指向触发它的对象)
var a = 'hello'
function foo() {
var a = 'world'
console.log(this.a)
console.log(this)
}
foo()// 相当于执行 window.foo()
// "hello"
// Window 对象
var o = {
user: "追梦子",
fn: function () {
console.log(this.user); //追梦子
console.log(this);//Object对象(此处指向为对象o)
}
}
o.fn();
var o = {
user:"追梦子",
fn:function(){
console.log(this.user); //追梦子
console.log(this);//Object对象(此处指向为对象o)
}
}
window.o.fn();
var o = {
a: 10,
b: {
fn: function () {
console.log(this); // Object对象
console.log(this.a); //undefined
}
}
}
o.b.fn();
此时,这个Object对象指向的是对象b,所以this.a为undefined,因为对象b中不含有a属性。
总结一下:
情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window。
情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
情况3:如果一个函数中有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();
这里this指向的是window,是不是有些蒙了?那么请记住一句话。
this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的
② 作为构造函数被 new 调用
若是作为构造函数被new调用,则this指向的是new实例化的对象,下面我们来看一个例子:
function Fn() {
this.user = "追梦子";
}
var a = new Fn();
console.log(a.user)//====>'追梦子'
按照我们上面说的,此时的this即指向new实例化的对象a,即a.user=this.user=‘追梦子’
注意:当new碰到return时
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 [];
}
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);//===>追梦子
什么意思呢?
如果返回值是一个数组、对象或者函数时,那么this指向的就是那个返回的数组、对象或者函数。如果返回值不是这些,那么this还是指向函数的实例。
③通过call apply bind触发函数
var obj = {}
function foo(a, b) {
console.log('----------------------------------');
console.log(a);
console.log(b);
console.log(this);
if (typeof this === 'function') this()
console.log(this.constructor === String);
if (this.constructor === String) {
// 可以触发string中 api
var a = this.replace('1', '狗')
console.log(a);
}
}
// call();
// 作用:触发函数,并改变function函数中this,this为参数一
// 参数二,三...给被触发的函数传入实参的
window.foo(1,2)
foo.call(obj, 3, 2)
foo.call([], 4, 5)
foo.call(function () {
console.log('hahah');
}, 2, 3)
foo.call('123',3,4)
// apply
// 参数一,改变触发函数方法题中this this 为参数一
// 参数二:数组,给触发函数传递 n个实参
foo.apply(obj,[2,3])
foo.apply([],[2,3])
foo.apply(123,[2,3])
// bind
// 作用:更改触发函数中的this指向.
// 函数不能自动执行,需要再加小括号
// 返回值为新的函数,函数与 foo 一样功能的函数
var bar = foo.bind();
bar();
var bar1 = foo;
foo.bind(obj)(2,3)
foo.bind([])(2,3)
foo.bind(123)(2,3)
- 箭头函数中,其本身是没有this的,也没有arguments。关键看要看,箭头函数写在哪里。
① 全局中, this指向window
② function函数方法中,this指向function中this