week04

学习this、闭包

this

前端基础进阶（七）：全方位解读 this JavaScript 深入之从 ECMAScript 规范解读 this 浏览器工作原理与实践 --- 11-this：从 JavaScript 执行上下文的视角讲清楚 this

闭包

前端基础进阶（五）：闭包前端基础进阶（六）：setTimeout 与循环闭包面试题详解 JavaScript 深入之闭包

作业

写出下面运行的结果

var name = 'window';
var person1 = {
  name: 'person1',
  foo1: function() {
    console.log(this.name);
  },
  foo2: () => console.log(this.name),
  foo3: function() {
    return function() {
      console.log(this.name);
    };
  },
  foo4: function() {
    return () => {
      console.log(this.name);
    };
  },
};
var person2 = { name: 'person2' };

person1.foo1();
person1.foo1.call(person2);

person1.foo2();
person1.foo2.call(person2);

person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);

person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);

答：   
person1。foo1()被对象person1拥有，所以this指向person1
person2。foo1内部的this指向改为person2

window。箭头函数不创建函数上下文，this是继承person作用域的this
window。箭头函数的this不被调用方式影响，定义时已决定

window。函数单独调用，this指向window(非严格模式)
window。person1.foo3.call(person2).使得foo3函数指向person2，但是返回的函数内部指向this没有改变。然后执行(),this还是指向window(非严格模式)
person2。将foo3返回的函数内部this指向person2。

person1。由于箭头函数的this和foo4作用域的this一样，普通函数的this是可以改变的。所以这里的this.name相当于在调用foo4的this.name
person2。这里改变了foo4的this指向person2.所以返回person2
person1。foo4()返回的是箭头函数，单纯的箭头函数this不能改变，申明的时候已经和foo4绑定了，call相当于只是一个调用作用，foo4的this指向person1

写出下面运行的结果

var name = 'window';
function Person(name) {
  this.name = name;
  this.foo1 = function() {
    console.log(this.name);
  };
  this.foo2 = () => console.log(this.name);
  this.foo3 = function() {
    return function() {
      console.log(this.name);
    };
  };
  this.foo4 = function() {
    return () => {
      console.log(this.name);
    };
  };
}
var person1 = new Person('person1');
var person2 = new Person('person2');

person1.foo1();
person1.foo1.call(person2);

person1.foo2();
person1.foo2.call(person2);

person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);

person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);

答：
  person1.foo1();//person1。被person1拥有，this指向person1.
  person1.foo1.call(person2);//person2。改变foo1的this指向为person2

  person1.foo2();//person1。箭头函数，定义时的this构造的实例，即person1
  person1.foo2.call(person2);//person1.箭头函数不修改this

  person1.foo3()();//window。单独调用
  person1.foo3.call(person2)();//window。改变了foo3函数的this，返回的函数没有改变，单独调用
  person1.foo3().call(person2);//person2。改变了返回函数的this。

  person1.foo4()();//person1。//返回的箭头函数的this是上一层真正函数的this，也就是第一个person1.foo4()的调用时的this，person1.
  person1.foo4.call(person2)();//person2。改变了foo4的this
  person1.foo4().call(person2);//person1。箭头函数this改变无效，内部this和foo4的this一样

写出下面运行的结果

function foo() {
  var myName = '每日互动';
  let test1 = 1;
  const test2 = 2;
  var innerBar = {
    getName: function() {
      console.log(test1);
      return myName;
    },
    setName: function(newName) {
      myName = newName;
    },
  };
  return innerBar;
}
var bar = foo();
bar.setName('个推');
bar.getName();
console.log(bar.getName());

1
1
个推
return innerBar 的时候，因为两个内部函数都有对foo作用域内变量的引用，所以foo函数退出时，会进行一个打包，所以bar的方法可以访问到foo作用域的变量

this指向题目

week04

学习this、闭包

this

闭包

作业