this 代码输出题

1. 简单函数调用this问题

function foo() {
  console.log( this.a );
}

function doFoo() {
  foo();
}

var obj = {
  a: 1,
  doFoo: doFoo
};

var a = 2; 
obj.doFoo()

答案: 2。

obj.doFoo调用doFoo函数执行,执行foo()函数,foo()函数执行时环境为Window(全局),所以this指向window,即this.a = 2;

2.箭头函数的this

var a = 10
var obj = {
  a: 20,
  say: () => {
    console.log(this.a)
  }
}
obj.say() 

var anotherObj = { a: 30 } 
obj.say.apply(anotherObj) 

答案: 10 10。

箭头函数没有this,在定义箭头函数时,箭头函数的this就已经决定了(其他方式不能更改),为箭头函数所处环境所在的上下文,即obj所在的window全局上下文

3.函数用作构造函数

var obj = { 
  name : 'cuggz', 
  fun : function(){ 
    console.log(this.name); 
  } 
} 
obj.fun()     // cuggz
new obj.fun() // undefined

答案: 使用new构造函数时,其this指向的是全局环境window。

4. 普通函数、箭头函数

var obj = {
   say: function() {
     var f1 = () =>  {
       console.log("1111", this);
     }
     f1();
   },
   pro: {
     getPro:() =>  {
        console.log(this);
     }
   }
}
var o = obj.say;
o();
obj.say();
obj.pro.getPro();

答案: 1111 window对象、1111 obj对象、window对象

解析:

  1. o和obj.say都指向function(){},内部有箭头函数,箭头函数的this为当前所处环境的this,而o在全局环境里,所以是window,而obj.say在obj对象里,所以this为obj;
  2. obj.pro.getPro(),箭头函数是不绑定this的,getPro处于pro中,而对象不构成单独的作用域,所以箭头的函数的this就指向了obj所在的全局作用域window。

5. argument调用

var length = 10;
function fn() {
    console.log(this.length);
}
 
var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};
 
obj.method(fn, 1);

答案: 10、2

解析:

  1. 第一次执行fn(),this指向window对象,输出10。
  2. 第二次执行arguments[0],相当于arguments调用方法,this指向arguments,而这里传了两个参数,故输出arguments长度为2。

6. window全局

function a(xx){
  this.x = xx;
  return this
};
var x = a(5);

console.log(x.x)


// var y = a(6);
// console.log(y.x);
// console.log(x.x);

答案:window

运行a()函数,this为window,所以window.x = 5,然后返回window,因为是var x来接收 window,所以window.x = 5被替换成window.x = x;

如果继续运行下面语句,会输出什么?

undefined、6

7. this 问题

var name = 222;
var a = {
    name: 111,
    say: function () {
        console.log(this.name);
    }
}
var fun = a.say;
fun();  
a.say();    

var b = {
    name: 333,
    say: function (fn) {
        fn()    
    }
}
b.say(a.say);   
b.say = a.say;
b.say();    

答案:222、111、222、333

posted @ 2022-04-06 19:33  青柠i  阅读(9)  评论(0编辑  收藏  举报