闭包内存回收和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 {}
