2021/12/10,星期五,晴,回想上一次更博客就像是在十天前一样。
今天来看看this指向的一个知识点,毕竟用到的地方也不少。
// 谁调的函数,this指向谁(上一级)
var name = 'aaa'
function one() {
var name = 'bbb'
console.log(this.name);
}
one() // "aaa" 指向window
var obj1 = {
name: 'ccc',
two: function () {
console.log(this.name);
}
}
obj1.two(); // "ccc" 指向obj1
window.obj1.two(); // 还是"ccc"
var obj2 = {
name: 'ddd',
obj3: {
name: 'eee',
fn2: function () {
console.log(this.name);
}
}
}
obj2.obj3.fn2(); // "eee" 函数被上一级对象调用或是对外层对象调用,this指向依然是他的上级
var obj3 = {
name: 'ddd',
obj4: {
fn2: function () {
console.log(this.name);
}
}
}
obj3.obj4.fn2(); // "undefined" 函数上级没有name
var obj4 = {
name: 'ddd',
obj5: {
name: 'eee',
fn2: function () {
console.log(this); // "window"
console.log(this.name); // "aaa" 之前15行声明的
}
}
}
var fn = obj4.obj5.fn2;
fn(); // 真正调用的是window里的fn,之前只是obj5所引用
//如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。
function Three() {
this.name = 'fff'
return {}
}
var threeF = new Three()
console.log(threeF.name); // undefined
function Three2() {
this.name = 'fff'
return { name: 'ggg' }
}
var threeF2 = new Three2()
console.log(threeF2.name); // ggg
function Four() {
this.name1 = 'fff';
return function () { };
}
var fourF = new Four();
console.log(fourF.name1); // undefined
function Five() {
this.name1 = 'fff';
return 1;
}
var fiveF = new Five();
console.log(fiveF.name1); // "fff"
// null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊.
function Six() {
this.name1 = 'fff';
return null;
}
var sixF = new Six();
console.log(sixF.name1); // "fff"
// new关键字改变this指向,将this指向对象Seven,因为new关键字会创建对象实例
function Seven() {
this.name = "ddd"
}
var sevenF = new Seven()
console.log(sevenF.name); // "ddd" 指向sevenF
总而言之,正常情况下,先去找调用this的那个函数的父级,构造函数new改变指向return对象指向那个return的对象(null例外),不是对象或者没有return则指向函数的实例(null是对象但是指向函数实例)。
搞定收工!