闭包内存回收和this的四个绑定规则

内存回收

闭包内存泄漏案例

function createFnArray() {
  var arr = new Array(1024 * 1024).fill(1);
  return function () {
    console.log(arr.length);
  };
}
var arrayFns = [];
for (var i = 0; i < 100; i++) {
  arrayFns.push(createFnArray());
}

function createFnArray() {
  var arr = new Array(1024 * 1024).fill(1);
  return function () {
    console.log(arr.length);
  };
}
var arrayFns = [];
for (var i = 0; i < 100; i++) {
  arrayFns.push(createFnArray());
}
setTimeout(() => {
  arrayFns = null;
}, 2000);

function createFnArray() {
  var arr = new Array(1024 * 1024).fill(1);
  return function () {
    console.log(arr.length);
  };
}
var arrayFns = [];
for (var i = 0; i < 100; i++) {
  setTimeout(() => {
    arrayFns.push(createFnArray());
  }, i * 100);
}
setTimeout(() => {
  for (var i = 0; i < 50; i++) {
    setTimeout(() => {
      arrayFns.pop();
    }, 100 * i);
  }
}, 10000);

function createFnArray() {
  var arr = new Array(1024 * 1024).fill(1);
  return function () {
    console.log(arr.length);
  };
}
var arrayFns = [];
for (var i = 0; i < 100; i++) {
  setTimeout(() => {
    arrayFns.push(createFnArray());
  }, i * 100);
}
setTimeout(() => {
  for (var i = 0; i < 100; i++) {
    setTimeout(() => {
      arrayFns.pop();
    }, 100 * i);
  }
}, 10000);

js闭包引用的自由变量销毁

function foo() {
  var name = "why";
  var age = 18;
  function bar() {
    console.log(name);
    console.log(age);
  }
  return bar;
}
var fn = foo();
fn();
// why
// 18

function foo() {
  var name = "why";
  var age = 18;
  function bar() {
    console.log(name);
  }
  return bar;
}
var fn = foo();
fn();
// why

this

this的作用

var obj = {
  name: "why",
  eating: function () {
    console.log(obj.name + "在吃东西");
  },
  running: function () {
    console.log(obj.name + "在跑步");
  },
  studying: function () {
    console.log(obj.name + "在学习");
  }
};
obj.eating();
obj.running();
obj.studying();
// why在吃东西
// why在跑步
// why在学习

var obj = {
  name: "why",
  eating: function () {
    console.log(this.name + "在吃东西");
  },
  running: function () {
    console.log(this.name + "在跑步");
  },
  studying: function () {
    console.log(this.name + "在学习");
  }
};
obj.eating();
obj.running();
obj.studying();
// why在吃东西
// why在跑步
// why在学习

this在全局作用域指向什么

console.log(this);
// 浏览器 window
// node {}

同一个函数的this的不同

function foo() {
  console.log(this);
}
foo();
var obj = {
  name: "why",
  foo: foo
};
obj.foo();
foo.apply("abc");
// window
// { name: 'why', foo: [Function: foo] }
// [String: 'abc']

同一个函数的this的不同 案例的启示

• 函数在调用时，JavaScript会默认给this绑定一个值
• this的绑定和定义的位置没有关系
• this的绑定和调用方式以及调用的位置有关系
• this是在运行时绑定的

this的绑定方式

• 默认绑定
• 隐式绑定
• 显示绑定
• new绑定

默认绑定

• 独立函数的调用我们理解成函数没有绑定到某个对象上进行调用

function foo() {
  console.log(this);
}
foo();
// window

function foo1() {
  console.log(this);
}
function foo2() {
  console.log(this);
  foo1();
}
function foo3() {
  console.log(this);
  foo2();
}
foo3();
// window
// window
// window

var obj = {
  name: "why",
  foo: function () {
    console.log(this);
  }
};
var bar = obj.foo;
bar();
// window

function foo() {
  console.log(this);
}
var obj = {
  name: "why",
  foo: foo
};
var bar = obj.foo;
bar();
// window

function foo() {
  function bar() {
    console.log(this);
  }
  return bar;
}
var fn = foo();
fn();
// window

function foo() {
  function bar() {
    console.log(this);
  }
  return bar;
}
var fn = foo();
fn();
var obj = {
  name: "why",
  eating: fn
};
obj.eating();
// window
// {name: "why", eating: ƒ}

隐式绑定

• 通过某个对象发起的函数调用

function foo() {
  console.log(this);
}
var obj = {
  name: "why",
  foo: foo
};
obj.foo();
// {name: "why", foo: ƒ}

var obj = {
  name: "why",
  eating: function () {
    console.log(this.name + "在吃东西");
  },
  running: function () {
    console.log(obj.name + "在跑步");
  }
};
obj.eating();
obj.running();
// why在吃东西
// why在跑步

var obj = {
  name: "why",
  eating: function () {
    console.log(this.name + "在吃东西");
  },
  running: function () {
    console.log(obj.name + "在跑步");
  }
};
var fn = obj.eating;
fn();
// undefined在吃东西

var obj1 = {
  name: "obj1",
  foo: function () {
    console.log(this);
  }
};
var obj2 = {
  name: "obj2",
  bar: obj1.foo
};
obj2.bar();
// { name: 'obj2', bar: [Function: foo] }

显示绑定

隐式绑定的一个前提条件

• 必须在调用的对象内部有一个对函数的引用
• 如果没有这样的引用，在进行调用时，回报找不到该函数的错误
• 正是通过这个引用，间接的将this绑定到这个对象上

如果我们不希望在对象内部包含这个函数的引用，同时又希望在这个对象上进行强制调用

• JavaScript所有的函数都可以使用call和apply方法(这个和Prototype有关)

  apply和call的区别

  • 第一个参数是相同的
  • 后面的参数
    • apply为数组
    • call为参数列表

• 这两个函数的第一个参数都要求是一个对象，这个对象的作用是什么呢？就是给this准备的

• 在调用这个函数时，会将this绑定到这个传入的对象上

function foo() {
  console.log("函数被调用了");
}
foo.call();
foo.apply();
var fn = foo.bind();
fn();
// 函数被调用了
// 函数被调用了
// 函数被调用了

function foo() {
  console.log("函数被调用了", this);
}
var obj = {
  name: "obj"
};
foo.call(obj);
foo.apply(obj);
foo.apply("aaaa");
var fn = foo.bind(obj);
fn();
// 函数被调用了 { name: 'obj' }
// 函数被调用了 { name: 'obj' }
// 函数被调用了 [String: 'aaaa']
// 函数被调用了 { name: 'obj' }

function sum(num1, num2, num3) {
  console.log(num1 + num2 + num3, this);
}
sum.call("call", 20, 30, 40);
sum.apply("apply", [20, 30, 40]);
// 90 [String: 'call']
// 90 [String: 'apply']

function foo() {
  console.log(this);
}
foo.call("aaa");
foo.apply("aaa");
foo.bind("aaa")();
var newFoo = foo.bind("aaa");
newFoo();
newFoo();
newFoo();
// [String: 'aaa']
// [String: 'aaa']
// [String: 'aaa']
// [String: 'aaa']
// [String: 'aaa']
// [String: 'aaa']

new绑定

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var p1 = new Person("why", 18);
console.log(p1, p1.name, p1.age);
var p2 = new Person("kobe", 30);
console.log(p2, p2.name, p2.age);
var obj = {
  foo: function () {
    console.log(this);
  }
};
new obj.foo();
// Person { name: 'why', age: 18 } why 18
// Person { name: 'kobe', age: 30 } kobe 30
// foo {}