【JavaScript】关于this的代码输出题总结

• • 1.在Javascript中，this指向函数执行时的当前对象
  • 2.箭头函数时不绑定this的，它的this来自原其父级所处的上下文
  • 3.如果第一个参数传入的对象调用者是null或者undefined，call方法将把全局对象（浏览器上是window对象）作为this的值
  • 4. 使用new构造函数时，其this指向的是全局环境window
  • 5. 对象不构成单独的作用域

1.在Javascript中，this指向函数执行时的当前对象

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

function doFoo() {
  foo();
}

• 该处的执行foo()的时候，执行环境为doFoo函数，而该函数为普通函数，this指向window

2.箭头函数时不绑定this的，它的this来自原其父级所处的上下文

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

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

• 该代码的obj对象是在全局定义的，故箭头函数say()方法继承其父级所处的上下文，即windows，所以第一个输出仍然是10，后面虽然让say方法指向了另外一个对象，但是仍不能改变箭头函数的特性，它的this仍然是指向全局的，所以依旧会输出10。
• 若为say为普通函数，其this指向指向他所在的对象，即输出obj其中的a的值

3.如果第一个参数传入的对象调用者是null或者undefined，call方法将把全局对象（浏览器上是window对象）作为this的值

function a() {
  console.log(this);
}
a.call(null); 

• 输出window对象
• 但若开启了严格模式，null 就是 null，undefined 就是 undefined

'use strict';

function a() {
    console.log(this);
}
a.call(null); // null
a.call(undefined); // undefined

4. 使用new构造函数时，其this指向的是全局环境window

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

5. 对象不构成单独的作用域

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

• 调用o()：注意此时调用的环境是在全局作用域下，f1() 箭头函数继承父级say function() 在全局作用域中，故打印出window；
• obj.say()：谁调用say，say 的this就指向谁，所以此时this指向的是obj对象；
• obj.pro.getPro()：由于getPro处于pro中，而对象不构成单独的作用域，所以箭头的函数的this就指向了全局作用域window；