this指针、作用域

Copy 
1let a = 'global';
2  console.log(a);
3
4  function course() {
5    let b = 'zhuawa';
6    console.log(b);
7
8    session();
9    function session() {
10      let c = 'this';
11      console.log(c);
12
13      teacher();
14      function teacher() {
15        let d = 'yy';
16        console.log(d);
17
18        // 作用域查找
19        console.log(b);
20      }
21    }
22  }
23  course();
24
25  // 取消了全局、块级作用域
26  if（true) {
27    let e = 1111;
28    console.log(e);
29  }

Copy 
1function foo() {
2  console.log("函数内部的this:", this);
3}
4
5foo();

Copy 
1function fn() {
2  console.log("隐式绑定：", this.a);
3}
4const obj = {
5  a: 1,
6};
7
8obj.fn = fn;
9obj.fn();

Copy 
1const foo = {
2  bar: 10,
3  fn: function () {
4    console.log(this.bar);
5    console.log(this);
6  },
7};
8let fn1 = foo.fn;
9fn1();
10
11// 如何改变指向
12
13const o1 = {
14  text: "o1",
15  fn: function () {
16    return this.text;
17  },
18};
19const o2 = {
20  text: "o2",
21  fn: function () {
22    return o1.fn();
23  },
24};
25const o3 = {
26  text: "o3",
27  fn: function () {
28    let fn = o1.fn;
29    return fn();
30  },
31};
32
33console.log(o1.fn());
34console.log(o2.fn());
35console.log(o3.fn());

Copy 
1// 1 - 人为干涉、改变this - bind/call/apply
2// 2 - 不许改变this
3const o1 = {
4  text: "o1",
5  fn: function () {
6    return this.text;
7  },
8};
9const o2 = {
10  text: "o2",
11  fn: o1.fn,
12};
13// this指向最后调用他的对象，在fn执行时，函数挂到o2上即可

Copy 
1function foo() {
2  console.log("函数内部的this:", this);
3}
4foo();
5
6foo.call({ a: 1 });
7foo.apply({ a: 1 });
8
9const bindFoo = foo.bind({ a: 1 });
10bindFoo();

Copy 
1class Course {
2  constructor(name) {
3    this.name = name;
4    console.log("构造函数中的this", this);
5  }
6
7  test() {
8    console.log("类方法中的this", this);
9  }
10}
11const course = new Course("this");
12course.test();

Copy 
1class Course {
2  constructor(name) {
3    this.name = name;
4    console.log("构造函数中的this", this);
5  }
6
7  test() {
8    console.log("类方法中的this", this);
9  }
10
11  asyncTest() {
12    console.log("异步方法外", this);
13    setTimeout(function () {
14      console.log("异步方法中的this", this);
15    }, 100);
16  }
17}
18const course = new Course("this");
19course.test();
20course.asyncTest();

Copy 
1function sum(a, b, c) {
2  console.log(a, b, c, this);
3  return a + b + c;
4}
5// 1. sum.bind - 在哪里 ? => Function.prototype
6//
7Function.prototype.newBind = function () {
8  // 2. bind 是什么？
9  // a.返回一个函数 b. 返回原函数执行结果 c. 传参不变
10  const _this = this;
11  const args = Array.prototype.slice.call(arguments);
12  // args特点： 第一项 - newThis, 第二项 ~ 最后一项 - 函数传参
13  const newThis = args.shift();
14
15  return function () {
16    return _this.apply(newThis, args);
17  };
18};

Copy 
1Math.max(2, 4, 5, 6);
2const arr = [2, 4, 5, 6];
3let max = Math.max.apply(this, arr);

Copy 
1function fn() {
2  console.log(this);
3}
4
5const obj = {
6  fn,
7};
8
9obj.fn(); // obj
10
11// 显式 > 隐式
12obj.fn.bind(111)();
13
14function foo(a) {
15  this.a = a;
16}
17
18const obj1 = {};
19
20var bar = foo.bind(obj1);
21bar(2);
22console.log(obj1.a); // 2
23
24// new
25let baz = new bar(3);
26
27// new > 显式
28console.log(obj1.a); // 2
29console.log(baz.a); // 3

Copy 
1function mail() {
2  let content = "信";
3  return function () {
4    console.log(content);
5  };
6}
7const envelop = mail();
8envelop();

Copy 
1let content;
2function envelop(fn) {
3  content = 1;
4
5  fn();
6}
7function mail() {
8  console.log(content);
9}
10envelop(mail);

Copy 
1let counter = 0;
2
3function outerFn() {
4  function innerFn() {
5    counter++;
6    console.log(counter);
7  }
8  return innerFn;
9}

Copy 
1let lis = document.getElementsByTagName("li");
2
3for (var i = 0; i < lis.length; i++) {
4  (function (i) {
5    lis[i].onclick = function () {
6      console.log(i);
7    };
8    // setTimeout(function() {
9    //   console.log(i);
10    // }, 100)
11  })(i);
12}

Copy 
1(function immediateA(a) {
2  return (function immediateB(b) {
3    console.log(a); // 0
4  })(1);
5})(0);

Copy 
1let count = 0;
2(function immediate() {
3  if (count === 0) {
4    let count = 1;
5
6    console.log(count);
7  }
8  console.log(count);
9})();

Copy 
1function createIncrement() {
2  let count = 0;
3
4  function increment() {
5    count++;
6  }
7
8  let message = `count is ${count}`;
9
10  function log() {
11    console.log(message);
12  }
13
14  return [increment, log];
15}
16
17const [increment, log] = createIncrement();
18increment();
19increment();
20increment();
21log(); // count is 0

Copy 
1function createStack() {
2  return {
3    items: [],
4    push(item) {
5      this.items.push(item);
6    },
7  };
8}
9const stack = {
10  items: [],
11  push: function () {},
12};
13
14function createStack() {
15  const items = [];
16  return {
17    push(item) {
18      items.push(item);
19    },
20  };
21}